Laravel 5.4 Vue.JS Failed to mount component: template or render function not defined

Question

Starting with Vue.js and wanted to give it a try to the example that comes with laravel.

No component is displayed and in console I get

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

found in

---> <Example>
   <Root>

Not a fresh install, upgraded from 5.2->5.3->5.4

resources/assets/js/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');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

resources/assets/js/components/Example.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">Example Component</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>

This is the blade in which I have the js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="css/app.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
    <body>
    <div id="app">
        <example></example>
    </div>
        <script src="js/app.js" charset="utf-8"></script>
    </body>
</html>

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

do you have laravel mixx here? can you show webpack.mix.js ?(in root) — cssBlaster21895
another thing, maybe compare your package json with source one - especially the vue version github.com/laravel/laravel/blob/master/package.json — cssBlaster21895

cssBlaster21895 cssBlaster21895 · Accepted Answer · 2017-09-07T19:44:38

It has to do with the way you are mounting Vue. One time it needs compiler and another time not https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only .

You could try my way (it is pure vue project, made from vue webpack template):

import Vue from 'vue'
import App from './App'
import Example from './components/Example'
import router from './router' //this will import router/index.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App, Example }
})

This will mount component in global object.

Laravel 5.4 Vue.JS Failed to mount component: template or render function not defined

8 Answers