A vue plugin that extends vue's Custom Element capabilities (sub component style)
npm install @unplugin-vue-ce/sub-styleThe implementation principle of @unplugin-vue-ce/sub-style comes from vue/core pr #7942
> Tips: ⚠ This plugin will inject the implementation code into the vue runtime, which is what I have to tell you.
> If you have any problems using it, please submit an issue
``bash`
npm i @unplugin-vue-ce/sub-style`
orbash`
yarn add @unplugin-vue-ce/sub-style`
orbash`
pnpm add @unplugin-vue-ce/sub-style
> Tips: You need to enable the customElement option of @vitejs/plugin-vue
Vite
`ts`
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
vue(),
viteVueCESubStyle() as PluginOption,
],
})
Rollup
`ts`
// rollup.config.js
import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
export default {
plugins: [
rollupVueCESubStyle(),
],
}
Webpack
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [
require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
],
}Vue CLI
`ts`
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
],
},
}
ESBuild
`ts
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'
build({
plugins: [esbuildVueCESubStyle()],
})
`
Starting from version "1.0.0-beta.19", a new option isESCSS is added, which is turned off by default.
This is an experimental feature.
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
vue(),
viteVueCESubStyle({
isESCSS: true,
}) as PluginOption,
],
})
`
When isESCSS is turned on,@unplugin-vue-ce/sub-style will automatically move the css import part of the script block to the style block,
so that vue-plugin can compile its style. If you do not do this , it will be injected into the head of the document as a global style.
`vue
foo
`
transform result`vue
foo
`About Tailwind CSS
Since vue enables shadow dom by default,
it will isolate the style,
so you need to add the root component of each web component to add the reference style:
`html
`
or (only vite)
`html
`About Uno CSS
Only postcss plugins are supported (via: https://unocss.dev/integrations/postcss#install),
you need to add the root component of each web component to add the reference style:`html
`
or (only vite)
`html
``