vuejs / laravel-elixir-vue-2

Laravel Elixir Vue 2.0 support plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Failed to mount component: template or render function not defined.

maxxscho opened this issue · comments

I have a fresh install of laravel with the Example.vue file. if I'm testing it without running gulp, everything works fine. Once I started using gulp and everything gets compiled new, I get the following error in the console:

vue.js?0598:2611[Vue warn]: Failed to mount component: template or render function not defined. 
(found in component <example> ...

The correct Vue is loaded from vue/dist/vue.js. I haven't change anything on the fresh Laravel installation, except the necessary changes in the view file to make an #app container.

Hello @maxxscho

Thank your for your interest in this project.

However, your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests.

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

Had the same issue as @maxxscho. I was able to resolve it by changing my gulpfile.js from this

elixir(function(mix) {
    mix.webpack('script.js');
});

elixir(function(mix) {
    mix.styles('style.css');
});

to this

elixir(function(mix) {
    mix.webpack('script.js');
    mix.styles('style.css');
});

Have same problem...

As @benbjurstrom said, and @JeffreyWay too here, calling elixir only once solves the problem.

Right - you should only call elixir() once, per Gulpfile.

According to vue docs, i solved this problem, adding 4th parameter to webpack:

mix.webpack('app.js', null, null, {
           resolve: {
               alias: {
                   'vue$': 'vue/dist/vue.js'
               }
           }
       })

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.