Nuxt3をrc6からrc13へバージョンアップした話

はじめに

nuxt3の練習用リポジトリを作成し、その際に入れたのがNuxt3のrc6でした。
しかしrc6だといくつか問題があっためrc13にバージョンアップしました。
その際でのrc6の問題とrc13へバージョンアップした際の記述を自分のメモ用に作成しました。

rc6での問題

serverディレクトリにapiを作成し、アクセスした際に404になる

ドキュメントのServer Directory部分のようにAPIをたててみた際に、404になりました。
今回はAPIを試したかったので、ドキュメント通り、server/api配下にhello.tsを作成し、
下記コードを記載。

hello.ts

import { defineEventHandler } from 'h3';

export default defineEventHandler(() => 'Test get handler')

そしてhttp://localhost:3000/api/helloにアクセス。そしたら404。
うーんと思い、index.vueで試しに下記コードの通りuseFetchしてみた。

index.vue

const {data} = await useFetch('/api/hello/');
console.log(data.value);

結果console.logの値がnull値になる...
かつapiが404になる...具体的には下記エラーメッセージが。

[Vue Router warn]: No match found for location with path "/api/hello/"

ビルドされた.nuxt/types/nitro.d.tsをみた感じ、nitroで型定義などはできていそうだが、
エラーにもある通りrouterがうまくとっていなさそう。
ドキュメントのようにServer Routesをhelloで立ててみたりserver/api/hello.ts内で下記　コードのようにRouterを作成してみたが結果は同じ。

hello.ts

import { createRouter } from 'h3'
const router = createRouter()
router.get('/', () => 'Hello World')
export default router

rc6だとdefineEventHandlerが機能しないのかと思い、下記のようにコードを変更してみた。

hello.ts

export default (req, res) => 'Hello Nuxt3 from server!'

そして、http://localhost:3000/api/helloにアクセスしたところ表示はできたが、コンソールでパスが通っていないとエラーになるかつuseFetchは変わらずnull値。
これによってrc6でnitroによってserverディレクトリ内のapiを認識はできるが、パスの生成までができないのかもと思い、rc13にバージョンアップしたところ無事できた...
rc6でserverディレクトリは機能していなさそう。ドキュメントの記載や同じ事象の方がいなかったため少し時間はかかりましたが、できてよかった。

rc6→rc13での書き換えた点

nuxt.config.tsでのdefineNuxtConfigのimportを削除

defineNuxtConfigがrc6ではimportしないといけなかったが、rc13ではもう設定されているため
以下を削除。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

nuxt.config.tsでのpostcssの設定記述場所の変更

下記の通り変更。

nuxt.config.ts(rc6)

 export default defineNuxtConfig({
    build: {
   	postcss: {
   	    // 記述
   	},
       },
  })

nuxt.config.ts(rc13)

export default defineNuxtConfig({
      postcss: {
          // 記述
      },
})

tailwindの読み込み変更

簡潔になりましたね。

nuxt.config.ts(rc6)

postcss: {
  postcssOptions: {
  	plugins: {
  	    tailwindcss: {},
  	},
  },
},

nuxt.config.ts(rc13)

postcss: {
   plugins: { tailwindcss: {} }
},

感想

rcの段階なためどのバージョンで何ができるようになったのか、なにがまだできないのがわからないので詰まったらとりあえずバージョンアップですね...
あとはライブラリのコードを理解し何ができるのかをコードから読み解く読解力があればそんなに詰まらなかったかなと思うので、もっと読解力をつけていきたい。