Nuxt3に移行に伴うポイント

Nuxt3

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からきちんと読み込めなかったりしたので注意です。

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>

以前はMetaとか使ってましたんでこのページでは一概には言えませんが、特に大規模なサイトになるとコードの見通しが良くなるようですね。

各ライブラリ・プラグインの対応

今回移行にあたって以下の変更を行いました。

  • vue-howler → howler.jsを直接使用
  • hooper → nuxt-swiper
  • Prism.js → highlight.js

Nuxtに限った話ではありませんが、アップデートに伴って色んなライブラリやプラグインが対応しないということはままあります。上記の詳細については別記事で書きたいと思います。

というわけでさくっとメモしましたが、上記以外にも移行を機に新たに取り入れたものがありますんで、それらも追々書いていきます。