Nuxt2からNuxt3へのバージョンアップ時のnuxtApp.provideの変更【備忘録】

2024年9月19日

今回はNuxt2からNuxt3へのバージョンアップ時、Nuxt2で今まで使っていたnuxtApp.provideの変更例についてご紹介していきます。

バージョンアップ後のNuxt.jsのバージョンは3.11.2となります。

Nuxt2からNuxt3へのバージョンアップ時のnuxtApp.provideの変更【備忘録】

例えば、pluginsのディレクトリ配下に次のtest.jsがあるとします。

・test.js

export default defineNuxtPlugin((nuxtApp) => {
  const tests = {
    status: {
      get: async () => {
        return await $fetch('/api/status');
      }
    }
  };

  // グローバルに`$tests`として提供
  nuxtApp.provide('tests', tests);
});

export default defineNuxtPlugin((nuxtApp) => {

const tests = {

status: {

get: async () => {

return await $fetch('/api/status');

}

};

// グローバルに`$tests`として提供

nuxtApp.provide('tests', tests);

});

今までのNuxt2では

await this.$tests.status
  .get()
  .then(r => {
  })
  .catch(e => {
    this.$nuxt.error(e)
  })

await this.$tests.status

.get()

.then(r => {

})

.catch(e => {

this.$nuxt.error(e)

})

のような表記でnuxtApp.provideで与えた関数を呼び出せたと思います。

Nuxt3では例えば次のように書きましょう。

import { showError } from '#app';
const { $tests } = useNuxtApp();
await $tests.status
  .get()
  .then(r => {
  })
  .catch(e => {
    showError(e);
  })