1

When I create a fresh vue-cli project via this command

vue create hello-word

and this command to install vuetify

vue add vuetify

Then I saw my git changes like this

enter image description here

Two new dependencies have been installed in package.json.

  1. vue-cli-plugin-vuetify
  2. vuetify-loader

At first glance, I thought vue.config.js has specified using these two, but it's content only have these code.

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
}

So, how does vue-cli know I've installed this new vuetify loader?

Does it automatically pick those up?

Joseph
  • 3,974
  • 7
  • 34
  • 67

2 Answers2

1

After running vue add vuetify choose Vuetify 3 if you are using Vue 3:

ahmnouira
  • 1,607
  • 13
  • 8
0

vuetify-loader is a treeshaking plugin for Webpack. It gets installed automatically when you install Vuetify using "vue add vuetify".

So, vuetify-loader is used by Webpack for treeshaking the Vuetify components to only include the ones that you imported in your app. This way Webpack should be able to lower your build size by importing only the required components, and not all the Vuetify components.

See Vuetify Treeshaking

And this is the vuetify-loader project on Github

MAW
  • 923
  • 8
  • 23