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 all rendering modes, spa, 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
  },
});

Custom Transformer

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