0

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.

0 Answers0