Vue.jsからNuxt.jsに移行する方法を具体的に書きます

プログラミング等

どうもこじらです。

Vue.jsからNuxt.jsへのプロジェクトの移行が完了しました。

期間は1週間で終わりましたが、ファイル数も多く、いろいろな問題が発生したので作業時間は40時間ぐらいかかりました…。

今回は、移行する前に分からなかったことや、移行時の具体的な作業内容について書いていきます。

Nuxt.jsってどうやって導入するの?

  • Nuxt.jsってどうやって導入するの?
  • そもそもNuxt.jsって何?プラグイン?

Vue.jsしか知らない人はまずここから始まると思います。

しかし、世の中の記事はこれを理解している前提で話を進めやがります

これではNuxt.jsの実態がなかなか掴めませんよねぇ…。

 

Nuxt.jsを端的に表現するとしたら、Nuxt.jsはVue.js用のプロジェクトテンプレートって感じです。

Vue.jsのフレームワークみたいな?

 

そのため、「導入する」というより、「移行する」が正しいです。

楽に移行する方法は?

ここで、

「Vue.jsからNuxt.jsに移行する簡単な方法ってないの?」

という疑問が沸いてきますよね。

残念ながらそういった便利ツールはありません。

手動で

  1. Nuxt.jsをインストールしてプロジェクト作成
  2. ソース移行
  3. ソースを修正
  4. routerを構成

を行い、移行させていく必要があります。

 

面倒くさそうですよね。

ただ!この手間をかける価値は確実にあります!

 

(…いや、確実は盛ったかもな🤔)

具体的な作業内容

Vue.jsからNuxt.jsに移行する際の具体的な作業内容を書いていきます。

プロジェクト作成

npmの場合は

npx create-nuxt-app <project-name>

でNuxt.jsプロジェクトが作成されます。

実行すると質問攻めにあいますが、怖気づかず頑張って耐えてください。

 

その後は……まぁVue.jsをある程度理解している方が見ていると思うので初歩的な話は割愛します。

ソースを移動させる

Vue.js素使いの場合だと、vueファイルの配置場所はバラバラ、jsファイルもバラバラという状況になりがちですが、Nuxt.jsの場合は目的ごとの配置場所がきっちりと決まっています。

 

雰囲気だけ説明するとすると、以下のような対応表になります。

Vue.js Nuxt.js
main.js middleware, plugins配下
app.vue layouts/default.vue
css等スタイルファイル assets配下
view配下 pages配下
components配下 components配下
store/index.js store/index.js
router/index.js なし

という感じになります。routerが「なし」になっている部分に関しては後程説明します。

一番大変で難しいのは、main.jsに記述していた内容の移行ですね…。

 

この辺の詳細を知りたい場合は、下記のqiitaの記事を参考にしてもらえると良いと思います。

【Vue.js】vue-cliとNuxt.jsの比較まとめ - Qiita
Vue.jsのフレームワークとして、いろいろあるが、今回はvue-cliとNuxt.jsについて比較してみたいと思う。 ファイル構成や標準で用意されてるものが異なるので、整理用の記事となります。 フレームワークを移行したい時にみてい...

 

サーバ側で実行する処理部分を修正

Nuxt.jsを使用する場合はSSRとして使用するのが普通だと思います。

というか、その前提で書きますw

 

Vue.js素使いでSPAとして動かしている場合、すべてクライアント側で処理を行っていますよね。

そのソースを使って、そのままSSRとして動かそうとすると、

「documentがねぇ!」

「windowがねぇ!」

と怒られます。

理由はDOMを使ってHTML側にアクセスしようとしてるからですね。

 

これを直していく必要があります。

client-only

以下のようなHTMLにアクセスをしているコンポーネントがあるとします。

<DomDomAccessComponent />

これを

<client-only>
  <DomDomAccessComponent />
<client-only />

このようにclient-onlyタグで囲むと、このコンポーネントはクライアントのみで実行されます。

