新しい Composition API
@nuxtjs/composition-api から Nuxt 3 と互換性のある API へ移行することで、Nuxt 3 へ移行する際のリライトが少なくなります。
ssrRef と shallowSsrRef
これら 2 つの関数は、内部で非常に似た働きをする新しいコンポーザブル useState に置き換えられました。
主な違いは、この状態に「キー」を提供する必要があること（Nuxt は ssrRef と shallowSsrRef のために自動的に生成していました）、そして Nuxt 3 プラグイン（defineNuxtPlugin で定義されます）またはコンポーネントインスタンス内でしか呼び出せないことです。（つまり、リクエスト間で状態が共有される危険性があるため、グローバル/アンビエントなコンテキストで useState を使用することはできません）。
- import { ssrRef } from '@nuxtjs/composition-api'
- const ref1 = ssrRef('initialData')
- const ref2 = ssrRef(() => 'factory function')
+ const ref1 = useState('ref1-key', () => 'initialData')
+ const ref2 = useState('ref2-key', () => 'factory function')
// accessing the state
console.log(ref1.value)
状態がキー付けされているため、同じキーを使用している限り、複数の場所から同じ状態にアクセスできます。
このコンポーザブルの使用方法については、Nuxt 3 ドキュメントで詳しく読むことができます。
ssrPromise
この関数は削除されました。使用していた場合は、代替の実装を見つける必要があります。ssrPromise のユースケースがある場合は、ディスカッションを通じてお知らせください。
onGlobalSetup
この関数は削除されましたが、そのユースケースは defineNuxtPlugin 内で useNuxtApp または useState を使用することで満たせます。また、レイアウトの setup() 関数内で任意のカスタムコードを実行することもできます。
- import { onGlobalSetup } from '@nuxtjs/composition-api'
- export default () => {
- onGlobalSetup(() => {
+ export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.hook('vue:setup', () => {
// ...
})
- }
+ })
useStore
Vuex ストアインスタンスにアクセスするには、useNuxtApp().$store を使用できます。
- import { useStore } from '@nuxtjs/composition-api`
+ const { $store } = useNuxtApp()
useContext と withContext
useNuxtApp を使用して、注入されたヘルパーにアクセスできます。
- import { useContext } from '@nuxtjs/composition-api`
+ const { $axios } = useNuxtApp()
useNuxtApp() は、通常 Nuxt 2 コンテキストからアクセスするすべてのプロパティを含む nuxt2Context というキーも提供しますが、Nuxt 3 には存在しないため、直接使用することは推奨されません。代わりに、必要なものにアクセスする別の方法がないか確認してください。（ない場合は、機能リクエストまたはディスカッションを提起してください。）wrapProperty
このヘルパー関数は提供されなくなりましたが、以下のコードに置き換えることができます。
import { computed, getCurrentInstance } from 'vue'
const wrapProperty = (property: string, makeComputed = true) => () => {
const vm = getCurrentInstance().proxy
return makeComputed ? computed(() => vm[property]) : vm[property]
}
useAsync と useFetch
これらの 2 つのコンポーザブルは、Nuxt 3 ドキュメントに記載されている useLazyAsyncData および useLazyFetch に置き換えられます。以前の @nuxtjs/composition-api コンポーザブルと同様に、これらのコンポーザブルはクライアント側のルートナビゲーションをブロックしません（名前の「lazy」の部分の理由です）。
useFetch で行っていたかもしれません）。useLazyFetch は Nitro 用に設定されている必要があります。useAsync から新しいコンポーザブルへの移行
<script setup>
- import { useAsync } from '@nuxtjs/composition-api'
- const posts = useAsync(() => $fetch('/api/posts'))
+ const { data: posts } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts } = useLazyFetch('/api/posts')
</script>
useFetch から新しいコンポーザブルへの移行
<script setup>
- import { useFetch } from '@nuxtjs/composition-api'
- const posts = ref([])
- const { fetch } = useFetch(() => { posts.value = await $fetch('/api/posts') })
+ const { data: posts, refresh } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts, refresh } = useLazyFetch('/api/posts')
function updatePosts() {
- return fetch()
+ return refresh()
}
</script>
useMeta
vue-meta と連携するには、Nuxt Bridge (ただし Nuxt 3 では動作しません) で動作し、vue-meta 互換の方法でメタタグを操作できる useNuxt2Meta を使用できます。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useNuxt2Meta({
title: 'My Nuxt App',
})
</script>
算出プロパティや ref も渡すことができ、メタ値はリアクティブに更新されます。
<script setup>
const title = ref('my title')
useNuxt2Meta({
title,
})
title.value = 'new title'
</script>
useNuxt2Meta() と Options API の head() の両方を使用しないように注意してください。予期せぬ動作が発生する可能性があります。Nuxt Bridge は、useHead コンポーザブルでアクセスできる Nuxt 3 互換のメタ実装も提供します。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useHead({
title: 'My Nuxt App',
})
</script>
nuxt.config で明示的に有効にする必要があります。
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
},
})
この useHead コンポーザブルは、<head> を操作するために ( vue-meta ではなく) 内部で @unhead/vue を使用しています。そのため、ネイティブの Nuxt 2 の head() プロパティと useHead の両方を使用すると競合する可能性があるため、使用しないことをお勧めします。
このコンポーザブルの使用方法の詳細については、Nuxt 3 ドキュメントを参照してください。
明示的なインポート
Nuxt は、すべての自動インポートを #imports エイリアスで公開しており、必要に応じてインポートを明示的にするために使用できます。
<script setup lang="ts">
import { computed, ref } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
自動インポートの無効化
コンポーザブルとユーティリティの自動インポートを無効にしたい場合は、nuxt.config ファイルで imports.autoImport を false に設定できます。
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
これにより自動インポートは完全に無効になりますが、#imports からの明示的なインポートを使用することは引き続き可能です。