vue.md

title	lang	meta
Vue | PurgeCSS	en-US	name content description PurgeCSS can be used with Vue with the webpack plugin. itemprop content description PurgeCSS can be used with Vue with the webpack plugin. property content og:url https://purgecss.com/guides/vue property content og:site_name purgecss.com property content og:type website property content og:image https://i.imgur.com/UEiUiJ0.png property content og:locale en_US property content og:title Remove unused CSS - PurgeCSS property content og:description PurgeCSS can be used with Vue with the webpack plugin.

Vue

Use the vue CLI plugin

Install

If you haven't yet installed vue-cli 3, first follow the install instructions here: https://github.com/vuejs/vue-cli

Generate a project using vue-cli 3.0:

vue create my-app

Before installing the PurgeCSS plugin, make sure to commit or stash your changes in case you need to revert the changes.

To install the PurgeCSS plugin simply navigate to your application folder and add PurgeCSS.

cd my-app

vue add @fullhuman/purgecss

Usage

Below are the PurgeCSS options set by this plugin:

{
  content: [ `./public/**/*.html`, `./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}