@stylify/nuxt-module
Nuxt module provides seamless Stylify CSS integration into the Nuxt.js v2+ < v3.
Try it on StackBlitz@stylify/nuxt-module can be used only in Nuxt v2. For Nuxt v3 and above check out @stylify/nuxt.
Installation
Nuxt module can be installed only via CLI like NPM or Yarn:
yarn add -D @stylify/nuxt-module
npm i -D @stylify/nuxt-module
Usage
Add a buildModule into the nuxt.config.js
:
buildModules: [
'@stylify/nuxt-module'
]
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
:
import { defineConfig } from '@stylify/nuxt-module';
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: [],
// Loaders are used during webpack build when compiler.mangleSelectors are set to true and when nuxt runs production build
// When a file is loaded by webpack according to defined loader, its content
// will be mangled by Stylify CSS Compiler.
// Loaders have the following structure
// {
// test: /\.vue$/i,
// include: ['path/to/some/dir']
// },
loaders: []
});
In case you use
stylify.config.ts
, you cannot use hooks . It is because Nuxt compiles that file and hooks will work with a different instance of hooks manager than the dev server. Therefore, they cannot listen to triggered hooks on a dev server and will be useless.Example for nuxt.config.js
export default {
stylify: stylifyConfig
}
Example for stylify.config.js
export default stylifyConfig;
Where to go next?
- 🚀 Learn how to get started
- ⚙️ Or configure Stylify right away: