namedTemplate
Stability:
experimental
⚠️ Experimental feature, use at your riskWARNING
Not actively maintained now. Try createReusableTemplate instead.
With enabling namedTemplate
, <template>
can be referenced like a variable.
Sometimes we need to reverse the order of the very simple components, and don't want to give the features of Vue template up and use JSX/TSX. Then this feature is much helpful.
If you support this feature, you can go to the discussion and hit like 👍 or comment.
Features | Supported |
---|---|
Vue 3 | ✅ |
Vue 3.3 | ❌ |
Nuxt 3 | ❌ |
Vue 2 | ❌ |
TypeScript / Volar | ❌ |
Basic Usage
vue
<script setup>
const pager = 'top'
</script>
<template name="pager">
<span>This is pager</span>
</template>
<template>
<template v-if="pager === 'top'">
<template is="pager" />
</template>
<span>Here is data table</span>
<template v-if="pager === 'bottom'">
<template is="pager" />
</template>
</template>
Known Usage
- TypeScript / Volar support is not yet completed.