Help us understand the problem. What is going on with this article?

Nuxt.js 2.9でのTypeScript対応

Nuxt.js v2.9がリリースされました :tada:


TSの対応方法がそれまでと大きく変わっているので、以前の記事からの差分をのせていこうと思います。

オフィシャルの手順は以下になります。
Migration from Nuxt 2.8 | Nuxt TypeScript

Runtime

前述の移行手順とは順序が異なりますが、以前の記事でnuxt.config.tsを使っているため、Runtimeを先にインストールします。

$ yarn add @nuxt/typescript-runtime

NuxtのTS回りのNPMがいくつかに分解されました。
そのうち、@nuxt/typescript-runtimeはNode環境でTSを処理するためのものです。
具体的にはnuxt.configserverMiddlewaresでTSを使いたいときに必要になります。
ちなみに@nuxt/typescript-runtimeはProduction環境(NODE_ENV=production)でも必要になるので、dependenciesに追加する必要があります。
(nuxt-ts startで使用するので)

また一連のnuxtコマンドをnuxt-tsにしてあげる必要があります。

package.json
   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
+    "dev": "nuxt-ts",
+    "build": "nuxt-ts build",
+    "start": "nuxt-ts start",
+    "generate": "nuxt-ts generate",
   },

一周回ってv2.5に戻った感じですねw

@nuxt/typescript-buildのinstall

nuxt buildでTSを扱うためのものが@nuxt/typescript-buildです。
@nuxt/typescript@nuxt/typescript-buildに含まれるようになったので直接の依存は不要になります。

$ yarn remove @nuxt/typescript
$ yarn add -D @nuxt/typescript-build

@nuxt/typescript-buildnuxt buildなどで使うだけなのでRuntimeとは違い、devDependenciesとして追加します。
@nuxt/typescriptがRuntimeとに分離されて使いやすくなった感じですね。

またnuxt.config.ts内のConfigurationの型定義が@nuxt/typesからExportされるようになりました。

nuxt.config.ts
-import NuxtConfiguration from '@nuxt/config'
+import {Configuration} from '@nuxt/types'

-const nuxtConfig: NuxtConfiguration = {
+const nuxtConfig: Configuration = {
+  buildModules: ['@nuxt/typescript-build'],
...    
}

module.exports = nuxtConfig

またv2.9で追加されたbuildModules@nuxt/typescript-buildを指定しています。
buildModulesにすることでbuildのみ(generateも)で使用するmoduleをdevDependenciesに指定できるようになりました。

tsconfig.jsonの更新

tsconfig.jsontypes@nuxt/vue-appを指定していましたが、@nuxt/vue-appはなくなったので代わりに@nuxt/typesを使う必要があります。

tsconfig.json
     },
     "types": [
       "@types/node",
-      "@nuxt/vue-app"
+      "@nuxt/types"
     ]
   }
 }

@nuxt/types@nuxt/vue-app@nuxt/configとを置き換える形ですね。

mohikanz
エンジニアのための雑談コミュニティ
https://mohikanz.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした