初めてのnuxt.js / nuxt-property-decoratorの導入方法

基本的に使用しているのはVC

コンポーネントを利用するために、Nuxt.jsをビルドしたら、
下記のコマンドを入れ、Typescriptの導入環境を整える。

１．builderの設定
yarn add nuxt-property-decorator
参照：https://typescript.nuxtjs.org/ja/guide/setup.html#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
2. decoratorの設定
yarn add nuxt-property-decorator

早速簡単なコードをtypescriptで作ってみる。

Nuxt.js/Vuetify/Typescript

<template>
  <v-content>
    <v-row>
      <p>名前：{{name}}</p>
      <p>年齢：{{age}}</p>
      <p>出身地：{{country}}</p>
      <p>３倍の値は:{{triple}}</p>
    </v-row>
    <template>
      <button @click="onClickButton">このボタンを押してぴょん</button>
    </template>
  </v-content>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class index extends Vue {
  public name: string = "taro";
  public age: number = 24;
  public country: string = "日本";
  public score: number = 55;

  get triple() {
    return this.score * 3;
  }

  public onClickButton() {
    alert("よっしゃ！");
  }
}
</script>

これでとりあえず、Nuxt.jsへのTypescript導入は完了