I am new to Laravel and Vue Js. I am facing an issue and I am not being able to figure out what the exact problem is.
app.blade.php
<body>
<v-app id="app">
<example-component/>
</v-app>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Example from './components/ExampleComponent';
new Vue({
el: '#app',
router,
vuetify
});
ExampleComponent.vue
<template>
<div>
<v-content>
<v-container>
<v-btn color="primary" link to="/foo">Foo</v-btn>
<v-btn color="primary" link to="/bar">Bar</v-btn>
</v-container>
<router-view></router-view>
</v-content>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify)
export default new Vuetify({
})
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}
Vue.use(VueRouter)
const routes = [
{
path: '/foo',
component: foo,
},
{
path: '/bar',
component: bar,
}
]
export default new VueRouter({
routes
})
It is giving me this error in the console:
app.js:23169 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<VContent>
<ExampleComponent> at resources/js/components/ExampleComponent.vue
<VApp>
<Root>
My buttons are not loading the router-view. Also, I would like to know what is the difference between registering components using import and Vue.component? Please help me.
It looks like there is a typo. Change:
const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}
to
const foo = {template: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {template: '<v-alert type="success">I am Bar</v-alert>'}
Related
router-view and router-link components cannot be resolved in my app
I don't know what the problem is
attached the app code
it's a home page app with something like a navbar to route to the vue components like states
App\resources\js\router.js
import States from './components/States.vue'
import Cities from './components/Cities.vue'
import Areas from './components/Areas.vue'
import Addresses from './components/Addresses.vue'
const router =createRouter({
history:createWebHistory,
routes :[
{
name:'states',
path:'/states',
Commponent: States
},
{
name:'cities',
path:'/cities',
Commponent: Cities
},
{
name:'areas',
path:'/areas',
Commponent: Areas
},
{
name:'addresses',
path:'/addresses',
Commponent: Addresses
}
]
})
export default new VueRouter({
router
});
App\resources\js\app.js
import App from './components/App.vue'
import router from './router'
import VueAxios from 'vue-axios'
import axios from 'axios'
const app = createApp(App)
app.use(VueAxios,axios,router)
app.mount('#MyApp')
App\resources\js\components\App.vue
<div class="container">
<h2>welcome to vue</h2>
<div class="navbar-nav">
<router-link to="/states">States</router-link>
<router-link to="/cities">Cities</router-link>
<router-link to="/areas">Areas</router-link>
<router-link to="/addresses">Addresses</router-link>
</div>.
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
C:\Users\Kareem\App\resources\js\components\States.vue
<h3>welcome to states component</h3>
</template>
<script>
export default {
}
</script>
<style>
</style>
Try like this for Vue3:
import { createApp } from "vue";
createApp(App)
.use(VueAxios, axios)
.use(router)
.mount('#MyApp')
I registered App.vue as the main component in Vue.js but when I use it in Laravel blade I get this console error
[Vue warn]: Unknown custom element: <app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
this is my code in app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: history
});
Vue.config.devtools = true;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
and my blade
<div id="app">
<App></App>
</div>
<script src="{{ asset('js/app.js') }}"></script>
this is the code I write in App.vue
<template>
<div class="app">
<h1 class="display-4">Hello World from App.vue</h1>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
then in your blade file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
also make sure to add this route
Route::get('/{any}', 'SpaController#index')->where('any', '.*');
You can register components like this:
Vue.component("Name", require("./components/Name.vue").default);
app.js:
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import routes from './routes'
import App from './App'
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: history
});
Vue.config.devtools = true;
//import components
Vue.component(
'app',
require('./components/App.vue').default);
new Vue({
router,
render: h => h(App)
}).$mount('#app');
I import the vue-route to my app.js in my laravel vue website. Sadly, there's an error. Can you please guide me thanks
app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{path: '/', component: require('./components/Welcome.vue') }
]
const router = new VueRouter({
mode: 'history',
routes
})
const app = new Vue({
el: '#app',
router,
});
master.blade.php
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
<div id="app">
#yield('content')
</div>
</body
welcome.blade.php
#extends('layouts.master')
#section('content')
<router-view></router-view>
<vue-progress-bar> </vue-progress-bar>
#endsection
The result should be the Welcome.vue will display.
If you use a newer version of Vue.js you should have .default to require('./components/Welcome.vue')
So line 5 would look like this
{path: '/', component: require('./components/Welcome.vue').default }
Stack Overflow: Why need default after require() method in Vue?
As per documentation, you should inject router option to make your whole app router aware.
So you should have something like this:
const app = new Vue({
router
}).$mount('#app')
I think this is duplicate of this.
I'm new with vuetify and i trying to implement it in laravel.
Does someone have already implement vuetify in laravel and could tell me how?
i have already install with
npm install vuetify
and try this in App.scss
#import '~vuetify/dist/vuetify.min.css';
This is my app.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.use(VueRouter)
// parents componenets
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('example', require('./components/example.vue'));
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
but when i try to use some vuetify components it doesn't work.
This is my component.
<template>
<v-app id="inspire" dark>
<v-navigation-drawer
clipped
fixed
v-model="drawer"
app
>
<v-list dense>
<v-list-tile #click="">
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile #click="">
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-tooltip right>
<v-btn icon large :href="source" target="_blank" slot="activator">
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span>© 2017</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: null
}),
props: {
source: String
}
}
</script>
and try this in App.scss
#import '~vuetify/dist/vuetify.min.css';
but when i try to use some vuetify components it doesn't work.
I will give you all steps to implement vuetify in laravel
-1 run npm command to install vuetify in your laravel project
npm install vuetify
-2 go to app.js file and add this code
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
-3 go to app.scss file and add this code
#import "~vuetify/dist/vuetify.min.css";
-4 and finally you can add this code in app.scss for vuetify fonts because if you do not add the following code you can not use vuetify fonts and it will not be displayed
#import url('https://fonts.googleapis.com/css?family=Material+Icons');
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
#import url('https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css');
hope this can be helpful for you
I too had the same problem which solve with this
<body>
<div id="admin" dark>
<v-app id="inspire">
....
</v-app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>`
in the javascript
const app = new Vue({
el: '#admin'
...
});
I'm following this video: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true
My initial problem is described here, but that was resolved. I include it here so you can see what steps I've taken so far.
Now, I'm getting this warning: [Vue warn]: Failed to mount component: template or render function not defined.
A warning is not so bad, but the router-view is not showing up. That is, there is nothing showing up below the Home and About links.
master.blade.php
<!doctype html>
<html lang="en">
<head>
<title>My App</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
Home.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Home Page</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Any help would be appreciated.
Thanks!
[Edit 1]
resources/assets/js/app.js
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router
});
resources/assets/js/bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
[Edit 2]
resources/assets/js/routes.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home.vue')
}
];
export default new VueRouter({
routes
});
Ah! Thanks to TheFallen's questions, I see my problem. Here's what my routes.js file should look like:
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
let routes = [
{
path: '/',
component: Home
}
];
export default new VueRouter({
routes
});