Nuxt.jsのプロジェクトをNuxt.js2にバージョンアップしてみた

昨日ついにNuxt2がリリースされたため、早速既存のプロジェクトを2にアップグレードしてみました。今回はnuxt-edgeからのアップグレードではなく、単純にNuxt1からのアップグレードになります。

プロジェクトのベース部分は下記の記事で構築したものになります。ExpressとTypeScriptが混ざっています。

Nuxt.js+ExpressのプロジェクトをTypeScript化する

Nuxt.jsを2にバージョンアップする

package.jsonを調整し、バージョン２を入れます。

    "nuxt": "^2.0.0",

あと合わせてts-loaderも3から4に変えておきます。

    "ts-loader": "4.5.0",

あとはインストールします。

yarn

特に他に何も入れてなければこれで完了で、もう動くのではないかと思います。依存関係の問題が出て厄介な場合は、下記の記事で紹介されているように一旦Nuxtと@nuxtjs系のパッケージを削除して入れ直す方がわかりやすいと思います。

【実録】Nuxt.jsの既存プロジェクトを一足早くNuxt v2( nuxt-edge )へとアップグレードする方法

僕の場合他にTypeScriptが入っているのでそのあたりも見ていきます。

TypeScriptを入れているときのための対応

vue-property-decoratorを使わないようにする

なぜか僕のプログラムではnuxt-property-decoratorとvue-property-decoratorが混在していました。どうもNuxtのv2にアップグレードするとvue-property-decoratorが見つからないとなぜかエラーが出るようになったので統一しました。

import { Component, Vue } from "nuxt-property-decorator";
import { Prop } from "vue-property-decorator";

import { Component, Vue, Prop } from "nuxt-property-decorator";

typescript.jsの修正

modules/typescript.jsがエラーになるため修正します。（どこから得た対処方法かは忘れました）

    const tsLoader = {
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    };

元々上記のような箇所があるのですが、これを下記に修正します。

    const tsLoader = {
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true
      },
      exclude: [/vendor/, /\.nuxt/]
    };

あとは

        rule.options.loaders.ts = tsLoader;

こういった記述がある箇所もエラーになるので、下記のように修正します。

        rule.options.loaders = rule.options.loaders || {};
        rule.options.loaders.ts = tsLoader;

まとめ

とりあえず僕がアプリケーションをdev, build, startできたところまでをまとめてみました。プロジェクトによっては他にもいろいろエラーが出てくると思いますので、適宜エラーを見て修正していく必要があると思います。

まだやってみたばかりで不備などあるかもしれませんので参考程度として見ていただければと思います。（ただほとんどnuxt-edgeに移行した時と同じなのでおおよそは問題ないのではないかと思います）