# with-vue-webpack

> A Vue.js project

## 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

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

line 58

```js
    // 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**

# with Vue CLI 3

> A Vue.js project

## Created with vue-cli

This example shows how to set up Purgecss with a newly create Vue CLI 3 app.
Once you initialized your project with `vue create app-name`, install the webpack plugin for purgecss and path:

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

Based on the options you chose, you project may or may not have a vue.config.js file in the root directory.
If it doesn't exist, create it with the following content:

```
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

module.exports = {
  configureWebpack: {
    // Merged into the final Webpack config
    plugins: [
      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**

Update readme for Vue CLI 3
Update readme for Vue CLI 3

With the change to Vue CLI 3 the vue documentation no longer works.
To update users need to import path in addition to
purgecss-webpack-plugin and then set vue.config.js as shown in the
commit.

After testing a repo with Bootstrap added and no classes called, the
file size reduction is nearly the same as what is referenced in the
original ~3.4kb
