[Feat] Add support for vuetify

[BennyAlex]

Vuetify is one of the biggest component framework for vue.
It would be nice to have this components available in vuegg.

[alxpez]

Thanks for submitting,

As a note on vuegg, currently including a set of Material Design Components, this is due vuegg's interface itself is making use of them.

With this note, I want to point out that including another library of components on compilation time is out of the question, which leads to an open discussion on...

What's the best way to include external libraries on vue apps, during runtime? (Or is it even viable, as for today?)

Personally I need to look further into the question, I'm not sure what the options might be... And that's why I would love any input around this feature.

Any constructive contribution is more than welcome!

[phiwut]

I think you could make it work by using scoped css (https://vue-loader.vuejs.org/guide/scoped-css.html).

[BennyAlex]

@phiwut but you also have to use different components. You have to impement the elements on vuegg both with vuetify and MDC

[alxpez]

@phiwut I'm sorry but I seem to be missing your point here, could you elaborate on your thoughts?

@BennyAlex Yes you would need to create the component definitions in vuegg, and not just that, also it would be necessary to find a way to include the components (templates and styles) on runtime.

A side note: During the early days of vuegg (before it was event called vuegg), the whole of it used to be build with vuetify, and the first tests used this framework components. The reason I replaced it in favour of VMA was:

(quote from vuetify website)

In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.

This even applies for their current "A la carte" option, where the VApp component is required as well, which leads me to the assumption that any other vuetify component should be placed inside this wrapper in order to apply the appropriate styles.

As you could guess, this is very limiting, and it results in unexpected CSS rules overrides for many other elements, both, in vuegg interface as well as in any other elements outside vuetify.

I'm not sure if there's any workaround at the moment, but it's worth trying. Do not hesitate to open a PR if you think you've got a solution, any collaboration is welcomed!

---

(it's worth pointing out that vuetify is not a component library, but a component framework)

[BennyAlex]

Yes, vuetify requires that you have a v-app at top of all other vuetify components, mainly for placing the navbar and dialogs in the correct position.
But you are also able to place the v-app in another component such as "vuetifyIndex.vue" and don't use it when loading "mdcIndex.vue".

For the vueeg interface styles you need to use scoped css.

[buzzzzer]

It seems they want to deprecate v-app
vuetifyjs/vuetify#3836

[mfcarneiro]

Using the Quasar-framework will help to improve the "pallet" of the components and cut some hard work instead VMA? Could be an option?

[hubyhuby]

Hi there,
Any news on a possible vuetify implementation ?
"vue-mdc-adapter" doesn t seem to be as popular as vuetify and prety staled as of today :
https://github.com/stasson/vue-mdc-adapter/graphs/contributors

[Jogai]

That repo states it is deprecated

[alxpez]

Yeah, indeed it would be great, not just to migrate from vue-mdc-adapter, but also to implement a system that would allow to use different component libraries on the fly.

I had some thoughts around it from the beginning and started designing parts of vuegg with that in mind, but unfortunately I haven't been actively developing this project for a while now, I'm planning on fixing some current issues, updating some basics and implementing new functionalities as soon as I get some spare time in my hands, maybe some help and definitely some inspiration.

In the meantime, any ideas around this feature will be more than welcome!

[Jogai]

Documentation on adding another framework could help. That way everybody can scratch their own itch.

[hubyhuby]

@alxpez
Looking forward to this feature. This would make a lot of sens for all our vuetify projects ...
We have hired a dedicated Junior JS developer, beginner in Vuejs that could help on this topic...
If he could be of any help, testing feature or maybe coding simple things... let me know.

[lawndoc]

From the discussion in #35, it sounds like adding third party libraries would be tough to implement. Since vue-mdc-adapter has been deprecated over 2 years, what do you think about migrating Vuegg to use Vuetify by default instead? I think that would draw in a lot more users by using Vuetify even if other 3rd party libraries aren't able to be added.