vue js - Cannot read property 'use' of undefined - vue.js

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')

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 warn]: Failed to resolve component: router-view

I'm a newbie to Vue.js and first time dealing with vue-router.
Just created a few files and for some reason I don't get to see the template. Compiled successfully but in the browser I get the following error: Failed to resolve component: router-view
main.js
import { createApp } from 'vue';
import VueRouter from 'vue-router';
import { store } from './store';
import App from './App.vue';
import AuthHandler from './components/AuthHandler';
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/oauth2/callback', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
App.vue
<template>
<div>
<AppHeader></AppHeader>
<router-view></router-view>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
export default {
name: "App",
components: {
AppHeader
}
};
</script>
components/AuthHandler.vue
<template>
<div>
... Please wait
</div>
</template>
<script>
export default {
name: "AuthHandler"
};
</script>
Here is the package.json
package.json
{
"name": "images",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"qs": "^6.10.1",
"vue": "^3.0.0",
"vue-router": "^3.5.2",
"vuex": "^4.0.2"
},
"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"
]
}
I resolved the problem in the following way. I believe the issue relay on the vue/vue-router versions. I hope this is the correct way :-)
main.js
import { createApp } from 'vue';
import App from './App.vue';
// import VueRouter from './vue-router';
import { createWebHistory, createRouter } from "vue-router";
import { store } from './store';
import AuthHandler from './components/AuthHandler';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/about', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
I was an idiot, I wanted to use 'vue add vue-router'. Of course it didn't work.
Vue add router
is the command.
npm install vue-router#4
only installs the package, won't add it to the app. If all is well, main.js should look like this:
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
Unfortunately they forgot to add it to the documentation...

BootstrapVue Components Not Being Converted into HTML

My components are rendering to the client page exactly as written in BootstrapVue, so I'm seeing <b-button> literally rendered to the client page:
<b-button data-v-3d7e72245 id="myBtn" variant="outline-primary">Click Me</b-button>
Shouldn't this be converted into standard HTML during the Vue render process and have the bootstrap classes added automatically?
I'm new to Vue, so I could be missing something obvious - but I'm not seeing any errors when running 'npm run build' in the command line, or in the web console/Vue dev tools.
Header.vue:
<template>
<header id="Header">
<ApplyBtn btnText="Click Me" />
</header>
</template>
<script>
import ApplyBtn from './header/ApplyBtn.vue'
export default {
name: 'Header',
components: {
ApplyBtn
}
}
</script>
Main.js:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer'
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '/scss/global/duo-theme.scss'
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.config.devtools = true
Vue.config.productionTip = false
// Custom widgets
Vue.component('applybtn', require('./components/global/header/ApplyBtn.vue').default);
window.Vue = Vue;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Package.json:
{
"name": "VueBS",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"acorn": "^8.1.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.10.0",
"css-loader": "^5.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"intersection-observer": "^0.12.0",
"jquery": "^1.12.4",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"typescript": "^4.2.3",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.3",
"vuetify": "^2.4.9"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-service": "^4.5.12",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "^5.3.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0",
"webpack": "^4.46.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try placing your Vue.use before you create your Vue instance.
Change this
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
To this
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App');

Issues installing element ui plugin in vue3 project

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");

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";