How to add Vuetify2 on VueJS2 project which created with create-vue

[apuatcfbd]

Discussed in #19825

^{Originally posted by apuatcfbd May 16, 2024}
I've an existing Vue2 project which was created using create-vue.
As the project is in vue2, to be able to use Vuetify I need to use v2. But the question is how to add that? In Vuetify v2 docs this is missing.
Any help would be highly appreciated :)

My Try:
Tried this

// plugins/vuetify.js
import { lightTheme } from '@/config/theme';
import VuetifyNumberInput from '@jzolago/vuetify-number-input';
import '@mdi/font/css/materialdesignicons.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';


Vue.use(Vuetify);

Vue.use(VuetifyNumberInput);

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  },
  theme: {
    dark: false,
    default: 'light',
    options: {
      customProperties: true,
      variations: false
    },

    themes: {
      light: {
        // ...lightTheme,
        primary: '#3f51b5',
        secondary: '#202e82',
        accent: '#8c9eff',
        error: '#b71c1c',
      }
    }
  },
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import './plugins/';
import './utils/appConstants';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';
import { appMixin } from '@/mixins/app';

// don't remove this. adds 'v-hscroll' directive
import '@koas/v-hscroll';

import { googleAnalyticsKey } from '@/config/app';

Vue.mixin(appMixin);

Vue.config.productionTip = false;

import VueAnalytics from 'vue-analytics';

Vue.use(VueAnalytics, {
  id: googleAnalyticsKey,
  router
});


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

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue2(),
    Components({
      resolvers: [
        VuetifyResolver(),
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  envPrefix: 'VUE_APP_',
  server: {
    port: 8081,
    open: true,
  },
  preview: {
    port: 4071,
    open: true
  }
})

package.json

{
  "name": "project-name",
  "version": "1.0.5",
  "private": true,
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "preuninstall": "npx only-allow pnpm",
    "dev": "vite",
    "build:test": "vite build --mode production.test",
    "build:stg": "vite build --mode production.stg",
    "build:live": "vite build --mode production.live",
    "prev": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@animxyz/core": "^0.6.6",
    "@animxyz/vue": "^0.6.7",
    "@jzolago/vuetify-number-input": "^0.4.0",
    "@koas/v-hscroll": "^1.0.3",
    "@splidejs/splide": "^3.6.12",
    "@splidejs/vue-splide": "^0.3.5",
    "@stripe/stripe-js": "^1.54.2",
    "@vue-stripe/vue-stripe": "^4.5.0",
    "@vueuse/core": "^9.13.0",
    "axios": "^1.6.8",
    "collect.js": "^4.36.1",
    "core-js": "^3.37.1",
    "dayjs": "^1.11.11",
    "debounce": "^1.2.1",
    "gmap-vue": "^3.5.4",
    "lodash": "^4.17.21",
    "mobile-device-detect": "^0.4.3",
    "nprogress": "^0.2.0",
    "primeicons": "^5.0.0",
    "primevue": "^2.10.4",
    "vue": "^2.7.16",
    "vue-advanced-cropper": "^1.11.6",
    "vue-analytics": "^5.22.1",
    "vue-html-to-paper": "^1.4.5",
    "vue-inner-image-zoom": "^1.1.1",
    "vue-router": "^3.6.5",
    "vue-snotify": "^3.2.1",
    "vue-zoom-on-hover": "^1.0.6",
    "vue2-google-maps": "^0.10.7",
    "vuetify": "^2.7.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@mdi/font": "^6.9.96",
    "@vitejs/plugin-vue2": "^2.3.1",
    "deepmerge": "^4.3.1",
    "eslint": "~8.30.0",
    "eslint-plugin-vue": "^9.26.0",
    "sass": "~1.32.13",
    "terser": "^5.31.0",
    "unplugin-vue-components": "^0.27.0",
    "vite": "^4.5.3"
  },
  "engines": {
    "node": ">=16.13.0 <21.0.0"
  }
}

With this setup project works in dev mode pnpm dev but fails (white screen) in production (build:*) & prev with following errors in console.

index-34a9a5a2.js:125 [Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068

If you're seeing "$attrs is readonly", it's caused by this
index-34a9a5a2.js:96 Error: Vuetify is not properly initialized, see https://v2.vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object
    at Z.beforeCreate (index-34a9a5a2.js:97:6158)
    at zi (index-34a9a5a2.js:96:19178)
    at vi (index-34a9a5a2.js:96:26898)
    at C._init (index-34a9a5a2.js:96:41876)
    at new Z (index-34a9a5a2.js:96:39432)
    at gA (index-34a9a5a2.js:5:35798)
    at init (index-34a9a5a2.js:5:34639)
    at g (index-34a9a5a2.js:5:52280)
    at b (index-34a9a5a2.js:5:51896)
    at m.__patch__ (index-34a9a5a2.js:5:56588)

index-34a9a5a2.js:96 TypeError: Cannot read properties of undefined (reading 'theme')
    at Z.isDark (index-34a9a5a2.js:97:6069)
    at ei.get (index-34a9a5a2.js:96:24880)
    at ei.evaluate (index-34a9a5a2.js:96:25759)
    at Z.isDark (index-34a9a5a2.js:96:38686)
    at Z.<anonymous> (index-34a9a5a2.js:96:24733)
    at ei.get (index-34a9a5a2.js:96:24880)
    at new ei (index-34a9a5a2.js:96:24819)
    at C.$watch (index-34a9a5a2.js:96:42671)
    at bl (index-34a9a5a2.js:96:38870)
    at index-34a9a5a2.js:96:38365

index-34a9a5a2.js:96 TypeError: Cannot read properties of undefined (reading 'rtl')
    at Z.render (index-34a9a5a2.js:97:6484)
    at C._render (index-34a9a5a2.js:96:44826)
    at Z.N (index-34a9a5a2.js:96:75486)
    at ei.get (index-34a9a5a2.js:96:24880)
    at new ei (index-34a9a5a2.js:96:24819)
    at C (index-34a9a5a2.js:96:75500)
    at ht.$mount (index-34a9a5a2.js:96:75711)
    at init (index-34a9a5a2.js:5:34650)
    at g (index-34a9a5a2.js:5:52280)
    at b (index-34a9a5a2.js:5:51896)
```</div>