nuxt2→3の移行時にエラー解消 | 全国個人事業主支援協会

COLUMN コラム

nuxt2→3の移行時にエラー解消

nuxt2のサポートももう少しで終わるので、nuxt3への移行が必要なプロジェクトも増えていることでしょう。

簡単に移行できれば良いのですが、大きく変わっているので、画面ごとに移行が必要となっています。

今回は、移行時にエラーが出やすい箇所を記載していみました。

他にも色々なエラーが発生しますので、ある程度の期間をもって実施するべきかと思います。

ルートディレクトリの参照方法

nuxt2

<style scoped lang="scss">
@import '~assets/base.scss';

nuxt3

<style lang="scss" scoped>
@import '~/assets/base.scss';

ファイル名の_id→[_id]

nuxt2

ファイル名：_id.vue

nuxt3

ファイル名：[id].vue

:v-deepの使用方法

nuxt2

<style scoped> ::v-deep { .hoge { color: #fff; } } </style>

nuxt3

<style scoped> :deep(.hoge) { color: #fff; } </style>

imgタグの:srcに動的パスのバインド方法

nuxt2

import imageUrl1 from '~/assets/test1.svg';

import imageUrl2 from '~/assets/test2.svg';

const isTest = true;

<img:src="isTest ? requier('~/assets/test1.svg') : requier('~/assets/test2.svg')"/>

nuxt3

import imageUrl1 from '~/assets/test1.svg';

import imageUrl2 from '~/assets/test2.svg';

const isTest = true;

<img :src="isTest ? imageUrl1 : imageUrl2 "/>

※デプロイで、リソース内のimgを読み込むので、動的のimageはimportしておく必要がある。

　または、S３などimgサーバーにファイルを配置しておく。

ライブラリの選定

nuxt2で使用していた外部モジュールは、nuxt3にすることで使用できなくなるケースが多いので、ライブラリの選定・コード修正が発生するので、時間がかかる。

フリーランスのシステムエンジニアしてます。