How to use external html templates in Components with Vue.js 2.0 in Laravel 5.3

Question

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 components like and used browserify to compile.

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

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

/* test-component.template.html  */
<div class="test-component">
    <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 compiling gulp webpack however when I try to view the page in the browser, it doesn't show the component and has an error/warn in the console

vue.js?3de6:513[Vue warn]: invalid template option:[object Object] 
(found in component <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.component('test-component', require('./components/test-component'));

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

What am I missing? Any pointers would be appreciated.

abettermap · Accepted Answer · 2018-06-02 22:24:21Z

3

You have to use html-loader instead of vue-loader.
```
npm install html-loader --save-dev
```

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);
});

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

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

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

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

Important

Here's how to define your component:

Using Default

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

Or, simply use ES2015 import

import TestComponent from './test-component';

Vue.component('test-component', TestComponent);

edited Jun 2, 2018 at 22:24

abettermap

6708 silver badges16 bronze badges

answered Dec 13, 2016 at 8:16

krisanalfa

6,4482 gold badges32 silver badges39 bronze badges

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

4 Comments

Donkarnash Over a year ago

Thank you so much. I had been struggling with this since 2 days. I had tried with vue-html-loader but didn't work. Now its working with the import statement but doesn't work with Vue.component('test-component', require('./test-component').default);. Still checking my code for any typos.

krisanalfa Over a year ago

Glad to help you, Sir @Donkarnash :)

Donkarnash Over a year ago

My bad, I had a typo. It works with both import as well as Vue.component('test-component', require('./test-component').default);. Thank you again.

krisanalfa Over a year ago

Oh, I didn't notice that! Great! One consideration, I think using html-loader is a bit faster than using vue-loader. Because vue-loader will try to parse template, script, and style tag; while html-loader will only return the html content on your *.template.html file. But, still, it's all up to you, Sir :)

Jamie · Accepted Answer · 2016-12-13 07:48:15Z

0

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 components like this:

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

Vue.component('test', Test);

answered Dec 13, 2016 at 7:48

Jamie

11k35 gold badges111 silver badges200 bronze badges

1 Comment

Donkarnash Over a year ago

This works with .vue files. I don't have issues with .vue files for components. I have issues when I have template for the component in a htmlfile while the script for the component is in a .js file from where I do a template:require('./test-component.template.html')

Collectives™ on Stack Overflow

How to use external html templates in Components with Vue.js 2.0 in Laravel 5.3

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related