# Vue

## Example

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

## Created with vue-cli

This example shows how to set up PurgeCSS with vue-webpack template.\
Once you initialized your project with `vue init webpack`, install the webpack plugin for PurgeCSS:

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

You need to modify the file `webpack.prod.conf.js` by adding the following code:

line 13

```javascript
// import PurgeCSS webpack plugin and glob-all
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
```

line 58

```javascript
    // Remove unused CSS using PurgeCSS. See https://github.com/FullHuman/purgecss
    // for more information about PurgeCSS.
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './../src/index.html'),
        path.join(__dirname, './../**/*.vue'),
        path.join(__dirname, './../src/**/*.js')
      ])
    }),
```

## Results

This example is importing the bootstrap css framework.\
Without PurgeCSS, the css file size is **117 kB**.\
Using PurgeCSS, the css file size is **2.98 kB**


---

# 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/vue.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.