webpack-plugin-vuetify

Automatic Imports

webpack-plugin-vuetify will automatically import all Vuetify components as you use them

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

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

export default createVuetify()
`

`html



`

Will be compiled into:

`html



`

Style loading

$3

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

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

export default createVuetify()
`
`scss
// 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.

$3


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

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

export default createVuetify()
`

$3

Vuetify 3 uses precompiled css by default, these imports can optionally be modified to point to sass files instead:

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

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

Progressive images

Coming soon...