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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With