Nuxt3のsetup内ではthisが参照できない

Nuxt3のsetup内ではthisが参照できません。

<script setup lang="ts">
  console.log(this)
</script>

<!-- console -->
undefined

その代わりに、useNuxtApp()を使用してNuxtインスタンスにアクセスします。

<script setup lang="ts">
  const nuxtApp = useNuxtApp()
  console.log(nuxtApp)
</script>

<!-- console -->
callHook: ƒ ()
globalName: "nuxt"
hook: ƒ ()
hooks: Hookable {_hooks: {…}, _deprecatedHooks: {…}, hook: ƒ, callHook: ƒ, callHookWith: ƒ}
isHydrating: false
payload: Proxy {data: {…}, state: {…}, _errors: {…}, serverRendered: true, config: {…}}
provide: (name, value) => {…}
vueApp: {_uid: 0, _component: {…}, _props: null, _container: div#__nuxt, _context: {…}, …}
$config: (...)
$router: (...)
...

useNuxtApp()とは

Nuxtインスタンスにアクセスするための関数です。Nuxt2のコンテキストと同等の扱いです。

コンポーザブル、コンポーネント、プラグイン内のランタイムアプリコンテキストにアクセスできます。useNuxtApp（サーバーサイド）は、setup、Nuxtプラグインまたはライフサイクル Hooks内部でのみ機能します。

引用: Nuxt 3 - NuxtApp

useNuxtApp()を使用すればprovideで登録した値を呼び出すことができます。

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Prints "Hello name!"

provideとは

provideはコンポーネントのインスタンスに任意の値を設定できるVue3の機能です。

Vue3では、provideで登録した値はinjectを使用して呼び出します。

Nuxt3の場合は、

• useNuxtApp().provide('呼出キー', <値 or 関数 or クラス>)で登録し、
• useNuxtApp().$<呼出キー>で参照します。

provideをプラグインファイルで使用する際の書き方はこの記事が参考になります。

Nuxt3の新しい機能 - Zenn

provideでページを跨いだ値の参照

provideを使用してNuxtインスタンスに登録すれば、ページを跨いだ値の参照も可能です。

pages/index.vue

<!-- pages/index.vue -->
<script setup lang="ts">
  // Nuxtインスタンスに登録
  useNuxtApp().provide('hoge', 'Hello')
</script>

<!-- pages/test.vue -->
<script setup lang="ts">
  // Nuxtインスタンスから呼び出し
  console.log(useNuxtApp().$hoge)
</script>

<!-- console -->
Hello

Nuxt2ではinject関数を使用して上記機能を実現していました。

Nuxt2のinjectで登録したクラスをNuxt3で参照する

例えばECサイトのShopifyを扱うnuxt-shopifyモジュールは、Nuxt2のinjectを使用し、インスタンスにクラスを登録しています。

node_modules/nuxt-shopify/lib/plugin.js

// Inject shopify to the context as $shopify
export default (ctx, inject) => {
  ctx.$shopify = client;
  inject('shopify', client);
});

Nuxt2のinject参照方法

injectを使用して登録したクラスは、Nuxtコンテキストやthisからそのクラスを参照できます。

asyncData

// Nuxtコンテキストから参照
async asyncData({ $shopify, params }) {
  const product = await $shopify.product.fetch(params.id);
  return { product };
}

methods/ created/ mounted/ etc

// thisから参照
methods: {
  async fetchProduct(productId) {
    this.product = await this.$shopify.product.fetch(productId);
  }
}

引用: Components - Nuxt Shopify

Nuxt3のinject参照方法

Nuxt3ではuseNuxtApp()を使用してinjectで登録したクラス関数にアクセスします。

<script setup lang="ts">
  const nuxtApp = useNuxtApp()
  const products = await nuxtApp.$shopify.product.fetchAll()
</script>