Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
69
Help us understand the problem. What is going on with this article?
@iwata@github

Nuxt.js 2.9でのTypeScript対応

More than 1 year has passed since last update.

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とを置き換える形ですね。

69
Help us understand the problem. What is going on with this article?
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
mohikanz
エンジニアのための雑談コミュニティ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
69
Help us understand the problem. What is going on with this article?