NuxtJS

A simple guide to setup Atomizer with NuxtJS.

Create a new project

If you do not have a project setup already, you can create a new one using the Create Nuxt App CLI.

npx create-nuxt-app my-app
cd my-app

Install the module

nuxt-atomizer is a third party module that adds Atomizer CSS framework support to your NuxtJS app.

npm i nuxt-atomizer -D

Update the NuxtJS config

Configure your nuxt.config.js with the new module.

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

Create your Atomizer config

Make sure Atomizer can parse your NuxtJS files in your ./atomizer.config.js file.

module.exports = {
    content: [
        './components/**/*.{js,vue,ts}',
        './layouts/**/*.vue',
        './pages/**/*.vue',
        './plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}',
    ],
}

Start your build process

Run your build setup as configured in your project’s ./package.json:

npm run dev

Begin using Atomizer

Start adding Atomizer classes to your code base:

<template>
    <h1 className="Fw(b) Fz(2rem)">Welcome!</h1>
</template>