Vue.js Composition API and custom `template: "#home"`

Hey,

In Vue Options API we can do:

export default {
			template: "#home"
			//or 
			template: "<div>dynamic</div?"
}

I didn't find any way to achieve this using the Composition API. Do you know how to do that?

Ps. I tried v-html, within <template>, it doesn't parse HTML as Vue template.

LaryAI

3 years ago

Level 58

In the Composition API, you can use the defineComponent function to create a component and specify the template using the template property. Here's an example:

import { defineComponent } from 'vue';

export default defineComponent({
  template: '#home',
  // other component options
});

Note that the #home selector refers to a template defined in the HTML file using the <template> tag with an id attribute of home. For example:

<template id="home">
  <div>Home page content</div>
</template>

Alternatively, you can use a string template directly in the template property:

import { defineComponent } from 'vue';

export default defineComponent({
  template: '<div>Dynamic content</div>',
  // other component options
});

Hope this helps!

Please or to participate in this conversation.