fix(docs): import BV3 with the client config

Author: messenjer

docs/.vuepress/PluginComponentReference/client/components/component-doc.vue

@@ -140,7 +140,7 @@ export default defineComponent({
       }, {})
     })
     const githubURL: ComputedRef<string> = computed(() => {
-      const name = component.name ?? ''
+      const name = component.name ?? component.__name ?? ''
       if (name.indexOf('{') !== -1) {
         // Example component (most likely an auto generated component)
         return ''
@@ -154,7 +154,7 @@ export default defineComponent({
     // component name kebab
 
     const componentName: ComputedRef<string> = computed(() => {
-      return hyphenate(component.name ?? '')
+      return hyphenate(component.name ?? component.__name ?? '')
     })
     const tag: ComputedRef<string> = computed(() => {
       return `<${componentName.value}>`

docs/.vuepress/client.ts

@@ -0,0 +1,20 @@
+import {defineClientConfig} from '@vuepress/client'
+import 'bootstrap/scss/bootstrap.scss'
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+import DocReference from './components/DocReference.vue'
+import ReferenceSection from './PluginComponentReference/client/components/reference-section'
+import {h} from 'vue'
+
+export default defineClientConfig({
+  async enhance({app, router, siteData}) {
+    if (!__VUEPRESS_SSR__) {
+      const {BootstrapVue3, BToastPlugin} = await import('../../dist/bootstrap-vue-3.es')
+      app.use(BootstrapVue3)
+      app.use(BToastPlugin)
+      app.component('doc-reference', DocReference)
+      app.component('ComponentReference', (props) => h(ReferenceSection, {}))
+    }
+  },
+  setup() {},
+  rootComponents: [],
+})

docs/.vuepress/clientAppEnhance.js

@@ -1,10 +1,10 @@
-import {defineUserConfig, viteBundler} from 'vuepress'
-import {componentReference} from './PluginComponentReference'
+import {viteBundler} from '@vuepress/bundler-vite'
+import {defineUserConfig} from '@vuepress/cli'
 import {defaultTheme} from '@vuepress/theme-default'
-import type {DefaultThemeOptions} from 'vuepress'
-const {searchPlugin} = require('@vuepress/plugin-search')
+import {searchPlugin} from '@vuepress/plugin-search'
+import {componentReference} from './PluginComponentReference'
 
-export default defineUserConfig<DefaultThemeOptions>({
+export default defineUserConfig({
   lang: 'en-US',
   base: '/bootstrap-vue-3/',
   title: 'BootstrapVue 3',
@@ -27,8 +27,7 @@ export default defineUserConfig<DefaultThemeOptions>({
     editLink: true,
     contributors: false,
     lastUpdated: true,
-    darkMode: false,
-    bundler: '@vuepress/bundler-webpack',
+    colorMode: 'light',
     themePlugins: {
       mediumZoom: false,
     },

docs/.vuepress/config.ts

@@ -11,8 +11,9 @@
     "bootstrap": "5.x.x"
   },
   "devDependencies": {
-    "@vuepress/plugin-search": "^2.0.0-beta.41",
+    "@vuepress/plugin-search": "^2.0.0-beta.48",
+    "@vuepress/plugin-register-components": "^2.0.0-beta.48",
     "bootstrap-vue-3": "file:../",
-    "vuepress": "^2.0.0-beta.41"
+    "vuepress": "^2.0.0-beta.48"
   }
 }