How to use Vuetify with Angular +7 or +9?

Question

I need to use UI Components Vuetify with Angular, I use VueCustomElement with angular and work successfully but I tried to add Vuetify but I got some errors like missing $attr, $ ...etc.

I need to add Vuesax, Quaser, or Vuetify because I love it. I know all types of materials like Angular material or PrimeNg but need more customized and I don't have spare time for work.

app.module.ts:

@NgModule({
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

app.component.html:

<my-vue-web-comp></my-vue-web-comp>

app.js

import Vue from 'vue/dist/vue';
import vueCustomElement from 'vue-custom-element';
import Vuetify from 'vuetify';
import {VApp} from 'vuetify/lib';

Vue.use(Vuetify)
Vue.component('v-app', VApp)
Vue.use(vueCustomElement);
 const MyVueWebComp = {
    template:`
      <v-app></v-app>
    `
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);

Answer 1

I'm afraid you will just have to bite the bullet and either switch to Vue.js or use a framework designed for Angular. There are a lot of dependencies in Vuetify (and the others) that are written for Vue and would need to be rewritten to work in Angular. There is no simple fix.

If you really don't have the time, you could get a UI kit similar to this or this. They will usually cost at least a flat fee, but they have pre-styled UI elements similar to Vuetify.

Edit: You could also just use something like Bootstrap which has the elements pre-styled. Maybe that could be a middle ground.