ちなみに、no-ssrというタグもありますが、こっちはclient-onlyの古いバージョンっぽいです。

 

厄介なのは、それではうまくいかないものも結構多いことです。。

その場合はプラグイン化させる必要があります。

やり方は公式にもありますし、私も過去記事で少し触れてるのである程度割愛します。

plugins
The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.
【Nuxt.js】Vue.jsから移行する際のvue-loading-templateの処理方法
どうも、Javaしか書けないこじらです。 先日、Vue.jsで開発をしている場合、OGP対策をするためにはただのSPAサイトとして運用することはできず、SSRを導入する必要があることが分かりました。 Nuxt.jsへの移行が終わ...

 

ちなみに、ソース上では

if (process.client) {
  // クライアントだけで処理
}
if (process.client) {
  // サーバだけで処理
}

というように書くだけで簡単に実現できます。

routerでの値の渡し方の見直し

router-linkで値を渡すとき、

  • params
  • query

の2パターンがありますよね。

Vue.js素使いの場合はこの辺が雑になりがちですが、Nuxt.jsだと実害が出てきます。

実害

まずですが、Nuxt.jsではrouter-linkで渡した値はpropsでは受け取れません。

以下のような記述方法に書き換える必要があります。

data () {
  return {
    id: this.$router.params,
  }
}

 

そして、一番の実害は動的ルートマッチングを使用したページに直接アクセスしたときに404になってしまうことです。

/user/:id

上記のようなルートに直接アクセスした場合ですね。

 

これもSSRに起因しています。

SSRの場合、サーバ側でHTMLを事前に生成しておきますが、動的ルートマッチング用のHTMLファイルは生成されないためです。

だってNuxt側も、「うーん、何ていうHTMLファイルを生成すればいいんだろう?」ってなりますもんね。

 

この対策方法は色々ありますが、paramsで渡していたものをqueryに書き換えるのがベストプラクティスかと思います。

/user/detail?id=123

みたいな形式ですね。

 

routerとpagesディレクトリ

Nuxt.jsではVue.js素使いの場合のroute/index.jsがありません。

pagesディレクトリに配置したファイルを見てNuxt.jsが自動でindex.jsを生成します。

 

最初は

「は?不便だなおい!どうにかしてくれよ!」

と思っていましたが、慣れると「これもアリだな🤔」と思えてきます。

 

index.vue、_idなどの名前を駆使してルーティングを作成していく訳ですが、この辺は都度調べていかないと難しいので、これも割愛します。

困ったタイミングで公式サイトを見てください。

 

ようこそNuxt.jsの世界へ

Vue.jsからNuxt.jsの移行は結構な手間ですが、やる価値は確実にあります。

Vue.jsの知識があれば、学習コストも低いです。

 

というか、Webアプリケーションを作成し、公開する予定の人は絶対にNuxt.jsで作るべきです。

SPAは作成が簡単でも、ホビー止まりです。

だって、OGP対策すらできないんですからねw

ページごとに動的にheadを定義できないのは支障が多すぎます。(支障が出ないとしたら作りが甘いんじゃないかとまで思う。)

 

まぁ、Nuxt.jsを使用しなくてもSSRは実現できるようですが、私程度の知識では無理でした。

私と同じ轍は踏んでほしくないので、公開する目的でVue.jsを使用している人は早めにNuxt.jsに切り替えてください。

本当面倒臭くなるのでw

この壁を乗り越えてモチベーションを続けられるならいいですが、折れたらもったいないですからね。

 

まぁ、今回はこんな感じで

OGPの設定方法も色々苦戦したので、そのうち記事にしていきます。

 

こじらでした

じゃ

関連記事

【Nuxt.js】Vue.jsから移行する際のvue-loading-templateの処理方法

【Nuxt.js】vuex-persistedstateがイケてなくてリロード時にgettersでnullになった話

コメント

タイトルとURLをコピーしました