kaygero
68
4
Vue

Laravel + Vue.js: [Vue warn]: Failed to mount component: template or render function not defined.

Posted 1 week ago by kaygero

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!

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.