Vue3: vite-plugin-vuetify

[wkramer]

Check what the vite-plugin-vuetify plugin do and add if useful

[vanmeeuwen]

First check the benefits/differences and continue only after consult with me.

[hvangeffen]

vite-plugin-vuetify provides 3 things for vite:

Auto import vuetify components

It can auto import vuetify components so you don't have to do it in plugins/vuetify.ts.

This would reduce the number of lines in our vuetify.ts.

Modify vuetify styling throught vite

This allows us to modify, add and disable the setting of sass variables for vuetify through vite. The other basic method is to import a main.scss file in the plugins/vuetify.ts file. The css import of vuetify can also be modified to redirect its imports from the default precompiled css it uses to custom sass files.

If needed this could be useful.

Transform asset urls

It can convert any encountered asset URLs into ESM imports from:

<img src="../image.png" />

to:

<script setup>
import _imports_0 from '../image.png'
</script>

<img :src="_imports_0" />

Could be useful if needed, but don't see the immediate use case.

The reason to add this to vite for us currently would be to cleanup our vuetify config file slightly. It is however the standard way of setting up a vuetify project these days, as it is included in the official create-vuetify project setup. An example of such a setup can be found in the CRA-static Deltares project.