webpack-plugin-vuetify

A Webpack plugin for treeshaking Vuetify components and more

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
webpack-plugin-vuetify
431112.0.0-alpha.13a month ago4 months agoMinified + gzip package size for webpack-plugin-vuetify in KB

Readme

webpack-plugin-vuetify

Automatic Imports

webpack-plugin-vuetify will automatically import all Vuetify components as you use them
// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin({ autoImport: true }), // Enabled by default
  ],
}
// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()

<template>
  <v-card>
    ...
  </v-card>
</template>

<script>
  export default {
    ...
  }
</script>

Will be compiled into:
<template>
  <v-card>
    ...
  </v-card>
</template>

<script>
  import { VCard } from 'vuetify/components'

  export default {
    components: {
      VCard,
    },
    ...
  }
</script>

Style loading

Customising variables

// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin({ styles: { configFile: 'src/settings.scss' } }),
  ],
}
// plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify()
// settings.scss
@forward 'vuetify/settings' with (
  $color-pack: false,
  $utilities: false,
);

settings.scss can be used in your own components to access vuetify's variables.

Customising variables (old method)

// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin({ styles: 'expose' }),
  ],
}
// plugins/vuetify.js
import './main.scss'
import { createVuetify } from 'vuetify'

export default createVuetify()
// main.scss
@use 'vuetify' with (
  $color-pack: false,
  $utilities: false,
);

Remove all style imports

// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin({ styles: 'none' }),
  ],
}
// plugins/vuetify.js
import { createVuetify } from 'vuetify'

export default createVuetify()

Import sass from source

Vuetify 3 uses precompiled css by default, these imports can optionally be modified to point to sass files instead:
// webpack.config.js
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = {
  plugins: [
    new VuetifyPlugin({ styles: 'sass' }),
  ],
}

Progressive images

Coming soon...