webpack-plugin-vuetify

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.

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