Nuxt.js2.9 + TypeScript + Vuexの開発環境構築まとめ - ゴリラでもわかるエンジニアライフ

お久しぶりです！

最近流行りのSSR フレームワークのNuxt.jsの勉強を始めるにあたり、Nuxt.jsとTypeScriptを使った開発環境を構築しようと思ったんですが、

予想以上にハマったので、備忘録として記録しておこうと思います

同じくハマったことがある人の助けになれば、幸いです！

前提
Nuxtについて
Nuxtの導入
TypeScriptの導入
おまけ
まとめ

Nuxt.js2.9 + TypeScript + Vuexの開発環境構築まとめ

前提

Nuxt.js 2.9
TypeScript

技術スタックとしては、上記の2つを使った開発環境で構築していきます

そして、外部パッケージとして、以下のパッケージを使用していきます(外部パッケージについては、おまけ程度に書いておくので、使いたい人のみ参考にしてください)

nuxt-property-decorator
vuex-typesafe-helper
axios

※ ESLintやPrettierに関しての導入方法は、今回除外していますので、ご了承ください orz

Nuxtについて

まず、Nuxtとは、Vue.jsを使ったサーバーサイドレンダリングを行うことができるフレームワークで、modeを切り替えることで、従来通りのSPA(シングルページアプリケーション)の開発も行うことができます

Nuxtの公式にも書いてある通り、Nuxtの開発を素早く始めるために、 create-nuxt-app が提供されています

しかし、現時点(2019年9月8日)では、Nuxt.js2.9系への対応がされておらず、TypeScriptの導入をするにもかなり至難の技なので、一つずつ設定ファイルを作っていく方が良いです!!

また、Nuxtの日本語ページの更新も、Nuxt2.9への対応がされていないため、英語版を参考にする方が良いでしょう

ja.nuxtjs.org

Nuxtの導入

まずは、Nuxtの新規プロジェクト用のディレクトリを作成して、移動します

$ mkdir <project-name>
$ cd <project-name>

そして、nuxt の起動方法を指定する package.json ファイルを作成します

touch package.json

以下が、package.jsonの中身です

{
  "name": "<project-name>",
  "scripts": {
    "dev": "nuxt"
  }
}

次に、npmを使って、nuxtをプロジェクトに追加していきます (yarnでも問題ありません)

npm install --save nuxt
# or
yarn add nuxt

Nuxtでは、pagesディレクトリ配下に、各ページを作成していくので、pagesディレクトリを作成します

mkdir pages

サンプルのページを追加しましょう！ pagesディレクトリ配下に、 index.vue を作成し、以下の内容を追加してください

<template>
  <h1>Hello world!</h1>
</template>

これで、Nuxtの導入が完了したので、正常に動くか確認しましょう！プロジェクト配下で、以下のコマンドを実行して、 localhost:3000 にアクセスして、 Hello world! が表示されれば成功です！

$ npm run dev

TypeScriptの導入

ここまでで、Nuxt.js 単体の実行環境は用意できました！

最近では、NuxtにType safeな作りをしたいということから、TypeScriptを導入するケースが増えてきたので、TypeScriptも導入していきましょう！

TypeScriptの導入には、こちらの英語版公式を参考にするのが良いでしょう！

typescript.nuxtjs.org

Nuxt2.9では、それまでのNuxtのバージョンで導入されていた @nuxt/typescript は、以下の3つのパッケージに分解されました

@ nuxt / typescript-build
@ nuxt / typescript-runtime
@ nuxt / types

しかし、それは日本語の公式へは、まだ対応されていないのが、英語版を参考しましょう！という理由です

では、以下の手順で、導入を進めていきましょう！

まず、@nuxt/typescript-buildパッケージをインストールしましょう！ NuxtのTypeScriptサポートは、主にNuxtモジュール@ nuxt / typescript-buildを通じて提供されています

yarn add --dev @nuxt/typescript-build
# or
npm install --save-dev @nuxt/typescript-build

