Vuetify-module: Build mode

[kevinmarrec]

Is your feature request related to a problem? Please describe.
We're currently not being able to use something else than (dist/vuetify.js + dist/vuetify.css) or vuetify-loader

Describe the solution you'd like
Be able to specify the "build" mode, including the following options :

• full
  
  
  
  • full Vuetify pre-build files
  
  
• treeShake
  
  
  
  • tree-shaking with vuetify-loader
  
  
• manual
  
  
  
  • Does nothing, user will need to manually import Vuetify components in the whole project
  
  
• auto (Current behavior)
  
  
  
  • Fallback to full mode in development(nuxt dev) for faster development
  
  
  • Fallback to treeShake in production(nuxt build)
  
  

Info: Mode names are susceptible to change

Related issues that should be resolvable with this feature (not using vuetify-loader but manually importing components for more granular control)
https://github.com/nuxt-community/vuetify-module/issues/169
https://github.com/nuxt-community/vuetify-module/issues/143
https://github.com/nuxt-community/vuetify-module/issues/148

[MrJmpl3]

You need add a warning in the auto mode, because full mode and treeShake mode can be different CSS order.

[kevinmarrec]

@MrJmpl3 I'm not sure to understand, auto is already current behavior (last module version), why add a warning ? Could you explain a bit further the CSS order you're talking about ? Thanks :) !

[MrJmpl3]

Related: https://github.com/vuetifyjs/vuetify/issues/7933

In the full mode, import css and js pre builded , the order of css is correct.

But in tree-shake is if you are not cautious with imports the order of css broken the app

[kevinmarrec]

@MrJmpl3 Is the bug of CSS order still reproducible ? (The issue has been closed so..) I would be interested trying to figure out what's going on

[MrJmpl3]

The issue was closed because the solution is be cautious with imports.

For example..

import Toolbar from '@/components/organisms/Toolbar.vue';
import Footer from '@/components/organisms/Footer.vue';

The styles of Toolbar is loaded first and second the Footer

OR

import Footer from '@/components/organisms/Footer.vue';
import Toolbar from '@/components/organisms/Toolbar.vue';

The styles of Footer is loaded first and second the Toolbar

Some times don't have problems because the styles don't override , but sometime has problem because the styles of Vuetify Component import global CSS , don't encapsulate the CSS for obvious reason.

The Vuetify team say: "We don't specify any order, it's dependant on the build configuration." in others words, depends of the order of the imports

[kevinmarrec]

@MrJmpl3 They are right, I mean it's user problem if his CSS can go crazy with its own customizations.
If you're talking about custom component matching of Vuetify loader options, this is not something we're responsible of if CSS order matters cause your components do some CSS weird things.

That probably what they meant cause Vuetify components imports don't need specific order to work, so it's only user problem if his CSS is not correctly written.

[MrJmpl3]

For this reason , i recommend add a warning, because , in dev mode you project can be all correct, because the order of the imports don't import , but in production mode, the project will broken because the order of the imports start work.

[KaelWD]

Auto would also mean wider browser support in dev than in prod if babel isn't configured properly, and sass variables can't be changed with the full build.

[kevinmarrec]

@KaelWD treeShaking should better always be on by default then right ?

[MrJmpl3]

In Vue CLI Vuetify , tree-shaking is the default option: https://github.com/vuetifyjs/vue-cli-plugin-vuetify/blob/dev/presets/default.json

[kevinmarrec]

Sounds right to be in treeShake mode by default and let user use full if it wants to through options ?

[MrJmpl3]

Sounds right to be in treeShake mode by default and let user use full if it wants to through options ?

For me, sound good

[1hakr]

Manual build mode is very much required. Currently the tree-shaking components are imported for every page even though they are not used.

[kevinmarrec]

I'm working on it @1hakr :)

https://github.com/nuxt-community/vuetify-module/pull/177
https://twitter.com/K_Marrec/status/1178039799078408192

[kevinmarrec]

Closed by https://github.com/nuxt-community/vuetify-module/pull/177 (possibility to disable automaticImports)