vite-plugin-vue-styles-inject

This plugin will rewrite the code generated by @vitejs/plugin-vue so the styles of Vue components are injected into the DOM when their render function is first executed. This way the styles of the component are automatically added when the component is used, and not included in the final build when it is not (tree shakable).

Install

• npm

npm i vite-plugin-vue-styles-inject --save-dev

• yarn

yarn add -D vite-plugin-vue-styles-inject

• pnpm

pnpm add -D vite-plugin-vue-styles-inject

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueStylesInject from 'vite-plugin-vue-styles-inject';

export default defineConfig({
  plugins: [vue(), VueStylesInject()],
  ...
});

It's important to add it after vue() or it will not work.