インストールしたら、設定ファイルを追加していきましょう nuxt.config.js ファイルを作成して、以下の内容を追加してください

export default {
  buildModules: ['@nuxt/typescript-build']
}

次に、tsconfig.jsonファイルを作成して、以下を追加します

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

そして次に、Runtimeオプションもセットアップしていきましょう！以下をインストールしましょう！

yarn add @nuxt/typescript-runtime
# or
npm install @nuxt/typescript-runtime

インストールが完了したら、package.jsonを以下のように nuxt コマンドから nuxt-ts コマンドへ置き換えてください

"scripts": {
  "dev": "nuxt"  ->  "nuxt-ts",
  "build": "nuxt build"  ->  "nuxt-ts build",
  "generate": "nuxt generate"  ->  "nuxt-ts generate",
  "start": "nuxt start"  ->  "nuxt-ts start"
},

お疲れ様でした！これで、最低限のNuxt.js2.9 + Typescriptの環境構築は完了です！

まだまだ、Nuxtを開発していく中で、足りないディレクトリがあるので、それは適宜追加していってください！

おまけ

NuxtとTypeScriptで開発を行っていく中で、class-componentの作りで開発をしたくなったり、VuexでもTypescriptを導入して、 Type Safeにしたいという要望が出てくるので、以下のパッケージを使用すると実現することができます

nuxt-property-decorator

nuxt-property-decoratorのソースコードは、以下になります

github.com

導入方法は、以下になります

npm i -S nuxt-property-decorator
# or
yarn add nuxt-property-decorator

インストールしたら、nuxt.config.ts のbuildブロックの中に、以下を追加してください！

  build: {
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  }

また、tsconfig.jsの compilerOptions ブロックに、以下のオプションが追加されていなかったら追加してください

experimentalDecorators: true

以上で、nuxt-property-decorator の導入が完了です！

導入が完了すると、以下のように、Nuxtの構文がかけるようになります

import { Component, Inject, Model, Prop, Provide, Vue, Watch } from 'nuxt-property-decorator'

const s = Symbol('baz')

@Component({
  components: { comp }
})
export class MyComponent extends Vue {

  @Inject() foo!: string
  @Inject('bar') bar!: string
  @Inject(s) baz!: string

vuex-typesafe-helper

Vuexに対しての、型安全性の確保は、こちらのパッケージを使用していきます以下が、ソースコードです

github.com

インストール方法は、簡単です以下のどちらかのコマンドを実行するだけで、完了です！

npm install vuex-type-helper
# or
yarn add vuex-type-helper

導入サンプルは、githubに記載されているので、そちらを参考にするか、以下の記事が丁寧に書かれていたので、参考にしてみると良いと思います

qiita.com

axios

Nuxtで開発をしていく中で、必須と言われるパッケージ axios の導入方法も記載しておきます！

以下が、公式になります

axios.nuxtjs.org

以下のコマンドで、axiosをインストールしていきます

yarn add @nuxtjs/axios
# or
npm install @nuxtjs/axios

インストールが完了すると、nuxt.config.ts に以下を追加していきます

modulesブロックの中は、既に作成されているはずなので、 '@nuxtjs/axios', を追加するだけで、大丈夫です！そして、 axios ブロックは、まだないので、こちらは、新規に追加していきましょう！

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
  }
}

以上で、axiosの導入が完了しました！

これで、APIの呼び出しなどもできるようになりました

まとめ

どうでしょうか？

以上の手順で、Nuxt2.9とTypeScriptでの開発環境構築が完了しました！

Nuxtの開発方針は、まだまだ定まっていないので、どの方法がベストなのかは、今後の動向に注目していきたいですね！

いずれ、create-nuxt-app も vue-cli のように、選択するだけで、TypeScriptも簡単インストールできるようになるはずなので、その未来も気長に待ちましょう

スターやコメントいただければ、嬉しいです！

では、良いNuxtライフを