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.

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:

• Nuxt v3: @stylify/nuxt
• Nuxt v2: @stylify/nuxt-module

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'
	]
}