I use Laravel 8 with laravel/ui 3.4 for front end.
I want to create fixed sidebar, footer and an area for router-view.
routes/web.php
Route::view('/{any}', 'home')->where('any', '.*');
resources/home.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<router-view />
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
resouces/js/app.js
require('./bootstrap')
import { createApp } from 'vue'
import router from './router'
createApp({}).use(router).mount('#app')
resouces/js/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Shop from '../pages/Shop'
const routes = [
{
path: '/',
name: 'shop',
component: Shop
}
]
export default createRouter({
history: createWebHistory(),
routes
})
resouces/js/components/Sidebar.vue
<template>
This is fixed sidebar. This includes dynamics content
</template>
How to include this sidebar in home.blade.php ?
Or is there any way to create default Vue layout with child components?
SOLVED: I create a sidebar at js/components/layouts/MainSidebar.vue
js/app.js
import mainsidebar from './components/layouts/MainSidebar.vue'
const app = createApp({})
app.component('main-sidebar', MainSidebar)
home.blade.php
<div id="app">
<main-sidebar></main-sidebar>
<router-view />
</div>
Use <main-sidebar></main-sidebar> not <main-sidebar />
Related
I am trying to render <script> tags but unable to do so. Although javascipt is already enabled for the browser. Screenshot of the error message on browser console.
Code snippet.
import './App.css';
import React from "react";
import {Helmet} from "react-helmet";
class App extends React.Component {
render () {
return (
<div className="application">
<h1>My name is </h1>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="ffwesfwef" ></script>
<Helmet>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="wefewfwefwe" ></script>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://myurl.net/example" />
</Helmet>
</div>
);
}
};
export default App;
I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')
I install vuetify using npm install vuetify and after then I added npm install sass sass-loader deepmerge -D Then I use php artisan serve and there is nothing in the site and in the console there is an error Uncaught ReferenceError: Vuetify is not defined.Also I add vue add vuetify and the plugin file was created and dependencies was added.nothing happens.Please help me to fix this issue.
mainapp.vue
<template>
<v-app >
<Navbar />
<v-main>
<router-view/>
</v-main>
<Footer />
</v-app>
</template>
<script>
//import HelloWorld from './HelloWorld'
import Navbar from './pages/navbar'
import Footer from './pages/footer'
export default {
components: { Navbar,Footer },
name: 'App',
// components: {
// HelloWorld
// },
data () {
return {
//
}
}
}
</script>
app.js
require('./bootstrap');
window.Vue=require('vue');
import router from './router';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
Vue.component('mainapp',require('./components/mainapp.vue').default);
const app=new Vue(
{
el: '#app',
vuetify: new Vuetify(),
router,
}
)
welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Fullstack Blog</title>
<link rel="stylesheet" href="/css/all.css">
<!-- to show icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>
i am very new in laravel + react js. I followed the tutorial and i don't know what is happening why output doesn't out.
Here is my problem. I already installed laravel 5.8 and react js, but when i call the id named example, it doesn't return any view.
Now here is the laravel code:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
</head>
<body>
<div id="example"></div>
<script src="/js/app.js"></script>
</body>
</html>
after that here is the react javascript:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
the location of the javascript file is in: resources/js for the app.js
I have a Vue.js app. My app is mainly composed of single file components. I'm trying to use the vue-bootstrap-datetimepicker component in one of my components.
At this time, my app runs. When I click on the date field, the current date appears. However, I never see the popup calendar. I also don't see any errors in the Chrome Console window. I don't understand why this isn't working. Currently, I have the following:
page.vue
<template>
<div>
<date-picker v-model="myDate" :config="myDateConfig"></date-picker>
<br />
</div>
</template>
<script>
import datePicker from 'vue-bootstrap-datetimepicker';
export default {
components: {
datePicker
},
data: function() {
return {
myDate: null,
myDateConfig: {
format: 'MM/DD/YYYY',
useCurrent: true,
showClear: true,
showClose: true
},
}
}
</script>
app.js
import Vue from 'vue';
window.Vue = Vue;
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import moment from 'moment';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
const routes = [
{ path: '/', component:require('./page.vue').default }
];
const router = new VueRouter({
routes:routes
});
const app = new Vue({
router,
el: '#app'
data: {}
});
index.html
<!doctype html>
<html lang="en">
<head>
<title>DatePicker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/vue#2.5.3/dist/vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Why doesn't the popup calendar show up when I click in the date-picker?