DEV Community

dala00
dala00

Posted on • Originally published at crieit.net

2 2

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

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

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

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

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

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

    "nuxt": "^2.0.0",
Enter fullscreen mode Exit fullscreen mode

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

    "ts-loader": "4.5.0",
Enter fullscreen mode Exit fullscreen mode

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

yarn
Enter fullscreen mode Exit fullscreen mode

特に他に何も入れてなければこれで完了で、もう動くのではないかと思います。依存関係の問題が出て厄介な場合は、下記の記事で紹介されているように一旦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";
Enter fullscreen mode Exit fullscreen mode
import { Component, Vue, Prop } from "nuxt-property-decorator";
Enter fullscreen mode Exit fullscreen mode

typescript.jsの修正

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

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

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

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

Enter fullscreen mode Exit fullscreen mode

あとは

        rule.options.loaders.ts = tsLoader;
Enter fullscreen mode Exit fullscreen mode

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

        rule.options.loaders = rule.options.loaders || {};
        rule.options.loaders.ts = tsLoader;
Enter fullscreen mode Exit fullscreen mode

まとめ

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

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

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay