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>