新しいComposition API
@nuxtjs/composition-api から Nuxt 3 互換APIに移行することで、Nuxt 3への移行時の書き換えを減らすことができます。
ssrRef と shallowSsrRef
これら2つの関数は、内部で非常によく似た動作をする新しいコンポーザブルである useState に置き換えられました。
主な違いは、この状態のための*キー*を提供する必要があること（Nuxtは ssrRef と shallowSsrRef のために自動的に生成していました）、そして defineNuxtPlugin で定義された Nuxt 3 プラグインまたはコンポーネントインスタンス内でのみ呼び出すことができることです。（つまり、リクエスト間で状態が共有される危険性があるため、グローバル/アンビエントコンテキストで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() は、 nuxt2Context というキーも提供します。これは、通常Nuxt 2コンテキストからアクセスするのと同じプロパティをすべて含みますが、Nuxt 3には存在しないため、直接使用することは*お勧めしません*。代わりに、必要なものにアクセスする別の方法があるかどうかを確認してください。（ない場合は、機能リクエストまたはディスカッションを提起してください。）wrapProperty
このヘルパー関数はもう提供されていませんが、次のコードで置き換えることができます
const wrapProperty = (property, 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 を操作するには、 useNuxt2Meta を使用できます。これは Nuxt Bridge（Nuxt 3ではない）で動作し、 vue-meta 互換の方法でメタタグを操作できます。
<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 { ref, computed } 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 から明示的なインポートを使用することは可能です。