need help initialized Vuetify into my vue-cli 3 - vue.js

Question

I need help pre-rendering my site. So at first, I had a fully functional site. I wanted to add pre-render-spa plugin to the server. but everything got ruined. I needed to update the Vuetify framework too. and that messed it all up. Got a lot of errors but managed to deploy the server but when I do I get this "Vuetify is not properly initialized," so I need help initialized the new Vuetify into my CLI 3 vue.
My Main.js File.
Main.js
import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/style.css';
var VueScrollTo = require('vue-scrollto');
import VueAnalytics from "vue-analytics";
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
attempt: 1,
observer: true,
})
Vue.use(VueScrollTo)
Vue.config.productionTip = false;
Vue.use(VueAnalytics, {
id: "UA-89031274-11",
autoTracking: {
screenview: true
}
});
new Vue({
router,
store,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
vue.config.js
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports.plugins.push = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
inject: false
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, './dist'),
routes: ["/"]
}),
new VuetifyLoaderPlugin()
]
}
};
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/styles/main.sass'
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi'
},
})
So this is all the file that come to relate with the pre-rendering and vuetify. I tried to reinstall vuetify and vue-cli and npm install nothing has fixed the problem that vuetify is not loading.
I saw that vuetify updated their installing documents and they said to include vuetify before the $mount("#app");
in this case the build just keep going forever and doesn't stop.
new Vue({
router,
store,
vuetify,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
Greatful for the help.

Answer 1

In main.js changed
import './plugins/vuetify'
to
import vuetify from './plugins/vuetify'**
and then add it into new Vue instance like this:
new Vue({
...
vuetify,
...
}).$mount('#app')
for example, main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
and vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
iconfont: 'md',
theme: {
primary: colors.green.darken1,
secondary: colors.green.lighten4,
accent: colors.green.darken3
}
})