fix: wip - added loadComponent method

docs/.vuepress/config.js

@@ -2,7 +2,10 @@ import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress'
 import { searchPlugin } from '@vuepress/plugin-search'
 import { viteBundler } from '@vuepress/bundler-vite'
-// import { vueExamplePlugin } from '../../src/index.js'
+import { vueExamplePlugin } from '../../src/index.js'
+import { fileURLToPath } from 'url'
+
+const examplesDir = fileURLToPath(new URL('../', import.meta.url)) + '.examples/'
 
 export default defineUserConfig({
   bundler: viteBundler(),
@@ -27,11 +30,9 @@ export default defineUserConfig({
     ]
   }),
   plugins: [
-    /*
     vueExamplePlugin({
-      componentsPath: '/docs/.examples/'
+      componentsPath: examplesDir
     }),
-    */
     searchPlugin({
       // options
     })

package.json

@@ -40,6 +40,7 @@
     "@vuepress/client": "2.0.0-rc.2",
     "@vuepress/plugin-search": "2.0.0-rc.41",
     "@vuepress/theme-default": "2.0.0-rc.41",
+    "@vuepress/utils": "2.0.0-rc.14",
     "eslint": "^8.57.0",
     "husky": "^8.0.3",
     "jest-raw-loader": "^1.0.1",

src/VueExample.vue

@@ -116,7 +116,7 @@
 
 <script>
 // SVG icons from // https://tablericons.com/
-import VueExampleHighlight from './VueExampleHighlight'
+import VueExampleHighlight from './VueExampleHighlight.vue'
 import { loadComponent, loadComponentAsString } from '@temp/loadComponent'
 import { markRaw } from 'vue'
 
@@ -165,14 +165,14 @@ export default {
   },
   created() {
     this.createComponent()
-    this.createSections()
+    // this.createSections()
     this.expanded = this.startExpanded
   },
   methods: {
-    createComponent() {
-      loadComponent(this.$props.file).then((component) => {
-        this.component = markRaw(component)
-      })
+    async createComponent() {
+      const res = await loadComponent(this.$props.file)
+
+      this.component = markRaw(res)
     },
     createSections() {
       loadComponentAsString(this.$props.file).then((contents) => {

src/index.js

@@ -7,25 +7,29 @@ export const vueExamplePlugin = (options) => {
     return {
       name: 'vue-example',
       async onPrepared(app) {
-        const opts = Object.assign({}, { componentsPath: '/docs/.vuepress/components' }, options)
+        const opts = Object.assign({}, { componentsPath: '' }, options)
 
         await app.writeTemp(
           'loadComponent.js',
           `
+            import { defineAsyncComponent } from 'vue';
+
             export function loadComponent (file) {
               try {
-                return import('${opts.componentsPath}' + file + '.vue').then(component => component.default);
+                return defineAsyncComponent(() => import(/* @vite-ignore */ '${opts.componentsPath}' + file + '.vue'));
               } catch (err) {
                 console.log(err);
               }
             }
             export function loadComponentAsString (file) {
+              /*
               try {
-                return import(/* webpackChunkName: "vue-examples-source" */ /* webpackMode: "lazy-once" */ '!raw-loader!${opts.componentsPath}' + file + '.vue')
-                .then(component => component.default);
+                return import('${opts.componentsPath}' + file + '.vue?raw')
               } catch (err) {
                 console.log(err);
               }
+              */
+              return 'test';
             }
           `
         )