@stylify/nuxt

Nuxt module provides seamless Stylify CSS integration into the Nuxt.js v3+.

Try it on StackBlitz

Installation

Nuxt module can be installed only via CLI like NPM or Yarn:

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

Usage

Add a module into the nuxt.config.js:

modules: [
	'@stylify/nuxt'
]

Configuration

If you want to configure the Stylify, you can use configuration section directly in nuxt.config.js or create a file stylify.config.js next to the nuxt.config.js. In both cases you use the same configuration scheme shown below.

The code part below should be used inside the nuxt.config.js or inside the stylify.config.js or stylify.config.mjs:

import { defineConfig } from '@stylify/nuxt';

const stylifyConfig = defineConfig({
	dev: false,
	configPath: 'stylify.config.js',
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	},
	// When vars dir paths are set, Stylify CSS will export variables into
	// a file according to given path
	// cssVarsExportPath: 'path/to/dir',
	// cssVarsExportPath: 'path/to/export-file.css',
	cssVarsExportPath: null,
	sassVarsExportPath: null,
	lessVarsExportPath: null,
	stylusVarsExportPath: null,
	// Files masks are used by @stylify/bundler
	// Bundler uses these masks to find files from which he should generate CSS
	// When you add a mask and you want to mangleSelectors, you also need to add appropriate loader. See below
	filesMasks: []
});

Example for nuxt.config.js

export default {
	stylify: stylifyConfig
}

Example for stylify.config.js

export default stylifyConfig;