【プロフィールページ第15回】Nuxt3への移行 - ファイルの移行

プロフィールページを作成していきます。現在はNuxtのバージョンを2から3に移行しています。

技術スタックは下記の通りです。

今回はファイル移行していきます。

まずは単にファイルをコピーします。

components, assets, pagesのファイルは単に新しいv3のプロジェクトに移動します。

静的ファイル（ビルド等が不要で、そのままブラウザに返すファイル）について、Nuxt2ではstaticというファイルに格納していました。

Nuxt3ではpublicというファイル名に変更されています。

エントリーポイントはpages/index.vueに変更されるため、v3/app.vueは不要になるため削除します。

static/ディレクトリが削除されるため、pathを変更します。

- background-image: url('./static/hero.jpg');
+ background-image: url('./hero.jpg');

main.scssを各ページで読み込めるように設定します。

+ css: ['@/assets/scss/main.scss'],

以上までで、ついに画面が表示されるようになりました！