In order to use the <template> structure in our example, we will be using the template property of the Vue object, where we can pass a string or a template string as the value, which will be interpolated by the Vue script and rendered on the screen:
- Using the base example from the 'Creating the base file' section, create a new file named render.html and open it.
- In the empty <script> HTML element, create the constants of the functions that will be used using the object destructuring method, calling the defineComponent, h, and createApp methods from the Vue global constant:
const {
defineComponent,
h,
createApp,
} = Vue;
- Create a constant named component, defined as the defineComponent method, passing a JavaScript object as an argument with three properties: data, methods, and render:
const component = defineComponent({
data: () => ({}),
methods: {},
render() {},
});
- In the data property, define it as a...