DEV Community

dala00
dala00

Posted on • Originally published at crieit.net

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

#nuxt #vue

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

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

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

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

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

 "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に移行した時と同じなのでおおよそは問題ないのではないかと思います）

Top comments (0)