Using Stylify CSS in Nuxt.js

Nuxt.js is an open source framework that uses Vue.js for making web development simple and powerful.

The integration uses Stylify CSS packages for Nuxt 2 and Nuxt 3. Checkout the guides bellow.

Try it on StackBlitz

How to integrate Stylify CSS into the Nuxt.js v3+

First install the package using CLI:

npm i -D @stylify/nuxt
yarn add -D @stylify/nuxt

Than add a build module into the nuxt.config.js build modules section:

buildModules: [
    '@stylify/nuxt'
]

Now you can start using Stylify CSS with Nuxt.js.

How to integrate Stylify CSS into the Nuxt.js v2+ < v3

First install the package using CLI:

npm i -D @stylify/nuxt-module
yarn add -D @stylify/nuxt-module

Than add a build module into the nuxt.config.js build modules section:

buildModules: [
    '@stylify/nuxt-module'
]

Now you can start using Stylify CSS with Nuxt.js.

Configuration

There is a lot of options you can configure:

Stylelint

In case you use Stylelint, you may want to add the generated stylify.css and possible files with variables into the .stylelintignore file.

assets/stylify.css
assets/scss/variables/stylify-variables.scss

If the Stylelint complains about a pattern that doesn't match any files, add the --allow-empty-input rule into the package.json file to the lint:style and the stylelint config into the nuxt.config.js:

stylelint: {
    allowEmptyInput: true
}

Build config

It is possible that the build will fail because it is not configured to use modern ES6 features. You can fix it by setting the transpile option in the nuxt.config.js:

build: {
    transpile: [
        '@stylify/stylify/lib/index.cjs',
        '@stylify/stylify/esm/index.mjs'
    ]
}

Where to go next?