Nuxt 2.8 から 2.9 へのマイグレーションメモ

TypeScript Vue.js Nuxt.js

Nuxt TypeScript というページができていました。 Nuxt 2.8 から 2.9 のマイグレーション手順が書いてあるのですがメモを残します。

typescript.nuxtjs.org

元環境

  • Nuxt 2.8
  • TypeScript (nuxt.config.ts)

を使用している環境

きちんと読めば問題無いのですが、移行手順書の 5. TypeScript Runtime (optional) を無視すると nuxt.config.js が見つからないため、デフォルトの設定で動きます。

マイグレーション手順

  • パッケージ更新
npm uninstall @nuxt/typescript
npm i nuxt
npm i -D @nuxt/typescript-build
npm i @nuxt/typescript-runtime
  • npm script修正

nuxt を nuxt-ts に変更

  • 型定義の読み込み修正
import { Context } from '@nuxt/vue-app'; // nuxt 2.8
import { Context } from '@nuxt/types';  // nuxt 2.9
import { ErrorParams } from '@nuxt/vue-app';  // nuxt 2.8
import { NuxtError } from '@nuxt/types/app';  / nuxt 2.9
import NuxtConfiguration from '@nuxt/config';  // nuxt 2.8
import { Configuration as NuxtConfiguration } from '@nuxt/types';  // nuxt 2.9
  • tsconfig.js の修正
"types": ["@types/node", "@types/jest", "@nuxt/vue-app"]  // nuxt 2.8
"types": ["@types/node", "@types/jest", "@nuxt/types"]  // nuxt 2.9
  • extract-css-chunks-webpack-plugin の設定修正

css の order ででるWARNINGを消している場合オプションが変更されています。

https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/v4.6.0/src/index.js#L534

options.orderWarning = false;  // nuxt 2.8
options.ignoreOrder = true;  // nuxt 2.9