appディレクトリが必須になった

v2の頃はプロジェクト直下にcomponentsやpagesが並んでてゴチャゴチャしてたのが、v4では全部appフォルダ以下に移動しました。

v3の頃から同じ機能はあって、便利だなーと思う反面、ふとした瞬間に場所が分からなくなることがあって、結局v2のゴチャゴチャ方式のまま使っていました。

具体的には、app以下に以下のフォルダを配置します(デフォルトじゃ作られませんでした)。

• assets
• components
• composables
• layouts
• middleware
• pages
• plugins
• utils

だいたいv3の時と同じです。

確かv3の頃はassetsが使えなかったので、今回のv4で復活したっぽい。 実際に、例にあった通りCSSをここに置いて、ちゃんと動いてます。

utilsは初めてみました。 公式によると、公式コンポーザブル(useStateとか)を使う自作コンポーザブルと、ただのユーティリティ関数を分けるために新設されたみたいです。

後は次のファイルもapp以下に配置。

• app.vue
• app.config.ts
• error.vue

nuxt.config.tsの変更点

「nuxt.config.js」が完全に廃止されて、「nuxt.config.ts」が必須になったようです。

うちの環境では、次の項目がそのまま使えることを確認しました。

• app.baseURL
• plugins
• modules
• css
• vite.css.preprocessorOptions.scss.additionalData
• postcss
• experimental.defaults.nuxtLink.trailingSlash

モジュール設定として、「nuxt-gtag」の「gtag」や「@nuxtjs/sitemap」の「site」もそのままでした。

ただ、cssの指定がv3ではファイル名と形式をオブジェクトで指定していたんですが、

  css: [
    { src: '~/css/style.scss', lang: 'scss' },
  ],

v4ではこれだと動作せず、ファイル名単体にする必要がありました。

  css: [
    '~/assets/style.scss',
  ],

その他の変更点は公式を確認してください。

sassモジュール

v4でもそのまま使えるっぽいです。 インストール方法もv3と同じです。

npm install -D sass

外部ファイルが従来のcssフォルダ以下ではなく、assetsフォルダで指定されてるので、そこが変更点かも。 cssフォルダで動くかどうかはまだ調べていません。

さっきも書いた通り、nuxt.config.tsの「css」では、オブジェクトではなくファイル名だけに変更します。

  css: [
    '~/assets/style.scss',
  ],

拡張子で判断しているのか、これでちゃんとSCSSとして読んでくれていました。

SCSS用の変数を定義したファイルは、vite以下のadditionalDataで指定するのはv3と同じ。

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;',
        },
      },
    },
  },

あと、これはsassモジュール側の問題だと思いますが、「map-get」が非推奨になり、「map.get」を使うように変更しました。

これ以外の設定は公式を見てください。

nuxt-gtagモジュール

v4でもそのまま使えるっぽいです。 インストール方法もv3と同じです。

npx nuxt module add gtag

ただ、うちのパーミッションの問題なのか、モジュール側の問題なのか、nuxt.config.tsの自動更新がうまくいかなかったので、手動で追記する必要がありました。

追記内容もたぶん変更はないと思います。

  modules: [
    'nuxt-gtag',
  ],
  
  gtag: {
    id: 'G-XXXXXXXXX'
  },

他のオプションは公式を見てください。

@nuxtjs/sitemapモジュール

v4でもそのまま使えるっぽいです。 インストール方法もv3と同じです。

npx nuxi@latest module add sitemap

gtagモジュールと違い、こちらはnuxt.config.tsにちゃんと追記されました。

設定内容もたぶん変更はありません。

  modules: [
    '@nuxtjs/sitemap',
  ],
  
  site: {
    url: 'XXXXXXXXX',
  },

他のオプションは公式を見てください。

このモジュールは、Nuxt SEOというモジュールパックの一部みたいですが、v3の時に痛い目を見たのと、canonicalやOGP、構造化データは自前で用意してあるので、今回もたぶん使わないと思います。

trailingSlash関連

trailingSlashとは、URL末尾に「/」を付けるかどうかの設定です。 僕は付ける派なので、設定は必須です。

これもたぶんv3と同じで、設定が必要なのは以下の3箇所です。

• NuxtLinkのリンク先URL
• スラッシュなしURLへアクセスがあった際のリダイレクト
• useRoute()が返す値

まず、NuxtLinkのリンク先はv3と同じくnuxt.config.tsで設定できます。

  experimental: {
    defaults: {
      nuxtLink: {
        trailingSlash: 'append',
      }
    }
  },

v4でも、experimental設定は残ったままのようです。

リダイレクトはmiddlewareフォルダに以下の内容で「trailingSlash.global.ts」を作っておくと、自動インポートされてリダイレクトされます。

export default defineNuxtRouteMiddleware((to, from) => {
  if ( to.path.endsWith('/') ) return
  
  if ( /\.[a-zA-Z0-9]+$/.test(to.path) ) return
  
  return navigateTo(to.path.replace(/\/?$/, '/'), { redirectCode: 301 })
})

useRouteが返す値は、単純に現在アクセスしているURLのパスを返すだけなので、特に対策は不要です。

あとはsitemapモジュールが入っている場合は、nuxt.config.tsに以下の設定が必要です。

  site: {
    trailingSlash: true,
  },

まだ試していませんが、@nuxtjs/i18nモジュールでも、以下の設定が必要なはずです。

  i18n: {
    trailingSlash: true,
  },

感想とか

ほとんどv3のままでした。

Nuxt v4は、Windows 98 3rd Editionとして出ても良かったのに、無理やり新しいラベルを貼り付けられた、

まだまだテストは続けるので、何か新しい発見があれば追記しておきます。