I understand the concept of the new implementation as plugins as per this example: Vue 3, Uncaught TypeError: Vue.use is not a function But I'm unsure how to apply it to Google Charts and Vuetify as when I thought I converted it to the example, it says createCharts is not defined.
vuetify.js
import "@fortawesome/fontawesome-free/css/all.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import * as Vue from "vue";
import "vuetify/styles";
import { createVuetify } from "vuetify";
import colors from "vuetify/lib/util/colors";
import VueGoogleCharts from "vue-google-charts";
Vue.use(VueGoogleCharts); //HERE
Vue.use(Vuetify); //AND HERE
export default createVuetify({
icons: {
iconfont: "md" || "fa",
},
theme: {
themes: {
light: {
background: colors.blue.accent2, // Not automatically applied
},
dark: {
background: colors.blue, // If not using lighten/darken, use base to return hex
},
},
},
});
This is what I tried to convert it to which says create charts is not defined (it may be wrong so do correct me).
const charts = createCharts(MyCharts); charts.use(VueGoogleCharts);
const vuetify = createVuetify(VuetifyTheme); vuetify.use(vuetify);
This method is making me think I need to export it here like createVuetify() below that, however, the chart data is in Home.vue so that's not what I want to do.