Geek Answers Handbook

Vue 2.0 Failed to mount component: template or rendering function not defined

I use the Laravel Vue setup and pull out the Laravel Elixir package, Webpack and laravel-elixir-vue-2 .

I looked at several other SO issues, and I know that this is usually a problem with not linking to the standalone version of vue.js

However, the alaases of the laravel-elixir-vue-2 package are standalone, so templates can be loaded from .vue files. However, 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)

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

Can anyone see what I am 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 syntax of gulp.js 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 a default export {}; to script template

+6
source share
3 answers

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

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

I do not know why, but two elixir calls break the webpack. I change my gulpfile to:

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

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

Edit: See This Laravel Elixir Problem

+7
source

Hi, I had this problem before playing with VueJs 2.0 RC. I think I did by creating webpack.config.js in the root of the project and add the following:

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

Also not sure if this will change the situation, but before you try the above, add "vue": "^ 2.0.1" to your package.json file and do npm install (or just npm install vue)

+2
source

Even if your component has no parameters, its script tag should still export an empty object, so vue-loader can introduce the render function into it:

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

More articles:


All Articles