vue 2.6.14 vuetify 2.6.9
How do I plug vuetify into a vue application? I trying import my project in another project how microfrontend application, but something not working
how i went this step-by-step:
package.json
{
"name": "@site/site",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.8.3",
"js-cookie": "^3.0.1",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.9",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0",
"vue-slick-carousel": "^1.0.6",
"vue-social-sharing": "^3.0.9",
"vue-the-mask": "^0.11.1"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"material-design-icons-iconfont": "^6.1.1",
"prettier": "^2.4.1",
"sass": "~1.54.9",
"sass-loader": "^13.0.2",
"vue-cli-plugin-single-spa": "~3.3.0",
"vue-cli-plugin-vuetify": "~2.5.5",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
site/main.js
import Vue from "vue";
import singleSpaVue from "single-spa-vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueSocialSharing from "vue-social-sharing";
Vue.config.productionTip = false;
Vue.config.devtools = process.env.VUE_APP_IS_DEV === "true";
Vue.use(VueSocialSharing);
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render(h) {
return h(App);
},
vuetify,
router,
store,
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
You are trying to import it from plugins, but you probably didn't create file in plugins
import vuetify from "./plugins/vuetify";
Create a plugin file for Vuetify, src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Use opts
object to customize themes if you want