目次
- 背景
- 変更点
1. 背景
Nuxt2を業務で使用しています。年内にサポート切れするということでNuxt3に移行する必要がある為です。
2. 変更点
2.1 VuexはNuxt3本体に含まれていない
-
Vueの公式がpiniaを推奨してます
- Nuxtモジュールとして提供されています。
- 以下のライブラリが必要です。
- pinia
- @pinia/nuxt
- pinia-plugin-persist、Storeの永続化（最終メンテが2年前なのが気になる）
- useState
- Nuxt Bridge から useState が使えます。
pinia、vuex、useStateの比較記事はまた別で書こうと思います。
- Nuxt Bridge から useState が使えます。
2.2 axiosではなくFetch APIか、unjs/ohmyfetchの$fetchを使う形になる
Nuxt3でaxiosはなくなり、Fetch APIをつかうらしい
移行中で対応する時間がない場合は以下のようにすることで大丈夫だそうです。
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
vite: {
server: {
proxy: {
"/api/": {
target: "https://api.example.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
},
});
2.3 静的ファイルのディレクトリ名をstaticからpublicに変更
2.4 @nuxtjs/style-resources がnuxt3に対応していない
以下のように対応したら良いそうです。
nuxt2
export default defineNuxtConfig({
buildModules: ['@nuxtjs/style-resources'],
styleResources: {
scss: ['./assets/variables.scss'],
},
});
↓
nuxt3
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/scss/variables.scss";',
},
},
},
}
});
2.5 process.envから値が取得できない
nuxt2
console.log('ENV_NAME', process.env.ENV)
↓
nuxt3
console.log('ENV_NAME', useRuntimeConfig().public.ENV)
2.6 head プロパティ
headの上にappプロパティが必要です。(オブジェクトは重複排除のためのhidキーを持たなくなリます)。
nuxt2
export default {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}
↓
nuxt3
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: 'Meta description' }
]
}
}
})
2.7 nuxt.configでCommonJS構文を使えない
module.exportsやrequire、require.resolveのようなCommonJS構文を使わないようにしてください。これはすぐに非推奨となり、サポートされなくなります
2.8 components ディレクトリの自動インポート
components ディレクトリ内に書いた vue コンポーネントは、 import 文無しで使うことができます。
例えば、components/header/HeaderSearchButton.vue という名前のコンポーネントは、 インポート無しで <HeaderSearchButton>として使えます。
また、 components/header/SearchButton.vue という名前のコンポーネントも同じく、 <HeaderSearchButton> として使えます。
ディレクトリ名 + ファイル名 でコンポーネント名になりますが、ファイル名の先頭とディレクトリ名が重複する場合、重複する部分は打ち消されます。
2.9 Nuxt3だとページ遷移時にdocument.getElementByIdで要素取得できない
https://github.com/nuxt/framework/issues/3587
以下のようにすると良いそうです。
<template>
<div>
<h1 ref="myElement">Hello Nuxt3!</h1>
<!-- その他のコンテンツ -->
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
data() {
return {
myElement: ref(null)
}
},
mounted() {
if (this.myElement) {
this.myElement.style.color = 'red'
}
}
}
</script>
2.10 プラグインの書き方の変更
nuxtApp.provide を実行することでで、システムグローバルに $xxxxx という名前で使える関数を定義できます。
テンプレート内でも、script setup 内でも使えます。
export default defineNuxtPlugin((nuxtApp) => {
/**
* 金額をカンマ区切りに表示します。
* $addComma(1000) => 1,000
*/
nuxtApp.provide('addComma', function (val: number) {
if (val === 0) {
return '0'
}
if (!val) {
return ''
}
if (typeof val === 'string') {
val = Number(val)
}
return val.toLocaleString()
})
})