Vuetify elements do not appear perfectly on netlify after deployment - vue.js

Question

My team and I developed a website using VueJS. In one of the pages, we used Vuetify elements such as vue-extension-panels and v-card. During development, we run using npm run dev and everything looks fine. I believe that all dependencies are installed correctly as it appeared fine during development.
Then, we deployed the web with Netlify. After deployment, Vuetify elements do not seem to appear correctly.
Below are the images that compare before and after deployment on Netlify:
Here is the packages.json:
So, it would be great if someone can explain why it is not showing properly or if someone knows netlify compatibility with Vuetify.
Thanks!

Answer 1

You are able to use any library with netlify. When you use $ vue add vuetify to add the dependency, everything should be fine. If you did install it otherwise, make sure to check the following things.
Vuetify is under dependencies in your package.json.
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0"
}
You correclty include it in your main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
vuetify plugin (src/plugins/vuetify.js)
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({});
You have a vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}