Description
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.
Activity