nuxt-atomizer

src="https://img.shields.io/npm/v/nuxt-atomizer.svg"
alt="npm version"
>

src="https://github.com/dword-design/nuxt-atomizer/workflows/build/badge.svg"
alt="Build status"
>

src="https://codecov.io/gh/dword-design/nuxt-atomizer/branch/master/graph/badge.svg"
alt="Coverage status"
>




src="https://gitpod.io/button/open-in-gitpod.svg"
alt="Open in Gitpod"
width="114"
>

src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>

src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>

src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>

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

Install

``bash


npm

$ npx nuxi module add nuxt-atomizer

Yarn

$ yarn nuxi module add nuxt-atomizer
`

Usage

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

`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!

`html

`

Here is the result:

Also check out the demo at CodeSandbox.

Options

You can customize Atomic CSS by adding options either to the module, the top-level atomizer options object or an atomizer.config.js file. The merge order is the following: module > top-level > atomizer.config.js.

`js
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 /
},
}
`

`html

``

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:

src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>
 If you want to send me a one time donation. The coffee is pretty good 😊.


src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>
 Also for one time donations if you like PayPal.


src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

See also

* nuxt-mail: Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
* nuxt-route-meta: Adds Nuxt page data to route meta at build time.
* nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
* nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
* nuxt-babel-runtime: Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.

License

MIT License © Sebastian Landwehr