Laravel Mix Vue Css Modules

Add support for css module laravel mix.

Installation

npm i laravel-mix-vue-css-modules

Usage

First, VueCssModules must be enabled. Your webpack.mix.js could look like this:

const mix = require("laravel-mix");
require("laravel-mix-vue-css-modules");

mix.vueCssModules();

Then, add the module attribute to your <style>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

You can then use it in your templates with a dynamic class binding:

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

Opt-in Usage

If you only want to use CSS Modules in some of your Vue components, you can set oneOf to true

mix.vueCssModules({ oneOf: true });

Pre-Processors

// <style lang="scss" module>
mix.vueCssModules({ sass: true });

Custom localIdentName

// DEFAULT: '[local]_[hash:base64:8]'
mix.vueCssModules({ localIdentName: "[name]__[local]___[hash:base64:5]" });

Local mode

// DEFAULT: global
mix.vueCssModules({ mode: "local" });

Author

Aslam FullStack Web developer