【Nuxt3】useNuxtAppの参照先「#app」って一体何者なの？

https://2.bp.blogspot.com/-iaYGOAWkxR4/Wge7zxdZp7I/AAAAAAABIDo/SLNOHHGO_ts0nhyFLhGVsCbHePrAjDhYACLcBGAs/s800/hakken_kyouryu.png

【前提】

Nuxt2からNuxt3へのマイグレーションに関する記事を拝見するたびに下記のような記述に出会うことがあります。

code:testCompmonent.vue

import { useNuxtApp } from '#app'

特にプラグインやミドルウェアに関する情報を参照すると出てくることが多いです。しかし、これらのコードがなぜ必要なのか、あまり詳細に説明されないまま暗黙的に利用されていることが見受けられたので調査してみました。

【結論】

useNuxtAppはクライアントサイドおよびサーバーサイドで利用できるNuxtの共有ランタイムコンテキストにアクセスするためのコンポーザブルのことです。コンポーザブルとはVueのComposition API越しに状態を持つロジックを呼び出すための関数です。

実装を覗いてみるとNuxtのインスタンスを返していることがわかります。またこちらのエラーメッセージから、プラグイン、ミドルウェア、hook、<script setup>からのみ参照可能であることがわかるため、プラグインやミドルウェアに関する情報を参照すると出てくることが多いことも頷けます。

ここではNuxtのインスタンス(状態を持つロジック)の参照先であることがわかってさえいれば、あとは公式ドキュメントをすることでどのようなプロパティが入っているかがスムーズに理解できそうです。

さて、useNuxtAppですがTypeScriptで記述する場合は明示的にimportして利用しなければいけません。上記の実装を見てのとおりですが、

code:testComponent.vue

import { useNuxtApp } from 'nuxt/app'

と記載することで参照できます。つまり#appはTypeScriptのpathsによるエイリアスです。ということは、どこかにNuxt用のtsconfig.jsonが存在しているはずです。では、そのtsconfig.jsonはどこにあるのでしょう？

Nuxt3から導入されたNuxt CLIであるnuxiを活用します。実装はこちらです。nuxiはstatic siteのプロジェクトテンプレートの生成や、アプリケーションのビルドを実施などができますが、今回はprepareコマンドを利用します。

prepareコマンドでは.nuxtディレクトリを作成し、型情報およびクライアントサイドおよびサーバーサイドのtsconfigを用意することができます。.nuxt/tsconfig.jsonはクライアントサイドの設定なので、過去にNuxtプロジェクトに用意したtsconfigの継承元として利用することで、#appが利用できます。

擬似コードですが、#appの参照先は以下のようになっています。

code:.nuxt/tsconfig.json

"paths":{

(途中略)

"#app": [

"プロジェクトのパス/node_modules/nuxt/dist/app"

]

}

注意点はextendsを使って設定を継承する場合、継承先であるtsconfig.jsonでpathsを定義した場合は、継承先のpathsでオーバーライドしてしまうため、そのような場合は.nuxt/tsconfig.jsonのpathsを継承先のpathsに追記することが必要です。

【余談】

同様の問題に直面したissueがあったので共有しておきます。Nuxt2からNuxt3へのマイグレーション、大変です。。。