Nuxt Composition APIでコンポーネントを継承する

はじめに

nuxtでcomponentsを継承する方法が見つからなかったのでまとめます。

• 派生元

<template>
  <button type="button">
    {{ name }}
  </button>
</template>

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'

export default defineComponent({
  name: 'Original',
  setup: {
    const name = ref('オリジナル')
    return { name }
  }
})
</script>

• 派生先

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import Original from '@/components/Original.vue'

export default defineComponent({
  name: 'Derived',
  extends: Original,
})
</script>