Runtime compilation in vitepress

[dCastanho]

Hello all.

I'm trying to get runtime compilation to work so that I can dynamically show components obtained from a backend CMS (public resources are compiled statically, but some contents require specific permissions and thus are dynamically handled).

I am struggling with getting the component to render. The dynamic component I have is specified as follows:

const dynamicComponent = computed(() => {
        return markRaw(defineComponent({
            template: rendered.value
        }))
});

And in the template as:

 <component :is="dynamicComponent" v-if="dynamicComponent"></component>

When I tried this, I got a warning from vue, indicating me to use the following alias in my config (which I added to the vite object of the vitepress config) because the build of vue I'm using did not allow for dynamic compilation:

  resolve: {
      alias: {
          vue: 'vue/dist/vue.esm-bundler.js'
      }
  }

It works in dev mode, but fails during the build, with the error:

build error:
[vite:load-fallback] Could not load vue/dist/vue.esm-bundler.js/server-renderer (imported by file.md): ENOENT: no such file or directory, open 'vue/dist/vue.esm-bundler.js/server-renderer'

After some research I found that most people had success by importing the vue plugin. And so I did just that (installing the npm depency @vitejs/plugin-vue):

plugins:[ vue() ]

However, after that, when I try to run dev or build it fails with the error:

[vitepress] Internal server error: At least one <template> or <script> is required in a single file component. /.../Component.vue
Plugin: vite:vue

Basically, I'd like to know how to dynamically compile vue components from strings in vitepress. I'll be 100% honest and admit I don't know much about the internal structure of vite and vue (though if anyone has any good resources to learn I'll gladly read up on them).

Thanks in advance for any help!

[brc-dd]

Your alias should be like this - #2448 (comment)

When you write just vue it matches import {} from 'vue/server-renderer' too. That's why it turns to vue/dist/vue.esm-bundler.js/server-renderer

[brc-dd]

hmm, really weird it's working fine for me locally, but on stackblitz it's failing. Which OS are you on?

[brc-dd]

Or it might be because of node version 👀 because in newer ones esm<>cjs interop was implemented.

[dCastanho]

I'm working on MacOS Sonoma. I hadn't noticed but I'm on node 22.6, I'll try updating to 23 and see if that fixes it.

[dCastanho]

It works 🙌! Guess the problem for this second error was the node version.

Thanks for your help!

[brc-dd]

https://stackblitz.com/edit/vite-z5p237kb?file=docs/index.md,docs/.vitepress/config.ts -- You should do this. ssr.noExternal should bundle it during the ssr phase. This is better fix.