Level 6
Hi there!
Have you tried moving these two "require" lines up so that the files are loaded before the "import" statement is called?
require('./components/Navbar.vue').default
require('./components/Customers.vue').default
4 likes
May 14, 2019
5
Level 1
Laravel + Vue.js: [Vue warn]: Failed to mount component: template or render function not defined.
Hi, I am trying to use vue-router links to load my home and about.vue but I get this error:
app.js:64725 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
warn @ app.js:64725
mountComponent @ app.js:68122
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:73129
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:76014
init @ app.js:67216
merged @ app.js:67399
createComponent @ app.js:70058
createElm @ app.js:70005
updateChildren @ app.js:70296
patchVnode @ app.js:70399
patch @ app.js:70560
Vue._update @ app.js:68034
updateComponent @ app.js:68152
get @ app.js:68563
run @ app.js:68638
flushSchedulerQueue @ app.js:68396
(anonymous) @ app.js:66080
flushCallbacks @ app.js:66006
Promise.then (async)
timerFunc @ app.js:66033
nextTick @ app.js:66090
queueWatcher @ app.js:68488
update @ app.js:68628
notify @ app.js:64836
reactiveSetter @ app.js:65161
(anonymous) @ app.js:63967
(anonymous) @ app.js:63966
updateRoute @ app.js:63425
(anonymous) @ app.js:63303
(anonymous) @ app.js:63412
step @ app.js:63142
step @ app.js:63149
runQueue @ app.js:63153
(anonymous) @ app.js:63407
step @ app.js:63142
(anonymous) @ app.js:63146
(anonymous) @ app.js:63392
(anonymous) @ app.js:63220
iterator @ app.js:63371
step @ app.js:63145
step @ app.js:63149
runQueue @ app.js:63153
confirmTransition @ app.js:63400
transitionTo @ app.js:63302
push @ app.js:63703
push @ app.js:63993
handler @ app.js:61870
invokeWithErrorHandling @ app.js:65954
invoker @ app.js:66279
original._wrapper @ app.js:71632
app.js:
require('./bootstrap');
require('quasar-framework/dist/quasar.mat.css');
window.Vue = require('vue');
import Quasar from 'quasar-framework';
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(Quasar);
Vue.use(VueRouter)
import Myheader from './components/Myheader';
import Myfooter from './components/Myfooter';
let Home = require('./components/Home.vue');
let About = require('./components/About.vue');
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
el: '#app',
router,
components:{Myheader, Myfooter}
});
customers.blade.php:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<!-- <meta name="csrf-token" content="{{ csrf_token() }}"> -->
<title>Document</title>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<!-- <app></app> -->
<Myheader></Myheader>
<router-view></router-view>
<Myfooter></Myfooter>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
<!-- ============================= -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PSD systems</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<Myheader></Myheader>
<Myfooter></Myfooter>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html> -->
Myheader.vue:
<template>
<div>
<q-layout>
<!-- Header -->
<div slot="header" class="toolbar bg-green-8">
<q-toolbar-title :padding="1">
PSD System
</q-toolbar-title>
<div>
<q-tabs slot="navigation" class="toolbar bg-green-8">
<q-tab><router-link to="/home">Home</router-link></q-tab>
<q-tab><router-link to="/about">About</router-link></q-tab>
</q-tabs>
</div>
</div>
</q-layout>
</div>
</template>
<script>
export default {
data: function() {
return {
};
},
mounted() {
console.log('Component mounted.')
}
}
</script>
I'm also using quasar framework. I just need the router-links to load the home and about vue but this error keeps appearing... Ive searched for quite a while now and still nothing.....
Thanks! Any help is appreciated!
Level 47
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
something like that.
3 likes
Level 1
@MAVERICKCHAN - I just replace example component with login/register? Thanks.
Level 47
@KAYGERO - what do mean?
Level 2
@corcronje - Placed the components on top. It worked, Thanks :D
Please or to participate in this conversation.