docs: use new vuepress plugin api

docs/src/.vuepress/config.ts

@@ -1,28 +1,28 @@
 import { config } from 'dotenv'
 import { resolve } from 'path'
 import { defineUserConfig } from 'vuepress'
-import type { DefaultThemeOptions, HeadConfig } from 'vuepress'
-
+import type { HeadConfig } from 'vuepress'
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import { viteBundler } from '@vuepress/bundler-vite'
 import WindiCSS from 'vite-plugin-windicss'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import { copyVueFlowPlugin } from './copy-plugin'
 import head from './head'
-import { useVueFlow } from '@braks/vue-flow'
-import { copyVueFlowPlugin } from "./copy-plugin";
+import Theme from './theme'
 
 config({ path: resolve(__dirname, '.env') })
 
-const { vueFlowVersion } = useVueFlow()
-export default defineUserConfig<DefaultThemeOptions>({
+export default defineUserConfig({
   title: 'Vue Flow',
   description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
   head: head as HeadConfig[],
 
   dest: resolve(__dirname, '../../dist'),
-  bundler: '@vuepress/bundler-vite',
-  bundlerConfig: {
+
+  bundler: viteBundler({
     viteOptions: {
       optimizeDeps: {
         exclude: ['@animxyz/vue3'],
@@ -51,86 +51,18 @@ export default defineUserConfig<DefaultThemeOptions>({
           compiler: 'vue3',
         }),
       ],
-    },
-  },
+    }
+  }),
 
   plugins: [
     [
-      '@vuepress/docsearch',
-      {
+      docsearchPlugin({
         appId: 'F7BJNSM4M5',
         apiKey: process.env.ALGOLIA_API_KEY,
         indexName: 'vueflow',
-      },
+      })
     ],
   ],
 
-  theme: resolve(__dirname, './theme/index.ts'),
-
-  themeConfig: {
-    repo: 'bcakmakoglu/vue-flow',
-    docsDir: 'docs/src/',
-    docsBranch: 'master',
-    lastUpdated: true,
-    contributors: true,
-    darkMode: true,
-    logo: '/favicons/android-chrome-512x512.png',
-    sidebar: {
-      '/guide/': [
-        {
-          text: 'Guide',
-          children: [
-            '/guide/',
-            '/guide/getting-started',
-            '/guide/theming',
-            '/guide/config',
-            '/guide/state',
-            '/guide/node',
-            '/guide/edge',
-            '/guide/composables',
-            { text: 'Utilities', children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'] },
-            {
-              text: 'Additional Components',
-              children: ['/guide/components/background', '/guide/components/minimap', '/guide/components/controls'],
-            },
-          ],
-        },
-      ],
-      '/examples/': [
-        {
-          text: 'Examples',
-          children: [
-            '/examples/',
-            '/examples/custom-node',
-            '/examples/edges',
-            '/examples/nesting',
-            '/examples/connectionline',
-            '/examples/updatable-edge',
-            '/examples/update-node',
-            '/examples/validation',
-            '/examples/save',
-            '/examples/dnd',
-            '/examples/empty',
-            '/examples/hidden',
-            '/examples/interaction',
-            '/examples/multi',
-            '/examples/horizontal',
-            '/examples/teleport',
-            '/examples/pinia',
-            '/examples/stress',
-          ],
-        },
-      ],
-    },
-    navbar: [
-      { text: `v${vueFlowVersion.value}`, link: '' },
-      { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
-      {
-        text: 'Examples',
-        link: '/examples/',
-        activeMatch: '^/examples/',
-      },
-      { text: 'TypeDocs', link: 'https://types.vueflow.dev/' },
-    ],
-  },
+  theme: Theme,
 })

docs/src/.vuepress/theme/clientAppEnhance.ts

@@ -1,6 +1,10 @@
-import { defineClientAppEnhance } from '@vuepress/client'
+import { defineClientConfig } from '@vuepress/client'
 import VueAnimXyz from '@animxyz/vue3'
 
-export default defineClientAppEnhance(({ app }) => {
-  app.use(VueAnimXyz)
+export default defineClientConfig({
+  enhance({ app, router, siteData }){
+    app.use(VueAnimXyz)
+  },
+  setup(){},
+  rootComponents: [],
 })

docs/src/.vuepress/theme/index.ts

@@ -1,12 +1,80 @@
 import { resolve } from 'path'
-import { Theme } from 'vuepress'
+import { defaultTheme, Theme } from 'vuepress'
 import { path } from '@vuepress/utils'
+import { useVueFlow } from '@braks/vue-flow'
+
+const { vueFlowVersion } = useVueFlow()
 
 export default {
   name: 'vuepress-theme-local',
-  extends: '@vuepress/theme-default',
+  extends: defaultTheme({
+    repo: 'bcakmakoglu/vue-flow',
+    docsDir: 'docs/src/',
+    docsBranch: 'master',
+    lastUpdated: true,
+    contributors: true,
+    darkMode: true,
+    logo: '/favicons/android-chrome-512x512.png',
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          children: [
+            '/guide/',
+            '/guide/getting-started',
+            '/guide/theming',
+            '/guide/config',
+            '/guide/state',
+            '/guide/node',
+            '/guide/edge',
+            '/guide/composables',
+            { text: 'Utilities', children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'] },
+            {
+              text: 'Additional Components',
+              children: ['/guide/components/background', '/guide/components/minimap', '/guide/components/controls'],
+            },
+          ],
+        },
+      ],
+      '/examples/': [
+        {
+          text: 'Examples',
+          children: [
+            '/examples/',
+            '/examples/custom-node',
+            '/examples/edges',
+            '/examples/nesting',
+            '/examples/connectionline',
+            '/examples/updatable-edge',
+            '/examples/update-node',
+            '/examples/validation',
+            '/examples/save',
+            '/examples/dnd',
+            '/examples/empty',
+            '/examples/hidden',
+            '/examples/interaction',
+            '/examples/multi',
+            '/examples/horizontal',
+            '/examples/teleport',
+            '/examples/pinia',
+            '/examples/stress',
+          ],
+        },
+      ],
+    },
+    navbar: [
+      { text: `v${vueFlowVersion.value}`, link: '' },
+      { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
+      {
+        text: 'Examples',
+        link: '/examples/',
+        activeMatch: '^/examples/',
+      },
+      { text: 'TypeDocs', link: 'https://types.vueflow.dev/' },
+    ],
+  }),
   layouts: {
     Layout: resolve(__dirname, 'layouts/default.vue'),
   },
-  clientAppEnhanceFiles: path.resolve(__dirname, './clientAppEnhance.ts'),
+  clientConfigFile: path.resolve(__dirname, './clientAppEnhance.ts'),
 } as Theme