# Nuxt

## Module

There is a community module called [nuxt-purgecss](https://github.com/Developmint/nuxt-purgecss) to make the usage of PurgeCSS with Nuxt as easy as possible. With it's fitting defaults, you only need to make a few changes (or none at all) to the configuration.

### Example

You can see an example using the `nuxt-purgecss` module [in our examples directory](https://github.com/FullHuman/purgecss/tree/master/examples/with-nuxt-module/).

## Manual configuration

### Example

You can see an example [here](https://github.com/FullHuman/purgecss/tree/master/examples/with-nuxt-manual/).

### create-nuxt-app and webpack plugin

This example shows how to set up PurgeCSS with `create-nuxt-app` Once you initialized your project with

```
npx create-nuxt-app <project-name>
```

and selected the options that fit your needs, install the webpack plugin for PurgeCSS together with `glob-all`:

```
npm i --save-dev glob-all purgecss-webpack-plugin
```

You need to modify the file `nuxt.config.js` by adding he following code:

line 1

```javascript
import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'
import path from 'path'
```

In your `build` segment

```javascript
extractCSS: true
```

In your `build.extend` function.

```javascript
if (!isDev) {
  // Remove unused CSS using PurgeCSS. See https://github.com/FullHuman/purgecss
  // for more information about PurgeCSS.
  config.plugins.push(
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './pages/**/*.vue'),
        path.join(__dirname, './layouts/**/*.vue'),
        path.join(__dirname, './components/**/*.vue')
      ]),
      whitelist: ['html', 'body']
    })
  )
}
```

### Results

This example is importing the tachyons css framework. Without PurgeCSS, the base css file size is **88.2 kB**. Using PurgeCSS, the base css file is **1.56 kB**

### PostCSS plugin

Using the *extractCSS* option Nuxt will create CSS files that will be loaded separately by the browser. When generating your application this might be a lot of small files.

To include the CSS into the header of the HTML file you'll need to run the following commands. Please note that using this configuration PurgeCSS will be active in production and development mode.

```
npm i --save-dev @fullhuman/postcss-purgecss
```

```javascript
import purgecss from '@fullhuman/postcss-purgecss'
```

```javascript
build: {
  postcss: {
    plugins: [
      purgecss({
        content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.vue'],
        whitelist: ['html', 'body'],
      })
    ]
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1.purgecss.com/guides/nuxt.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.