vite-plugin-vue-css-module

Provides Vue3 cssModule syntax sugar so that you don't have to write $style. again and again. You just need to write the code like a normal class attribute. It supports the Vue default template and the Pug template.

Before using it, you might have written something like:

``html


`

After using it, you no longer need to repeat the $style., you just need to write this:

In the Vue default template

`html


`

In the Pug template

`html


`

Now, let's use it!

Installation

vite-plugin-vue-css-module works in vue3 and vite.

Install with npm:

`bash
npm i --save-dev vite-plugin-vue-css-module
`

Usage

First, add the configuration in the vite.config.js file

`js
// vite.config.js
import vueCssModule from 'vite-plugin-vue-css-module'
export default defineConfig({
plugins: [
vueCssModule({
// By default, it is "cls", but you can change it to another name. However, it is better to use a unique name.
attrName: 'cls'
}),
vue()
],
})
`

Then, use it in the **.vue file.
- Add 'module' to the style tag to enable css-module
- In the template, use the 'attrName' value you set (the default is 'cls' ) to write the class name

`html



`

In addition, if you are using the pug template, the writing method is exactly the same.

> Note:
> - This syntax sugar is currently only supported in