Issues installing element ui plugin in vue3 project - vue.js

Hello guys please am having issues installing plugins on Vue js, so I tried installing Element Ui plugins on my project the installation was successful but in my Vs Code terminal it's bringing out this:
Compiled with 1 warning
warning in ./src/plugins/element.js
"export 'default' (imported as 'Vue') was not found in 'vue'
And I can't access my project on the localhost server it's just blank.
My Main.JS File
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";
createApp(App)
.use(store)
.use(router)
.mount("#app");
Package.Json
"name": "jargonapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.4.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"vue-cli-plugin-element": "~1.0.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

It seems that you're using element ui 2 with vue 3 which are not compatible, to work with Vue 3 you have to install the element ui plus
uninstall the current version :
npm uninstall element-ui -S
then install the latest one :
npm i element-plus -S
the main.js minimum content :
import { createApp } from "vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import App from "./App.vue";
createApp(App)
.use(ElementPlus)
.use(store)
.use(router)
.mount("#app");

Related

can not resolve Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined

I am working on vue js 2 version and I needed to download font-awsome library for styling purpose. However, when I downloaded the files it seemed not compatible with my project so I deleted/uninstalled them (the font-awsome libraries), and then all of a sudden when I tried to refresh the server I got this error in the console :
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is
undefined
Note that the code was working fine before installing and uninstalling the the font-awsome libraries, I don't really know what happened I also did try to ctrl + z to restore the main.js but is still showing the same error.
1- main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueFirestore from 'vue-firestore'
import JQuery from 'jquery'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import './assets/app.scss'
import swal from 'sweetalert2';
// import VoerroTagsInput from '#voerro/vue-tagsinput';
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
window.$ = JQuery
Vue.use(VueFirestore, {
key: 'id', // the name of the property. Default is '.key'.
enumerable: true // whether it is enumerable or not. Default is true.
})
Vue.use(VueFirestore)
Vue.config.productionTip = false
// Make BootstrapVue available throughout your project
// Vue.use(createPopper)
let app = '';
if(!app){
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
window.Swal = swal;
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
2- index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'books',
component: () => import('../components/books')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3- package.json:
{
"name": "vue-firebase-crud",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.22.0",
"core-js": "^3.8.3",
"firebase": "^8.10.0",
"jquery": "^3.6.1",
"sweetalert2": "^11.4.37",
"vue-firestore": "^0.3.30",
"vue-router": "^3.6.5",
"vue2-editor": "^2.10.3"
},
"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-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"node-sass": "^7.0.3",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
4- error in console:

vue js - Cannot read property 'use' of undefined

I'm using vue js 3, but im taking this error. I try to use router.
my main.js file is in here:
import { createApp } from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' // i added this
import Vue from 'vue'; // and this
Vue.use(VueRouter); // and this
createApp(App).mount('#app')
my package.json file is in here:
{
"name": "router",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^3.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Where am i wrong? The error message is:
Uncaught TypeError: Cannot read property 'use' of undefined
If you help me i will be glad.
First you've to follow my answer here to install the correct version of vue router,
then you should use the correct syntax of vue-router 4 which is compatible with vue 3 :
import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home,//shsould be imported
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
createApp(App).use(router).mount('#app')

Failed to mount component: template or render function not defined. found in ---> <Library Component> from library to project through npm pack

I am trying to import one of my local vue library component in vue project. Created library components and installed in project using npm install dialogue-box-0.1.0.tgz, its a local vue library not published to npm.
Below is library package.json
{
"name": "dialogue-box",
"version": "0.1.0",
"private": false,
"main": "dist/dialogue-box.common.js",
"files": ["dist/*", "types/*"],
"types": "./types/index.d.ts",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib": "vue-cli-service build --target lib --name dialogue-box './src/index.js' && npm pack",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Below is the index.js file of my library
import App from './App.vue'
import AlertComponent from './components/AlertComponent.vue';
import HelloWorld from './components/HelloWorld.vue';
export default {
App,
AlertComponent,
HelloWorld
}
Created index.d.ts stating as below
declare module "dialogue-box";
When i imported the HelloWorld Component in my actual project template and ran server getting below error.
enter image description here
Issue with not properly configured to a library.
Please use below link, have configured properly and able to integrate the local build vue library to any other vue project.Follow the Readme in git to configure in any project.
https://github.com/MohanaDevarasetty/dialogue-box.git

VIcon causing jest test to fail (Vue2/Vuetify3)

This is a Vue 2 JavaScript application:
VIcon causing jest test to fail and present this error:
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'component' of undefined"
found in
---> <VIcon>
<VCheckbox>
<Anonymous>
<Root>
I created this app with the Vue cli tool and used vue add to add the plugin for Vuetify. I'm also using PUG for vue template template, and SCSS instead of css (Node-sass). This might be due to the jest setup which will be provided below. I followed an online setup for ignoring some files and collecting coverage.
module.exports = {
preset: '#vue/cli-plugin-unit-jest',
setupFiles: ['./tests/setup.js'],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
'**/tests/int/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
transform: {
".+\\.(css|styl|less|sass|scss|png|jpg|jpeg|mp3|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest",
"^.+\\.js?$": "babel-jest"
},
snapshotSerializers: ['jest-serializer-vue'],
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/App.vue',
'!src/plugins/*',
'!src/router/*',
// testing this later
'!src/store/*',
'!src/store/modules/*',
],
};
The jest inner setup file just adds vuetify:
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Here is the package.json to see what versions I'm using:
{
"name": "client2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit --coverage --watchAll",
"test-ci": "vue-cli-service lint && vue-cli-service test:unit && vue-cli-service --mode development --headless",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-notification": "^1.3.20",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-pug": "~2.0.0",
"vue-cli-plugin-vuetify": "~2.0.9",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
}
}
and the test:
import TriBox from '../../src/components/UIContainers/TriBox.vue';
import { createLocalVue, mount } from '#vue/test-utils';
import Vuetify from 'vuetify';
describe('<TriBox /> Unit Tests', () => {
let wrapper;
const localVue = createLocalVue();
localVue.use(Vuetify);
beforeEach(() => {
wrapper = mount(TriBox, {
localVue,
});
});
it(`renders to screen`, () => {
expect(wrapper.exists).toBeTruthy();
});
});
and the component:
<template lang="pug">
.box-container
.left
v-checkbox
.middle
p hello
.right
v-icon mdi-trash-can
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
I can't find a specific document pertaining to this being a known bug with Vuetify and Vue2. Anyone have a clue as to how to solve this? I'm thinking it has to do with the jest setup file or how I'm setting the test up and adding vuetify to the local vue. But any suggestions would be helpful.
Based on Vuetify's Jest setup docs:
Don't use localVue.use(Vuetify) because you've already called Vue.use(Vuetify) in the Jest setup file.
Along with localVue, pass vuetify as a new instance of Vuetify to mount():
const localVue = createLocalVue()
let wrapper
beforeEach(() => {
wrapper = mount(TriBox, {
localVue,
vuetify: new Vuetify(),
})
})

Use BootstrapVue on every component in Vue.js

I am making a Vue.js Webapp. I am using raw Vue.js with BootstrapVue and SCSS. The scss styles work globally after I imported them in the app entry point, which in my case is the main.js file in the src folder of the project. But the BootstrapVue styles do not work anymore when I use them in any other .vue file except the main file "App.vue".
This is my vue.config.js file:
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
sass: {
prependData: `
#import "src/scss/_variables.scss";
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
`,
}
}
}
};
And this is my main.js file and therefore the entry point of the app:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "./scss/global.scss";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
render: (h) => h(App),
}).$mount("#app");
I imported BootstrapVue in my global.scss additionally. I did try to import my global.scss file in the component's style tag, I tried to import BootstrapVue directly in my component's style tag but that didn't work either.
So I am basically asking you for a solution to use BootstrapVue globally in any Vue.js Component. Maybe I made some mistake I did not notice. The error message in the console didn't really help me solve the problem.
EDIT:
This is my package.json file:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.14.0",
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
You're missing .scss on #import "node_modules/bootstrap/scss/bootstrap";. Should be #import "node_modules/bootstrap/scss/bootstrap.scss";