Nuxt3自分用メモ

ついにNuxt3が正式リリースされたとのことで初めて触ってみた結果つまずいた所のメモ

middleware

• 全体適用するmiddleware
  • ファイル名を *.global.ts のようにすることで全体に適用される
    • middleware/auth.ts -> middleware/auth.global.ts
  • globalなmiddlewareを一部ページでは除外したい
    • 設定では無理そうなので以下のようにmiddleware側で除外するコードを書く
      middleware/auth.global.ts

       export default defineNuxtRouteMiddleware((to, from) => {
         if (to.path === '/login') {
           return
         }
         // 〜略〜
      

• component上で definePageMeta({ middleware: ['foobar'] }) しても効かない
  • PageComponent(/pages/*.vue)上で読まないと有効にならない

plugin

• 一部環境でのみ有効にしたいpluginがあるがauto importは無効にしたくない
  • auto importされるのはplugins直下のみなので以下のようにディレクトリを切ることで対応できる

  ├── plugins
  │   ├── foo.ts      # 直下はauto import
  │   ├── option
  │   │   ├── msw.ts # localでのみmswを有効にしたい
  

  nuxt.config.ts

  export default defineNuxtConfig({
    plugins:
      process.env.ENV === 'local'
        ? ['@/plugins/option/msw']
        : [],
    // ~略~
  })
  

template

• 動的に画像のURLを設定したい場合、以前は以下のように書いていたがエラーに

  <img :src="require(`~/assets/foo_${bar}.png`)"/ >
  

  • viteではrequireが使えないとのことで以下のように

    <template>
    <img :src="getImageUrl(`foo_${bar}.png`)"/ >
    </template>
    <script setup lang="ts">
    function getImageUrl(f: string) {
      // @や~のようなaliasは使えない
      return new URL(`../assets/${f}`, import.meta.url).href
    }
    </script>
    

    • 参考: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

バグ?

以下のようなコードで isActive:false (空文字) となったタイミングでエラー

useHead({
  bodyAttrs: {
    class: computed(() => {return isActive.value ? 'active': ''})
  },
})

エラー内容

Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

適当な文字列を設定することで回避可能

useHead({
 bodyAttrs: {
   class: computed(() => {return isActive.value ? 'active': 'empty'})
  },
})

throw createError({ ..., fatal: true }) してもエラーページが表示されない

• showErrorで回避
  • 参考: https://github.com/nuxt/nuxt/issues/15432

困ったら

• Discussionsで語られている事が多いので一読してみるといいかも