[解決済み] vuepress2: Vueインスタンスを取得し、サードパーティのVueプラグインを使用できるようにするには？

質問

を使おうとしています。 ブイウェーブ で VuePress 2 (Vue3を搭載したVuePress)

ドキュメントにしたがって、試しに v-wave のローカルプラグインとして VuePress 2

.vuepress/config.js

const vwave = require('path/to/v-wave.js');

module.exports = {
    plugins: [
        (options, app) => {
            app.use(vwave); // the `app` is a instance of VuePress not Vue
            return {name: 'v-wave'};
        }
    ]
};

しかし、うまくいきませんでした。 app はVueのインスタンスではなく、VuePressのインスタンスです。

をインストールするにはどうすればよいですか？ v-wave をVuePress 2で動作させるには？

ありがとうございました。

解決方法は？

VuePressには、クライアントアプリを設定するための専用のconfig APIがないようです。しかし、Plugin APIでは、クライアントアプリのルートコンポーネントの設定は clientAppRootComponentFiles プロパティ .

例えば、このコンフィグが指し示すのは .vuepress/RootComponent.vue :

// .vuepress/config.js
const path = require('path')

module.exports = {
  plugins: [
    {
      name: 'root-component-setup',
      clientAppRootComponentFiles: path.resolve(__dirname, './RootComponent.vue'),
    }
  ]
}

そのコンポーネントファイルの中で、Composition APIの getCurrentInstance() にアクセスして、アプリケーションインスタンスの use() をグローバルにインストールします。 v-wave プラグインを使用します。

// .vuepress/RootComponent.vue
<template>
  <slot></slot>
</template>

<script>
import { getCurrentInstance, defineComponent } from 'vue'
import VWave from 'v-wave'

export default defineComponent({
  setup() {
    getCurrentInstance().appContext.app.use(VWave)
  }
})
</script>

デモ