vuepress2：如何获取 Vue 实例以便我可以使用第三方 vue 插件？

Question

我正在尝试使用 v-wave in VuePress 2（由 Vue 3 提供支持的 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 中运行？

非常感谢！

Answer 1

VuePress 中似乎没有配置 API 专门用于配置客户端应用程序。但是，插件 API 支持使用 clientAppRootComponentFiles property.

在客户端应用程序中配置根组件

比如这个配置指向.vuepress/RootComponent.vue:

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

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

在该组件文件中，使用组合 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>

demo

vuepress2：如何获取 Vue 实例以便我可以使用第三方 vue 插件？

vuepress2: how to get Vue instance so I can use third part vue plugin?

vue.js

vuejs3

vuepress