ymmooot

Nuxt Bridge で useContext の型を失わない方法

問題

Nuxt Bridge は @nuxtjs/composition-api をそのまま使えるようにしてあるが、@nuxtjs/composition-api パッケージそのものは使われていない。実装をエイリアス指定している。nuxt/framework/packages/bridge/src/capi.ts#L46
　
そのため

import { useContext } from '@nuxtjs/composition-api';

はそのまま使えるが、VSCode は型情報を見つけられずに推論が効かなくなる。
#app や nuxt-edge からは useContext がエクスポートされておらず、インポート元をこれらに置き換えることはできない。

対策

そこで一度消した @nuxtjs/composition-api を devDependencies に再び追加し、以下のようにする。

tsconfig.json{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": [
      "@nuxtjs/composition-api/dist/runtime/"
    ]
  }  
}

とりあえずこれで OK。
いつまでも useContext を使ってないで、早く Nuxt3 の API に移行するのが良い。

ref

Share on