webpack-plugin-vuetify
TypeScript icon, indicating that this package has built-in type declarations

3.0.3 • Public • Published

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.0.3
    2,365
    • latest

Version History

Package Sidebar

Install

npm i webpack-plugin-vuetify

Weekly Downloads

15,874

Version

3.0.3

License

MIT

Unpacked Size

25.2 kB

Total Files

14

Last publish

Collaborators

  • johnjleider
  • kaelwd