# 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

Latest version **0.1.2** (published 2023-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-styles-inject
pnpm add vite-plugin-vue-styles-inject
yarn add vite-plugin-vue-styles-inject
bun add vite-plugin-vue-styles-inject
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-05-01 |
| First published | 2023-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Julien Pinto |
| Maintainers | stnaire |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-styles-inject
- Repository: https://github.com/Stnaire/vite-plugin-vue-styles-inject
- Homepage: https://github.com/Stnaire/vite-plugin-vue-styles-inject#readme
- Issues: https://github.com/Stnaire/vite-plugin-vue-styles-inject/issues
- npm.io page: https://npm.io/package/vite-plugin-vue-styles-inject

## Dependencies (1)

- [acorn](https://npm.io/package/acorn.md) ^8.8.2

## Recent versions

- 0.1.2 (latest) — 2023-05-01
- 0.1.1 — 2023-05-01
- 0.1.0 — 2023-04-15

## README

# 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

```bash
npm i vite-plugin-vue-styles-inject --save-dev
```
- yarn 
```bash
yarn add -D vite-plugin-vue-styles-inject
```

- pnpm

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

## Usage

```ts
// 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.

---
_Source: https://npm.io/package/vite-plugin-vue-styles-inject · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._