Vue Css Modules

A Laravel Mix extension for css modules support.
latest v3.0.0 - released
26 downloads last week
MIT license
10 versions

Working with vue & css module is USELESS at least for me, please don't use css module it's only wasting your time!.

Laravel Mix Vue Css Modules
npm npm

Add support for css module laravel mix.


npm i laravel-mix-vue-css-modules --save-dev

Recommended v3


Laravel Mix Laravel Mix Vue CSS Modules Pre-Processor Install command
v5 v2 SCSS npm install laravel-mix-vue-css-modules@2
v5 v3 SCSS, LESS, STYLUS npm install laravel-mix-vue-css-modules@3


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

const mix = require("laravel-mix");


Then, add the module attribute to your <style>

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

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

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

And that's it. you ready to go.

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 });


CSS Modules can be used along with other pre-processors. default pre-processor is enable. to disable it set preProcessor to false

mix.vueCssModules({ preProcessor: false });

Custom localIdentName


  • [path][name]__[local] for development
  • [hash:base64] for production
  cssLoaderOptions: { localIdentName: "[path][name]__[local]" },

or you can use react or discord localIdentName

mix.vueCssModules({ localIdentNameType: "react" });

Enable sourceMap

Default: false

mix.vueCssModules({ cssLoaderOptions: { sourceMap: true } });

Set importLoaders

Default: 1

mix.vueCssModules({ cssLoaderOptions: { importLoaders: 2 } });

Exclude css

you may want some of your css exluded from generated class by css module.

const getLocalIdent = require("css-loader/lib/getLocalIdent");

  cssLoaderOptions: {
    getLocalIdent: (context, localIdentName, localName, options) => {
      return context.resourcePath.includes("x.scss")
        ? localName
        : getLocalIdent(context, localIdentName, localName, options);