Nuxt-atomizer NPM

nuxt-atomizer

Module that adds ACSS atomic CSS framework (aka Atomizer) support to a Nuxt.js app. Generates atomic classes from code.

Install

# npm
$ npm install nuxt-atomizer

# Yarn
$ yarn add nuxt-atomizer

Usage

Add the module to your Nuxt.js modules list in nuxt.config.js:

export default {
  modules: [
    'nuxt-atomizer',
  ],
}

That's already it, now you can add atomic classes to your components and they are generated on the fly!

<template>
  <div class="P(2rem) Bgc(#fafafa) C(#111) Bd Bdw(2px) Bdc(#ccc) Bdrs(.5rem) Ff(ss)">
    Hey there, I'm styled with ACSS! 🙌
  </div>
</template>

Here is the result:

Also check out the demo at CodeSandbox.

Options

You can customize Atomic CSS by adding options either to the module or top-level options. It takes the same options as webpack-atomizer-loader.

export default {
  modules: [
    ['nuxt-atomizer', {
      breakPoints: {
        sm: '@media screen(min-width=750px)',
        md: '@media(min-width=1000px)',
        lg: '@media(min-width=1200px)'
      },
      custom: {
        primary: 'red',
      },
    }],
  ],
  atomizer: {
    /* options */
  },
}

<template>
  <div class="C(primary)">I am red now</div>
</template>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️