Nuxt3に移行に伴うポイント

Nuxt3

2023年1月22日

Nuxt3へ移行

昨年安定版が出たのを機にNuxt3へ移行作業を開始しました。移行するにあたってポイントかなと思ったところをメモしておきます。

useFetchの利用

Nuxt2ではデータの取得にAxiosを使っていて、特にSSG対応のためにnuxt.config.jsのgenerateの所に諸々書いてましたが、今回はその方法から変わっているようですね。基本useFetchを使うとのこと。うちのサイトでは引き続きNewtを利用しているため、プラグインの単一記事取得部分は以下の様に書きました。

async getArticle<T>(appUid: string, modelUid: string, slug: string) {
  const $config = useRuntimeConfig()
  const { data, error } = await useFetch<Contents<T>>(
    'https://' + $config.spaceUid + '.cdn.newt.so/v1/' + `${appUid}/${modelUid}`,
    {
      key: `${appUid}-${modelUid}-${slug}`,
      headers: {
        Authorization: `Bearer ${$config.token}`,
      },
      params: {
        depth: 2,
        limit: 1,
        slug,
      },
    },
  )
  if (error.value) {
    return null
  }
  return (data.value) ? data.value.items[0] : null
}

useRuntimeConfigというのが出来てたりしてますね。また、以前のrcではデフォルトでキャッシュが効いててurlとコードの行数をkeyにキャッシュが作られるとのことでしたので、keyをきちんと指定しないと逆にキャッシュが悪さをするケースがありましたが、現在ではイニシャルキャッシュはデフォルトで無効となっているようで、keyを何かしら指定しておかないとSSG時にpayloadからきちんと読み込めなかったりしたので注意です。

※上のコードは一部のQueryがどうにもうまくいかなかったんで、最終的には結局使用せず公式のやり方でやってます。そのあたりはまた記事にします。

script setup

しかしながら、もっとも書き方が変わったのはやはりOption APIからComposition APIへの変更ですね。

例えばWorksのページは、以前はこんな感じでした。

<script>
import Meta from '~/mixins/meta'

export default {
  mixins: [Meta],
  async asyncData({ $config, $newtcms }) {
    const data = await $newtcms.getArticles($config, 'works', 'work')
    return { contents: data }
  },
  data() {
    return {
      meta: {
        title: 'Works',
        description: 'ここでは吹奏楽アレンジを公開しています。一部「Piascore」にて販売中です。',
        path: '/works',
        ogImage: 'https://www.ateliernonta.com/images/works-min.png'
      }
    }
  }
}
</script>

これがNuxt3では以下のような感じに。

<script setup>
const { $newtcms } = useNuxtApp()
const contents = await $newtcms.getArticles('works', 'work')
const title = 'Works'
const description = 'ここでは吹奏楽アレンジを公開しています。一部のスコアは「Piascore」にて販売中です。'

useHead({
  title,
  meta: [
    { name: 'description', content: description },
    { property: 'og:title', content: title },
    { property: 'og:url', content: 'https://www.ateliernonta.com/works' },
    { property: 'og:description', content: description },
    { property: 'og:image', content: 'https://www.ateliernonta.com/images/works-min.png' },
  ],
})
</script>