vue 2.0 Failed to mount component: template or render function not defined

Question

I am using a Laravel Vue setup and pulling in Laravel Elixir, Webpack and laravel-elixir-vue-2 package.

I have looked at several other SO questions and I know this is usually a problem with not referencing the standalone version of vue.js

However, the laravel-elixir-vue-2 package aliases vue to the standalone version so templates can be loaded from .vue files. Still, I get this error every time:

[Vue:Warn] vue 2.0 Failed to mount component: template or render function not defined. (found in component <top> at ../resources/assets/js/components/top.vue)

I can see that vue.js is being pulled in from vue/dist/vue.js?0598:2611 in the console.

Can anyone see what I'm missing?

app.js

import Vue from 'vue'
import top from './components/top.vue'

new Vue({
el: '#app',
components: { top }
})

//I've also tried this: 

// new Vue({
//  components: {
//    top
//  },
// render: h => h(top),
// }).$mount('#app')

top.vue

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>
<script>
 export default {};
</script>

index.blade.php

<div>
   <div id="app">
<top></top>
   </div>
</div>
{!! HTML::script('js/app.js') !!}

package.json

{
  "private": true,
  "scripts": {
  "prod": "gulp --production",
  "dev": "gulp watch"
},
"devDependencies": {
   "bootstrap-sass": "^3.3.0",
   "gulp": "^3.9.1",
   "laravel-elixir": "^6.0.0-9",
  "laravel-elixir-vue-2": "^0.2.0",
  "laravel-elixir-webpack-official": "^1.0.2"
  }
 }

gulp.js

var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
require('laravel-elixir-vue-2');

elixir(function(mix) {
  mix.webpack('app.js', 'public/assets/js');
});

Edit: update

Changing the gulp.js syntax fixed my error.

var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2')

elixir(mix => {

  mix.webpack('app.js');

  mix.styles([
    "normalize.css",
    "main.css"
    ]);

});

edit: I added export default {}; to the template script

Try registering the component with Vue.Component(name, url) before you use it. I don't really see why you should get that error. — Verem Dugeri
– Verem Dugeri, Commented Oct 16, 2016 at 19:39
I have the same issue. The correct vue gets loaded. With the fresh laravel installation it worked. After I started gulp the first time, it stopped working. — Markus Schober
– Markus Schober, Commented Oct 21, 2016 at 12:55
@MarkusSchober I've just got this working (well, a very basic setup working). changing the syntax in my gulp.js file was the answer. I'll update my question to show the new syntax — retrograde
– retrograde, Commented Oct 21, 2016 at 16:23

Markus Schober · Accepted Answer · 2016-10-22 07:38:24Z

8

Like my comment in the question, I had the same problem. In my case I had two elixir calls like this:

elixir(mix => {
    mix.browserSync({
        proxy: 'example.dev',
        open: false
    });
});

elixir(mix => {
    mix.sass('app.scss');
    mix.webpack('app.js');
});

I don't know why, but the two elixir calls are breaking webpack. I change my gulpfile to:

elixir(mix => {
    mix.sass('app.scss');
    mix.webpack('app.js');
    mix.browserSync({
        proxy: 'example.dev',
        open: false
    });
});

@retrograde, thx for your hint in your comment :)

Edit: See this Laravel Elixir Issue

answered Oct 22, 2016 at 7:38

Markus Schober

3482 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

retrograde Over a year ago

Thanks for putting it in answer form. Hope this saves somebody hours of frustration.

Peter Fox Over a year ago

Having this problem and this fixed it, bizarre problem.

Alexander van Zyl · Accepted Answer · 2016-10-20 09:30:02Z

2

Hi have had this issue before when playing around with VueJs 2.0 RC I think what I did was create a webpack.config.js in the project root and add the following:

module.exports = {
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
        }
    }
};

Also not sure it would make a difference but before trying the above maybe add "vue": "^2.0.1", to your package.json file and do npm install (or just npm install vue)

answered Oct 20, 2016 at 9:30

Alexander van Zyl

211 bronze badge

1 Comment

retrograde Over a year ago

The npm package 'laravel-elixir-vue-2' includes that alias reference. And my vue file is vue/dist/vue.js (checked in console). Unfortunately, I still have not been able to get this to work.

Joseph Silber · Accepted Answer · 2016-10-16 14:39:13Z

0

Even if your component has no options, its script tag still has to export an empty object, so that vue-loader can inject the render function into it:

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>

<script>
    export default {};
</script>

answered Oct 16, 2016 at 14:39

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Collectives™ on Stack Overflow

vue 2.0 Failed to mount component: template or render function not defined

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related