nuxtjs/typscriptでコンポーネントを作成する

Options APIの場合

• components/test.vueファイルを作成して下記のように記述する

<template>
    <div>
        Name: {{ fullName }}
        Message: {{ message }}
    </div>
</template>
<script lang="ts">
import Vue, { PropOptions } from 'vue'

interface User {
  firstName: string
  lastName: string
}

export default Vue.extend({
  name: 'YourComponent',

  props: {
    user: {
      type: Object,
      required: false
    } as PropOptions<User>
  },

  data () {
    return {
      message: 'This is a message'
    }
  },

  computed: {
    fullName (): string {
      return `${this.user.firstName} ${this.user.lastName}`
    }
  }
})
</script>

• pages/index.vueに下記のように記述する

<template>
  <div class="container">
    <Test :user="user"/>
  </div>
</template>

<script>
import Test from '~/components/Test.vue'

export default {
  components: {
    Test
  },
  data() {
    return {
      user: {
        firstName: '太郎',
        lastName: '山田'
      }
    }
  },
}
</script>

Composition Apiの場合

• plugins/composition-api.jsファイルに下記のように記述する

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

• components/hoge.vueファイルを下記のように記述する

<template>
    <div>
        CNT: {{ count }}
        <button @click="increment">ボタン2</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const count = ref(0);
    function increment() {
      count.value += 1;
    }
    return {
      count,
      increment,
    };
  },
});
</script>

• pages/index.vueに下記のように記述する

<template>
  <div class="container">
    <Hoge />
  </div>
</template>

<script>
import Test from '~/components/Hoge.vue'

export default {
  components: {
    Hoge
  },
}
</script>