I recently ran an npm update on my Vue/Laravel app just to upgrade my version of Bulma. Of course, this brought up a dozen vulnerabilities which I decided to fix, and of course this screwed up my whole app, mainly thanks to Webpack and Mix issues. I finally got it everything to compile again with only a few SASS warnings, but when I run the app I get the following error:
Uncaught TypeError: Vue.use is not a function
Google seems to suggest this is a problem when upgrading to Vue 3, however I am still on Vue 2 (2.6). Here's my app.js:
require('./bootstrap');
import VueRouter from 'vue-router';
import router from './router/routes';
import VueConfirmDialog from 'vue-confirm-dialog'
import SkeletonBox from './components/shared/SkeletonBox.vue'
import ValidationErrors from './components/shared/ValidationErrorComponent.vue'
import Vuex from 'vuex';
import storeDefinition from './store'
import Index from './Index'
window.Vue = require('vue');
Vue.use(VueConfirmDialog);
// init the Router
Vue.use(VueRouter);
// Init the Vuex store
Vue.use(Vuex);
const store = new Vuex.Store(storeDefinition);
Vue.component("skeleton-box", SkeletonBox)
Vue.component("v-errors", ValidationErrors)
const app = new Vue({
el: '#app',
router,
store,
publicPath: './',
components:{
"index": Index
},
beforeCreate(){
// call loadStoredState action in store.js
this.$store.dispatch('loadStoredState');
}
});
I have absolutely no idea what I need to do to get this working - can anyone help?
Related
I'm trying to migrate from vuetify 2.6 to 2.7 because of composition-api but I'm getting a lot of errors when trying to get properties of the Vue instance, for example I'm using vue with Vuetify and I have a separed "helper" to try to get the $vuetify instance but everytime I'm getting undefined even when I'm trying to get the property from a setup() in the App.vue I get undefined, same thing happened when trying to get the $route property of vue-router from the instance with getCurrentInstance() then only solution I had with the router was using an internal composable of vue-router/composables to get the route.
Another thing that also happens is that the getCurrentInstance() sometimes returns null.
My main.js looks like:
import Vue from 'vue'
...
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
...
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app')
./plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
preset
...
})
App.vue
<template>...</template>
<script>
import { getCurrentInstance } from 'vue'
export default{
setup(){
console.log( getCurrentInstance().proxy, getCurrentInstance().proxy.$vuetify )
// returns: {}, undefined
// sometimes returns null, undefined
}
}
</script>
versions:
"vue": "^2.7.11"
"#vue/cli-service": "~5.0.8"
"vuetify": "^2.6.11"
Anyone knows what it could be?, Thanks.
Edited: Can't reproduce in vue v2.7.12. I tried vue v2.7.11 and can reproduce your issue. There is a severe regression in v2.7.11, please upgrade your vue.
Here is a minimal example of v2.7.12.
https://stackblitz.com/edit/vitejs-vite-fjpdck
getCurrentInstance().proxy does return a VueComponent and getCurrentInstance().proxy.$vuetify gets the vuetify instance successfully.
By the way, the recommended way to get $route instance in setup is
import { useRoute } from 'vue-router/composables' // need vue-router v3.6
export default{
setup(){
const route = useRoute()
}
}
I am working in a crud with Laravel and Vue.js I have installed all dev devDependencies when I run NPM run watch me display this error as being:
In file app.js, I have included all dependencies:
import "./bootstrap";
import vue from "vue";
window.Vue = vue;
import App from "./components/App.vue";
import VueRouter from "vue-router";
import VueAxios from "vue-axios";
import axios from "axios";
import { routes } from "./routes";
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: "history",
routes: routes,
});
const app = new Vue({
el: "#app",
router: router,
render: (h) => h(App),
});
Can anyone help me with error above, how to solve it?
Did you add axios and vue-axios packages to package.json or did you install these packages? It looks you're not.
You need to install them with below;
npm i axios
npm i vue-axios
I seem to not be able to use axios in my vue project as it's saying that 'axios' is not defined when I try using axios.get() in my file for Home.vue. Am I doing something wrong in main.js where I configure it? Or am I missing something that needs to be added? Below is my code for main.js and it shows how I'm adding axios to my project.
import Vue from 'vue';
import GSignInButton from 'vue-google-signin-button';
import ElementUI from 'element-ui';
import axios from 'axios';
import './assets/element-variables.scss';
import locale from 'element-ui/lib/locale/lang/en';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(ElementUI, { locale });
Vue.use(GSignInButton);
Vue.use(axios);
Vue.use(ElementUI);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Edit: The solution for this issue for me was to install a vue plugin called vue-axios and follow the steps to configure here: https://www.npmjs.com/package/vue-axios
Try to add axios as instance global property instead of Vue.use(axios);:
Vue.prototype.$axios=axios
then you could use it in any child component like this.$axios.get()
learn more about adding-instance-properties
I am trying to import an npm package into my vue.js component. Specifically, I am trying to import ScrollMagic into my project, but I am getting it to be undefined.
I have seen people suggest previously that it should be in my mounted() hook, which I am doing but my import statements (I have tried both in main.js, and in the components tag but both have returned undefined variables. Any direction would be appreciated.
Script for my component:
<script>
import { ScrollMagic } from 'scrollmagic';
export default {
name: 'Scroller',
mounted() {
console.log(ScrollMagic);
},
};
</script>
And in my main.js
import Vue from 'vue';
/*
IMPORT STATEMENTS FOR MODULES GO HERE
*/
import sm from 'scrollmagic';
import gsap from 'gsap';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
Vue.config.productionTip = false;
/*
Usage statement
*/
Vue.use(sm);
Vue.use(gsap);
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
Maybe the scrollmagic package doesn't export a variable or function ScrollMagic, so it keeps getting undefined?
Have you tried:
import * as ScrollMagic from 'scrollmagic';
// OR
import ScrollMagic from 'scrollmagic';
I am using vue along with Laravel.
I have faced an error that says (intermediate value) is not a constructor.
Tried using vue-router for the first time with separate route.js file keeping all the routes in one js file.
Here is my main js file that uses vue router
app.js
window.Vue = require("vue");
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from "./route";
Vue.component("example-component", require("./components/ExampleComponent.vue").default);
const app = new Vue({
el: "#app",
router
});
The route.js looks like this
route.js
import VueRouter from 'vue-router'
let routes = [{
path: '/dashboard',
component: require('./components/Dashboard')
}]
export default new VueRouter[{
mode: 'history',
routes
}]
Did a research on the existing similar posts. But that didnt really help.
And most importantly, when I use the vue-router within the main app.js itself, everything just works very fine.