What are some examples of using CSS Modules in Vue?

What are some examples of using CSS Modules in Vue?

CSS Modules allow you to write modular and reusable CSS in Vue. Here are a few examples:

1. Basic Setup: Create a .module.css file and import it in your Vue component.

   <template>
     <div :class="$style.myClass">Hello World</div>
   </template>
   <script>
   import styles from './MyComponent.module.css';
   export default {
     computed: {
       myClass() {
         return styles.myClass;
       }
     }
   };
   </script>
   

2. Scoped Styles: Use CSS Modules to scope styles to a specific component, preventing global style conflicts.

3. Dynamic Classes: Combine CSS Modules with Vue's reactivity to create dynamic class bindings.

Can you show me a more complex example?

Sure! Here's a more complex example using CSS Modules with Vue's transition system:

<template>
  <transition name="fade">
    <div :class="$style.box" v-if="isVisible">I fade in and out!</div>
  </transition>
  <button @click="toggleVisibility">Toggle</button>
</template>

<script>
import styles from './MyComponent.module.css';
export default {
  data() {
    return { isVisible: true };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<style module>
.box {
  background-color: blue;
  color: white;
  padding: 20px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

What are the benefits of using CSS Modules in Vue?

The benefits of using CSS Modules in Vue include:

1. Scoped Styles: Prevents style conflicts by scoping styles to components.
2. Reusability: Encourages the reuse of styles across components.
3. Maintainability: Makes it easier to maintain and understand styles as they are tied to specific components.