Using Vue3 components on the frontend of a Statamic CMS project

[321zeno]

I'm building a website using Statamic 5 and need to integrate a library of Vue 3 components on the frontend. However, I'm running into conflicts with the CMS, which is using Vue 2 and the Vite vue2-loader.

I've experimented with setting up a separate directory with its own package.json and a separate Vite config, but I'm facing issues with the paths that Vite expects in development mode.

Has anyone managed to solve this problem or found a better approach?

[jackmcdade]

The control panel's assets come pre-compiled, so you should be able to remove the vue 2 stuff from your vite config. It's only in there by default in case you want to make some custom components for the cp.

[321zeno]

Ah yeah that did occur to me but I already built a widget that uses Vue2 components in the CMS. Maybe I can rewrite the Vue2 stuff to get rid of the dependency though, thanks for the suggestion.

[duncanmcclean]

You could potentially create a subdirectory in your project with a different Vite config / package.json.