I am using the default Laravel 5.3 setup - a fresh install with default configuration for Vue.js 2.0.

With Laravel 5.1 and Vue.js 1.x, I could easily define ponents like and used browserify to pile.

Vueponent('test-ponent', require('./test-ponent');  

/*  test-ponent.js */
export default{
    template:require('./test-ponent.template.html')
}

/* test-ponent.template.html  */
<div class="test-ponent">
    <h1> Test Component <h1>
</div>  

However, with Vue 2, the default is webpack (although browserify is also available but could not get it working and webpack seems better). But I am not able to get the configuration working.

I have tried various configurations, finally I have this in my gulp.js file

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 

var config = {

    module:{
        loaders:[
            {
                test: /\.html$/,
                loader: 'vue-loader'
            }
        ]
    }
};
elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js',null, null, config);
});  

Now I am not getting any errors while piling gulp webpack however when I try to view the page in the browser, it doesn't show the ponent and has an error/warn in the console

vue.js?3de6:513[Vue warn]: invalid template option:[object Object] 
(found in ponent <test>)

vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)  

My app.js main entry file (default provided by Laravel)

require('./bootstrap');

Vueponent('test-ponent', require('./ponents/test-ponent'));

const app = new Vue({
    //el: '#app',
}).$mount('#app');  

What am I missing? Any pointers would be appreciated.

I am using the default Laravel 5.3 setup - a fresh install with default configuration for Vue.js 2.0.

With Laravel 5.1 and Vue.js 1.x, I could easily define ponents like and used browserify to pile.

Vue.ponent('test-ponent', require('./test-ponent');  

/*  test-ponent.js */
export default{
    template:require('./test-ponent.template.html')
}

/* test-ponent.template.html  */
<div class="test-ponent">
    <h1> Test Component <h1>
</div>  

However, with Vue 2, the default is webpack (although browserify is also available but could not get it working and webpack seems better). But I am not able to get the configuration working.

I have tried various configurations, finally I have this in my gulp.js file

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 

var config = {

    module:{
        loaders:[
            {
                test: /\.html$/,
                loader: 'vue-loader'
            }
        ]
    }
};
elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js',null, null, config);
});  

Now I am not getting any errors while piling gulp webpack however when I try to view the page in the browser, it doesn't show the ponent and has an error/warn in the console

vue.js?3de6:513[Vue warn]: invalid template option:[object Object] 
(found in ponent <test>)

vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)  

My app.js main entry file (default provided by Laravel)

require('./bootstrap');

Vue.ponent('test-ponent', require('./ponents/test-ponent'));

const app = new Vue({
    //el: '#app',
}).$mount('#app');  

What am I missing? Any pointers would be appreciated.

• javascript
• php
• laravel
• laravel-5.3
• vuejs2

Share Improve this question Follow edited Dec 13, 2016 at 7:32 Donkarnash asked Dec 13, 2016 at 7:12 DonkarnashDonkarnash 12.9k55 gold badges3030 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

1. You have to use html-loader instead of vue-loader.

   npm install html-loader --save-dev
   

2. Your gulpfile.js (need to change the loader):

   const config = {
     module: {
       loaders:[{
         test: /\.html$/,
         loader: 'html'
       }]
     }
   };
   
   elixir((mix) => {
     mix.sass('app.scss')
       .webpack('app.js', null, null, config);
   });
   

3. Your test-ponent.js (no changes, you're good to go):

   export default {
     template: require('./test-ponent.template.html')
   }
   

4. Your test-ponent-template.html: (no changes, you're good to go)

   <div class="test-ponent">
     <h1>Test Component Goes Here</h1>
   </div>
   

Important

5. Here's how to define your ponent:

   • Using Default

     Vue.ponent('test-ponent', require('./test-ponent').default);
     

   • Or, simply use ES2015 import

     import TestComponent from './test-ponent';
     
     Vue.ponent('test-ponent', TestComponent);
     

Try this in your gulp file:

 const elixir = require('laravel-elixir');
 require('laravel-elixir-vue-2');

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

And import your ponents like this:

import Test from './Components/Test.vue';

Vue.ponent('test', Test);