Search code examples
vue.jsvitevue-clivue-sfc

How to package a Vue Single File component with Vite to load it via HTTPS?

I'm trying to create a compiled an packaged version of my Vue Single File component to distribute and dynamically load it via HTTP.

I found this article from Markus Oberlehner that uses Vue CLI v3 with the following command:

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue

It seems to work fine, however, I would like to use Vite instead. Is that possible? Which is the equivalent command?

Solution

  • Author of the original article here.

    I recommend you look into Module Federation. When I wrote the original article, it did not exist yet. Nowadays, I'd 100% go for Module Federation instead of rolling my own.

    There is also a Vite plugin for it: https://github.com/originjs/vite-plugin-federation