peterroe/vite-plugin-vue-style-in-template

Extract the style tags from the Vue component into basic style tags

Vite Plugin Vue Style In Template

Extract the style tags from the Vue component into basic style tags.

Usage

pnpm install vite-plugin-vue-style-in-template

import vueStyleInTemplate from 'vite-plugin-vue-style-in-template'

export default defineConfig({
  plugins: [vueStyleInTemplate()],
})

In vitepress

import vueStyleInTemplate from 'vite-plugin-vue-style-in-template'

export default defineConfig({
  plugins: [
    vueStyleInTemplate({
      include: [/\.vue$/, /\.md$/],
    }),
  ],
})

Example

<style> 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:

<template>
  <div>
    <h1 class="main-title">Hello World</h1>
    <style scoped>
      .main-title {
        color: red;
      }
    </style>
    <p class="text">Some text</p>
    <style>
      .text {
        color: blue;
        font-size: 16px;
      }
    </style>
  </div>
</template>

<style>
.body {
  background-color: #f0f0f0;
}
</style>

to:

<template>
  <div>
    <h1 class="main-title">Hello World</h1>
    <p class="text">Some text</p>
  </div>
</template>

<style>
.body {
  background-color: #f0f0f0;
}
.text {
  color: blue;
  font-size: 16px;
}
</style>
<style scoped>
.main-title {
  color: red;
}
</style>

With slot

You can use <style> tags within the <slot> tags to style the content of the slot.

comp.vue:

<template>
  <div>
    <div>
      <slot name="header" />
    </div>
    <div>
      <slot name="content" />
    </div>
  </div>
</template>

app.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;
        }
      </style>
    </template>
    <template #content>
      <div class="content">Content</div>
      <style scoped>
        .content {
          color: blue;
        }
      </style>
    </template>
  </Comp>
</template>