Initialize the project

Please follow up https://vite.dev/guide/#scaffolding-your-first-vite-project to initialize a Vite project. You can select your framework integration (ex. Vite + Vue or Vite + React).

Create an index file as an entry point for your components

// src/index.ts
// Example index.ts file

import './style.css'

import HelloWorld from './components/HelloWorld.vue'
export { HelloWorld }

Configure the library mode

Please refer to https://vite.dev/guide/build.html#library-mode to configure Vite project library mode.

vite.config.js

You should have a vite.config.js like this:

// Example vite.config.js for Vue library

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

Injecting your styles into the JS files

If your project requires bundling CSS into JS, you can add the vite-plugin-css-injected-by-js to your vite.config.js

import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), cssInjectedByJsPlugin()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})