https://github.com/peterroe/vite-plugin-vue-style-in-template
Extract the style tags from the Vue component into basic style tags
https://github.com/peterroe/vite-plugin-vue-style-in-template
vite-plugin vue3
Last synced: 3 months ago
JSON representation
Extract the style tags from the Vue component into basic style tags
- Host: GitHub
- URL: https://github.com/peterroe/vite-plugin-vue-style-in-template
- Owner: peterroe
- License: mit
- Created: 2025-03-05T15:20:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-08-11T03:27:28.000Z (3 months ago)
- Last Synced: 2025-08-11T05:27:26.394Z (3 months ago)
- Topics: vite-plugin, vue3
- Language: TypeScript
- Homepage:
- Size: 55.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - v3 - Extract the style tags in template. (Plugins / Vue)
- awesome-vite - v3 - Extract the style tags in template. (Plugins / Vue)
README
## Vite Plugin Vue Style In Template
Extract the style tags from the Vue component into basic style tags.
## Usage
```bash
pnpm install vite-plugin-vue-style-in-template
```
```ts
import vueStyleInTemplate from 'vite-plugin-vue-style-in-template'
export default defineConfig({
plugins: [vueStyleInTemplate()],
})
```
In [vitepress](https://vitepress.dev/)
```ts
import vueStyleInTemplate from 'vite-plugin-vue-style-in-template'
export default defineConfig({
plugins: [
vueStyleInTemplate({
include: [/\.vue$/, /\.md$/],
}),
],
})
```
## Example
`` tags within the template will be extracted into corresponding `<style>` tags based on whether they contain the `scoped` attribute. If the original file does not have `<style>` tags, new `<style>` tags will be inserted.
### Basic Usage
transform:
```vue
<template>
<div>
<h1 class="main-title">Hello World</h1>
<style scoped>
.main-title {
color: red;
}
Some text
.text {
color: blue;
font-size: 16px;
}
.body {
background-color: #f0f0f0;
}
```
to:
```vue
Hello World
Some text
.body {
background-color: #f0f0f0;
}
.text {
color: blue;
font-size: 16px;
}
.main-title {
color: red;
}
```
### With `slot`
You can use `` tags within the `<slot>` tags to style the content of the slot.
`comp.vue`:
```vue
<template>
<div>
<div>
<slot name="header" />
</div>
<div>
<slot name="content" />
</div>
</div>
</template>
```
`app.vue`:
```vue
<script setup lang="ts">
import Comp from './comp.vue'
</script>
<template>
<Comp>
<template #header>
<div class="header">Header</div>
<style scoped>
.header {
color: red;
}
Content
.content {
color: blue;
}
```