Using Dynamic Vue Component in VitePress

823 Views Asked by At

I am starting a vue 3 component library which uses a component with a dynamic template.

The dynamic template requires the use of vue/dist/vue.esm-bundler.js. The vue 3 component compiles using vite as long as the following alias fpr "vue" is included in the vite.config.ts file:

export default defineConfig({
  plugins: [vue()],
  define: {
    global: {},
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      'vue': 'vue/dist/vue.esm-bundler.js',
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
});

However, the same component is used in the vitepress documentation for this library and does not compile. I have added the same alias to the vitepress configuration file:

const path = require('path')
module.exports = {
  title: '',
  description: '',
  themeConfig: {
    repo: '',
    sidebar: [
      {
        text: 'Introduction',
        items: [
          { text: 'What is My Lib?', link: '/' },
        ],
      }, {
        text: 'Components',
        items: [
          { text: 'B-Markdown', link: '/components/b-markdown/desc' },
        ],
      }
    ],
  },
  vite: {
    resolve: {
      alias: {
        'vue': 'vue/dist/vue.esm-bundler.js'
      }
    },
  }
}

I also tried switching the alias to use

   'vue': path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),

When compiling the vitepress documentation using either of these vue alias lines, I obtain the following error:

runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous content="Test content." imgFolder="" class="toastui-editor-contents"  ... > 
  at <VRuntimeTemplate class="toastui-editor-contents" style= {max-width: '900px', margin: 'auto'} template="<div><p>Test content.</p>\n</div>" > 
  at <BMarkdown content="Test content." > 
  at <Basic> 
  at <DemoContainer> 
  at <Components/bMarkdown/desc.md> 
  at <VitePressContent class="vp-doc _components_b-markdown_desc" > 
  at <VPDoc key=3 > 
  at <VPContent> 
  at <Layout> 
  at <VitePressApp>

Is this a problem with vitepress not registering the alias?

0

There are 0 best solutions below