How to use x-template to separate out template from Vue Component

Question

Tried to separate out template from Vue Component as below but it does not work. Referencing only vue.js file and not browsify.

Vue.component('my-checkbox', {
    template: '#checkbox-template',
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
});

<script type="text/x-template" id="checkbox-template">
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title"></div>
    </div>
</script>

Or any alternate way to separate out template from vue component.

Answer 1

You define X-Templates in your HTML file. See below for a brief demo

// this is the JS file, eg app.js
Vue.component('my-checkbox', {
    template: '#checkbox-template',
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
});

new Vue({el:'#app'})

/* CSS file */
.checkbox-wrapper {
  border: 1px solid;
  display: flex;
}
.checkbox {
  width: 50px;
  height: 50px;
  background: red;
}
.checkbox.checked {
  background: green;
}

<!-- HTML file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/x-template" id="checkbox-template">
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title">{{ title }}</div>
    </div>
</script>
<div id="app"> <!-- the root Vue element -->
  <my-checkbox></my-checkbox> <!-- your component -->
</div>

Answer 2

Actually the code snippet you posted is not the whole thing. Here is what I've tested.

in file x_template.js

export default {
  template: '#x-template',
  data() {
    return { point: 1 }
  },
  methods: {
    inc() { this.point++ }
  }
}

in x_template_app.js file

import * as Vue from "vue"
import XTemplate from "./x_template"

const app = Vue.createApp(XTemplate)
app.mount("#x-template-app")

Then in the html file

<div id="x-template-app">  
</div>  

<script type="text/x-template" id="x-template">
  <p>Point is: {{ point }}. <button @click="inc">Inc</button></p>
</script>

As we can see the template actually defined in html file with a script tab wrapped.

Answer 3

Sorry for my bad english it's not my main language!

Try it!

You need generate two file in same directory:

• path/to/checkboxComponent.vue
• path/to/checkboxComponent.html

In checkboxComponent.vue file

<script>
// Add imports here eg:
// import Something from 'something';
export default {
    template: require('./checkboxComponent.html'),
    data() {
        return { checked: false, title: 'Check me' }
    },
    methods: {
        check() { this.checked = !this.checked; }
    }
}
</script>

In checkboxComponent.html file

<template>
    <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <div class="title"></div>
    </div>
</template>

Now you need to declare this Component in same file you declare Vue app, as the following:

Vue.component('my-checkbox', require('path/to/checkboxComponent.vue').default);

In my case

I have three files with these directories structure:

js/app.js
js/components/checkboxComponent.vue
js/components/checkboxComponent.html

In app.js, i'm declare the Vue app, so the require method path need to start with a dot, like this:

Vue.component('my-checkbox', require('./components/checkboxComponent.vue').default);