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