How to use CSS modules in Vue.js?

Below are the steps to use css modules in VueJS,

1. Enable CSS modules: CSS Modules must be enabled by passing modules: true option to css-loader

   // webpack.config.js
   {
     module: {
       rules: [
         // ... other rules omitted
         {
           test: /\.css$/,
           use: [
             'vue-style-loader',
             {
               loader: 'css-loader',
               options: {
                 // enable CSS Modules
                 modules: true,
                 // customize generated class names
                 localIdentName: '[local]_[hash:base64:8]'
               }
             }
           ]
         }
       ]
     }
   }
   

1. Add module attribute: Add the module attribute to your <style>

   <style module>
   .customStyle {
     background: blue;
   }
   </style>
   

1. Inject CSS modules: You can inject CSS modules object with computed property $style

   <template>
     <div :class="$style.blue">
       Background color should be in blue
     </p>
   </template>
   

It can work with object/array syntax of :class binding.

****