vue-web-component-wrapper/demo-SFC-vite/vite.config.js

A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({ customElement: true })],
  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'MyComponent',
      fileName: (format) => `my-component.${format}.js`,
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      external: /^vue/,
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})