How to import external template in vue js?

Question

I am beginner to vue js, not sure i am asking correct or not.

I want to make following type of structure for my Laravel 5.3 - Vue Js App.

1. my-vue.js

    Vue.component('my-component', {
           template: 'template from Catgory.Vue'
    })
   
    new Vue({
       el: '#example'
    })
   

2. Category.vue

   <template>
       <div>
           // some code goes here
       </div>
   </template>
   

3. index.blade.php

   <div id="example">
      <my-component></my-component>
   </div> 
   

   How can i use template from Category.vue in template attribute of Vue.component? Or Suggest me better approach.

Answer 1

This link can be useful

 Vue.component('my-component', {
   template: require('./Category.html')
 });
 new Vue({
     el: '#example'
 })

Category.html.js

module.exports = `<div>Hello, {{ name }}!</div>`;