namedTemplate

Stability: experimental ⚠️ Experimental feature, use at your risk

WARNING

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

<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.