Vuetify-module: Enabling "treeShake" causes imported Vuetify components to not be transpiled

[morficus]

Module version
1.4.0

Describe the bug
When changing the treeShake flag to true, some Vuetify elements do not get transpiled as expected.

To Reproduce
https://github.com/morficus/nuxt-vuetify-module-bug

Steps to reproduce the behavior:

1. Clone the code at the above link
2. Start the Nuxt app
3. Open the app in a browser and notice the custom header that is present
4. Open nuxt.config.js in your editor of choice and change treeShake to true (line 40)
5. Wait for the Nuxt app to rebuild and then refresh the browser
6. Notice how the custom header no longer appears. If you use the element inspector in Chome, you will see that the v-app-bar element appears verbatim and is never transpiled.

Expected behavior
The same application behavior regardless of the treeShake value

Screenshots
treeShake: false

treeShake: true

Additional context
This is the sample library that the above repo is pulling in: https://github.com/morficus/vuetify-wrapper-sample

It exports a component which wraps a Vuetify component.

[kevinmarrec]

@morficus If you're using a component that wraps Vuetify components, vuetify-loader can't know what components it needs to autoimport, it's explained around https://vuetifyjs.com/en/customization/a-la-carte#limitations

You need to tell Vuetify to manual import components used by the 3rd party component, you can do it since 1.4.0 verson of the module but it isn't documented yet.

Related : https://github.com/nuxt-community/vuetify-module/issues/109

[morficus]

@kevinmarrec thanks for the insight!

I took a look at the referenced issue and related PR. Manually importing a component makes sense for the use case of dynamic components but I don't think that is feasible for external/3rd party components that use Vuetify as a peer dependency. To me this seems like a vuetify-loader limitation that needs to be addressed and not anything to do with this module. Ideally the loader would look in anything coming from nodde_modules and perform the same auto-importing (even if it means configuring the loader so it knows specifically what packages to look at)

So I started to looking around the vuetify-loader repo and found a related issue that was recently opened: https://github.com/vuetifyjs/vuetify-loader/issues/70

In the mean time I'll just disable treeShake in my app (acceptable since it's still early stages). I'll also be closing this issue and continuing any further discussions over on the vuetify-loader repo.

Thanks again for all your work! 🎉

[aldarund]

@morficus you just need to register globally components that are used in external lib. And that PR that was referenced was done specifically for this

[morficus]

@aldarund globally or manually registering (as the merged PR now allows) all Vueitfy components used any 3rd party libraries is very onerous and becomes a maintenance nightmare the minute you need to import more than a hand-full of them.