Using CSS Modules to implement style isolation in Vue3

Preface

With the need to build modern front-end applications, style management and isolation are becoming increasingly important. To solve the problem of style conflict and management difficulties, CSS Modules came into being. Today, we will discuss how to implement style isolation using CSS Modules in Vue3, especially with the new setup syntax sugar.

What are CSS Modules

CSS Modules is a modular solution for CSS files that allows you to limit CSS styles to the scope of components, thereby avoiding global style conflicts. Each CSS Module generates a unique class name so that the same class name can be reused in different components without style conflicts.

Configuring CSS Modules in Vue3

First, we need to make sure that the Vue project supports CSS Modules. Projects created by the Vue CLI will usually automatically support CSS Modules. If you are not using the Vue CLI but configure it manually, you need to add support for CSS Modules in your webpack configuration.

// 
 = {
  css: {
    modules: {
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
};

The above configuration specifies the format of the generated CSS class name. You can customize this format as you want.

Create a Vue3 component

Here is an example of a simple Vue3 component that we will use CSS Modules to implement style isolation. We will create a button component whose style will be localized to avoid style conflicts with other components.

1. Create component files

First, create a new Vue component file：

<template>
  <button :class="buttonClass" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script setup>
import { ref } from 'vue';
import styles from './';

const buttonClass = ref();

const handleClick = () => {
  ('Button clicked!');
};
</script>

<style module>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #45a049; /* Darker Green */
}
</style>

2. Parsing the code

In this component, we use the following important features:

• <script setup>: Represents the new syntactic sugar of Vue3, which simplifies the use of combinatorial APIs.
• import styles from './': Import CSS Module, generatedstylesThe object contains localized class names, ensuring style isolation.
• ref(): Create a responsive variablebuttonClass, its value is, this will assign a localized style to the button.

3. Use components

Next, we can use it in the parent componentMyButton. Create a new component：

<template>
  <div>
    <h1>Welcome to My Vue App</h1>
    <MyButton>Click Me!</MyButton>
  </div>
</template>

<script setup>
import MyButton from './';
</script>

<style>
h1 {
  font-family: Arial, sans-serif;
  color: #333;
}
</style>

Advantages of CSS Modules

1. Prevent style conflicts: Since each class name is local, the styles between different components are guaranteed not to affect each other.
2. Easy to maintain: The style files of a single component can be closely integrated with component logic for easy development and maintenance.
3. Supports component reusability: You can reuse the same class name between different projects or even different components without worrying about style conflicts.

Summarize

In this article, we show how to implement style isolation using CSS Modules in Vue3. With simple steps to set up and integration, we successfully built a reusable, fully styled button component. CSS Modules provides an elegant way to manage and build hierarchical styles, allowing developers to focus more on the logic of components without worrying about style conflicts.

This is the end of this article about using CSS Modules to implement style isolation in Vue3. For more related content on Vue3 CSS Modules style isolation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!