create-nuxt-appを使ってTypeScriptのNuxtテンプレを作ってみました。

ここで言うテンプレは開発するための準備です。
create-nuxt-app用のテンプレートを作成したわけではありません。

Table of Contents

はじめに

なぜNuxt.jsやTypeScriptを使うかの経緯は以下の記事で説明済みのため省略します。

利用技術

今回使用する技術は上記記事とは少し異なります。

大きな変更点は以下3点です。

• Nuxt.js 2.4からTypeScriptに正規対応したのでnuxt-tsコマンドを使う
• create-nuxt-appを使う
• PWA対応

JavaScriptで動く環境を作る

create-nuxt-appを使って環境構築します。

create-nuxt-appは公式がメンテナンスしており、Nuxtの公式ドキュメントでも推奨されています。
しかし、現在はまだTypeScriptへ対応していません。

そのため、まずはJavaScriptで動作する環境を作ってからTypeScript用の設定を入れていきます。

環境構築

プロジェクトディレクトリの中に移動して以下コマンドを実行します。
もしディレクトリ未作成の場合は指定したプロジェクト名でディレクトリが作成されます。

$ npx create-nuxt-app .

途中いくつか質問されますので答えましょう。
ポイントは以下です。

• ServerはNoneを選択
• UIライブラリはVuetifyを選択
• SPAを選択
• PWAを選択

動作確認

開発確認実行をしてみましょう。

$ npm run dev

起動後、コンソール上で案内されたエンドポイントにアクセスできればOKです。

TypeScriptで動くようにする

TypeScriptで開発出来るように準備します。

以下の内容は上記を参考にしています。

nuxt-tsのインストール

create-nuxt-appでインストールされるNuxt.jsは2.4以上ですが、それとは別にnuxt-tsをインストールする必要があります。

$ npm install nuxt-ts

その後にpackage.jsonのdevコマンドをnuxt-tsにします。

-   "dev": "nuxt",
+   "dev": "nuxt-ts",
 

これを忘れるとTypeScriptとしてビルドされません。

vue-property-decoratorのインストール

デコレータで可読性の高いコードを書けるようにするため、vue-property-decoratorをインストールします。

今回のサンプルコードでは@Componentを使用します。

nuxt.config.jsの修正

まずは名前をnuxt.config.tsに変更してください。
これを忘れると、nuxt-tsが設定を読み込んでくれません。

次に以下の部分を削除します。

-  /*
-   ** You can extend webpack config here
-   */
-   extend(config, ctx) {
-
-   }
 

これを忘れると、extendの引数であるconfigとctxが暗黙的anyのためエラーになります。
もしextendが必要な場合はルールを変更したり、anyを指定することで対処してください。

動作確認

JavaScriptのときと同じコマンドです。

$ npm run dev

初回実行時はtsconfig.jsonを作ってよいか聞かれますのでyesを選びます。

"resolveJsonModule": true,

import pkg from './package.json'

  "compilerOptions": {
    "paths": {
      "~/*": ["./*"]
    }
  }

TypeScriptのコードにする

動きはしましたが、まだvueファイルはJavaScriptのままです。
これをTypeScriptにしてみましょう。

default.vueの修正

default.vueを開き、<script>を<script lang=ts>に変更します。
これで<script>タグの内部はTypeScriptとして認識されるようになります。

更に<script>タグ内部を以下のように変更します。

export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'apps',
          title: 'Welcome',
          to: '/'
        },
        {
          icon: 'bubble_chart',
          title: 'Inspire',
          to: '/inspire'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify.js'
    }
  }
}

import { Component, Vue } from 'vue-property-decorator'

interface Item {
  icon: string
  title: string
  to: string
}

@Component({})
export default class extends Vue {
  clipped = false
  drawer = false
  fixed = false
  miniVariant = false
  right = true
  rightDrawer = false
  title = 'Vuetify.js'
  items: Item[] = [
    {
      icon: 'apps',
      title: 'Welcome',
      to: '/'
    },
    {
      icon: 'bubble_chart',
      title: 'Inspire',
      to: '/inspire'
    }
  ]
}

tsconfig.jsonの修正

デコレータを使うために必要な設定をtsconfig.jsonのcompilerOptionsに追加します。

  {
    "extends": "@nuxt/typescript",
    "compilerOptions": {
+     "experimentalDecorators": true,
 

この設定を忘れるとビルドエラーになります。

動作確認

$ npm run dev

先ほどと同じ画面が表示されればOKです😄

PWAとしてビルドする

npm run buildでビルドすればOKです。
nuxtをnuxt-tsに変更することだけ忘れないで下さい。

-   "build": "nuxt build",
+   "build": "nuxt-ts build",
 

総括

create-nuxt-appを使って、nuxt-tsでビルドするTypeScriptのテンプレを作ってみました。

create-nuxt-appが公式でTypeScriptに対応したらこの手順は不要になると思います。
ただ、JavaScriptからTypeScriptに移行するケースのコツを掴めると思うので、知識は無駄にならないと思っています😄