Amplify ui breaks Vuetify styling

I am working on a Vue.js application and I am using Vuetify for the styling.

I am also using the amplify authenticator and importing as stated in the docs.

My main.js file looks like this:

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import {
  applyPolyfills,
  defineCustomElements,
} from "@aws-amplify/ui-components/loader";

import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Vue.config.ignoredElements = [/amplify-\w*/];

Vue.config.productionTip = false;


new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

All works fine with the authenticator however, a number of small but vital parts of the Vuetify styling seem to break. If I comment out the amplifyUI bits from my main.js, the Vuetify styling works just fine.

Examples of styling that breaks are the grid:

The columns will not center property

<v-row>
  <v-col
    cols="12"
    sm="8"
    offset-sm="2"
    md="6"
    offset-md="3"
    xl="4"
    offset-xl="4"
  >
    <router-view />
  </v-col>
</v-row>

Another example is the v-card-text breaking the v-card boundaries on the right side:

  <v-card class="red">
    <v-card-text class="blue"></v-card-text>
  </v-card>

…and so forth.

I have been able to apply some corrections to the styling on the v-card, but trying to correct the responsive grid is more complex and time consuming. There may also be other breaks that I have not come across yet.

Are others out there experiencing the same problem? Does anyone know of a solution?

Using the amplify authenticator is a must for this project, but it is making working with Vuetify (our fav UI library) a bit of a nightmare.

Many thanks in advance.

[Milan-Shah]

@ClaudioVR We are glad that you have found a work around solution for your needs. Feel free to create another issue if you would like to suggest any improvements or have an issue. We are here to help 😃

[ErikCH]

Hi @ClaudioVR ! I’m glad you figured out a work around for now.

The new @aws-amplify/ui-vue library only works for Vue 3, so it won’t help in the situation you’re in unfortunately. So feel free to remove it from your package.json. Have you looked into Vue 3?

The @aws-amplify/ui-components will work fine for Vue 2. There might be some slight issues with the ui-components library and how the shadow dom works.

For now I suggest use the work around you found.