0

I have problems with the migration built from vue2 to vue3 and I have 2 questions about.

I changed my Global API in main.js and now I use app.use instead of Vue.use. With vue-router it works because I pass it to vue3 versions. With Vuex it works even if I have Vuex 3.6.2 version still, not compatible with Vue3 but thanks to migration build it seems to works. But I am not able to make it work for vuetify 2 and I cannot pass to vuetify3 version.

So the first question is, it possible for Vuetify 2 running on VueJS3?

If it's not possible, is it possible in VueJs3 using vue VueJs2 sintax for Global API in main.js so it will remain Vue.use instead of app.use? Maybe Vuetify will work in this case

and this is the error I have from console: Uncaught Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object

I try to import my vuetify.js into my main.js

This is my vuetify.js

import "@mdi/font/css/materialdesignicons.css";
import Vue from "vue";
import Vuetify from "vuetify/lib";

export const lightTheme = {
  Falmaprimary: "#682176",
  Next3RPprimary: "#0000B4",
  primary: "#0000B4",
  secondary: "#ffffff"
};
import Resize from "vuetify/lib/directives/resize";
Vue.use(Vuetify, {
  directives: {
    Resize
  }
});

const options = {
  theme: {
    dark: false,
    themes: {
      light: lightTheme
    }
  }
};

export default new Vuetify(options);

and this is my main.js


import { createApp } from "vue";
import App from "@custom/start.vue";

import store from "@store/erpstore";
import router from "@/router";

const app = createApp(App);

app.use(router);
app.use(store);
app.use(vuetify);

app.mount("#app");

This is my store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import api from "@store/modules/api";

export default new Vuex.Store({
  modules: {
    api
  }
  //strict: process.env.NODE_ENV === "development"
});

And this is my index.js for router

enter image description here

Tommi
  • 3
  • 2
  • `vuetify@^2` only works with `vue@^2`. If you want to upgrade to `vue@^3` you have to switch to `vuetify@^3`. But `vue@^3` works with Options API (typically associated with `vue@^2`), so you can switch components from Options API to Composition API gradually and it's not a mandatory change. However, it is recommended you do switch to Composition API, to benefit from all the performance upgrades made in `vue@^3`. Once you've switched all your project to Composition API, you can turn off Options API, which will result in a smaller bundle size. – tao Jul 31 '23 at 17:42

0 Answers0