nuxt-style-extractor

Extracts the style of the page as an external css when rendered on the server side

README 🦉

简体中文 | English

Motivation

Faster rendering and more readable seo

Features

• 🚠  Optimal Caching
• ⛰  Supports ssg, ssr and ssr with pre-rendering.
• 🌲  Intelligent minification extraction, removing unused styles from the page, merging duplicate styles

Quick Setup

Install the module

npm i nuxt-style-extractor

Setup Module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-style-extractor"],
});

That's all. Everything's automatic.

Configuration

Of course, you can also configure it.

// nuxt.config.ts
export default defineNuxtConfig({
  styleExtractor: {
    minify: true, // Whether to enable minification
    removeUnused: true, // Whether to remove unused styles
  },
});

Preserve Original State

If you don't need any optimization and want to maintain the original order of styles, you can set original to true

export default defineNuxtConfig({
  styleExtractor: {
    original: true, // Only extract CSS without any optimization processing
  },
});

Custom Transformer

// style-extractor.js
export default (options) => {
  return options.css + "body { background: red }";
};
// nuxt.config.ts
export default defineNuxtConfig({
  styleExtractor: {
    transformFile: "style-extractor.js",
  },
});