Zenn
💨

create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築する

2021/01/04に公開
JavaScript
Node.js
Nuxt
Nuxt
TypeScript
tech

まえがき

注意

本記事はQiitaにて執筆したものの複製です。
個人的に書いたものについては順次Zennに移行をすすめていきます。

概要

create-nuxt-app コマンドを使用してTS+Nuxtプロジェクトを作成しようとしたところ、いつの間にか仕様が変わっていてちょっと感動したので書いてみることにしました。

なお、本記事内ではNuxtのmiddlewareModuleを使ってAPIサーバーを構築することを前提に進めるているため、SSRになっております。
SPAの場合でもほぼ変わりはないかと思いますが、予めご留意ください。

プロジェクトの開始

yarnを使っているとcliで対話式にプロジェクトが始められるようになっています。
npmでもバージョンが5.2以上ならnpxコマンドでも上記同様対話式にプロジェクトを開始することが可能です。

【 yarn 】

$ yarn create nuxt-app {project-name}

【 npx 】

$ npx create-nuxt-app {project-name}

最近このNuxt界隈では、過去に Typescriptと相性が悪い と言われていたことを根に持っているかのように活発にTS向けのアップデートが行われており、
気づけばこのプロジェクトの開始でもフレームワークを Javascript か Typescript か選択できるようになったようです。

また、今回API機能を作りますので、Deployment targetをHosting Node.jsにしてください。
私が実行した際の対話の実行結果は以下です。
実際にやってみていただくとわかりますが、設問ないの選択可能項目も、そもそも設問自体も減ったような印象を受けました。

? Project name: {project name}
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: Semantic Pull Requests

ファイルの追記・修正

少し前まで（おそらく4月段階）まではここからTypescriptを使用するための準備が必要でした。
しかしこれまで必要だった加筆修正がいつのまにか最初から組み込まれたようで、具体的には以下の設定が不要になりました。

- Library
  - @nuxt/typescript-buildがバンドルされたのでインストール不要
  - @nuxtjs/eslint-config-typescriptもバンドルされましたのでインストール不要
  - @nuxt/typescript-runtime もバンドルされましたのでインストール不要
- nuxt.config.json
  - buildModule内、 `'@nuxt/typescript-build'`の記述が不要（最初から書いてある）
- tsconfig.json
  - デフォルトで準備されてます
- .eslintrc.js
  - 以前はTS用に書き換える必要がありましたが、デフォルトで @nuxtjs/eslint-config-typescript が記述されており、設定が反映済みでしたので修正不要

ただし、package.json内のscript項目で使用されている nuxt-ts について、デフォルトではグローバルにインストールされていることが前提になってしまっています。

もし yarn dev で nuxt-ts がないというようなエラーが出た際には以下のように package.jsonないのscriptを書き換えてください。

"script":{
  "dev": "npx nuxt-ts",
  "build": "npx nuxt-ts build",
  "start": "npx nuxt-ts start",
  "generate": "npx nuxt-ts generate",
}

それぞれ接頭に npx コマンドを追記するだけです。

不足ライブラリの追加

開発環境において不足しているライブラリを追加しましょう。

$ yarn add -E -D regenerator-runtime

(もしかするとなくても動くかもしれません。私はpugで書いているので不足しただけかも)

ソースフォルダを整理する

対話式でプロジェクト作成した場合、何がソースフォルダなのかもわからないですし、
APIサーバーを実装するにも後からわかりにくくなってしまうので、
一般的なフォルダ構成に修正したいと思います。

まず、プロジェクトルートに src ディレクトリを、さらにその中に api(API server) フォルダを作成しましょう。
続いて src ディレクトリ配下に以下のフォルダを移動します。

- assets
- components
- layouts
- middleware
- node_modules
- pages
- plugins
- static
- store

ワンライナーで移動させたい方は以下のコマンドを使ってください。

mv assets components layouts pages plugins static store middleware src/

config類の修正

nuxt.config.js に以下を追記します。

module.exports = {
  srcDir: 'src/' // <-これを追記
}

続いて vue-shim.d.ts ファイルをsrc直下に作成し、以下を記述してください。

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

この vue-shim.d.ts はtsでvueを扱う際、vueファイルがそのままではimportできないため必要なファイルです。
また、vueのファイル位置も変わっているためtsconfig.jsonに追記・設定を行いましょう。

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [ "ESNext", "ESNext.AsyncIterable", "DOM" ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [ "./src/*" ],
      "@/*": [ "./src/*" ]
    },
    "types": [ "@types/node", "@nuxt/types" ]
  },
  "files": [ "src/vue-shim.d.ts" ], //← これを追記
  "include": [ "./src/**/**/*.ts", "./src/**/**/*.vue" ]
}

不要なファイル類の削除

CLIでプロジェクトを作成すると、丁寧に全フォルダに対してREADMEをつけてくれています。
ただ読む人は皆無だと思いますので、思い切ってリムってしまいましょう。

find ./src -name "*.md"|xargs rm

src配下に存在しているREADMEの根絶やしにします。

起動

ここまでできたらいったん起動してみましょう。
yarn devするだけです、そしてブラウザで localhost:3000 にアクセスしてみましょう。

Discussion