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. Check out the guides below.

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

Try it on StackBlitz

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:

modules: [
	'@stylify/nuxt'
]

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

For some unknown reason, the CSS is not reloaded when an error is triggered within the Nuxt (syntax, duplicated attributes). If that happens, just hit save within the Nuxt config file or restart the dev server.

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

Try it on StackBlitz

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

The build may 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?