CSS Modules

A <style module> tag is compiled as CSS Modules
and exposes the resulting CSS classes to the
component as an object under the key of $style:

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Custom Inject Name

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Usage with Composition API

The injected classes can be accessed in setup()
and <script setup> via the useCssModule API.
For <style module> blocks with custom injection
names, useCssModule accepts the matching
module attribute value as the first argument:

import { useCssModule } from 'vue'

// inside setup() scope...
// default, returns classes for <style module>
useCssModule()

// named, returns classes for <style module="classes">
useCssModule('classes')