When I use the vue-router with my vue
let vueRouter = require('vue-router');
Vue.use(vueRouter);
I get this msg error:
TypeError: plugin.apply is not a function
plugin.apply(null, args);
When I remove, everything starts to work again.
Usually Vue.use is used in conjunction with import statements. Here's an example.
import VueRouter from 'vue-router';
class nameOfClass{
init(){
Vue.use(VueRouter);
}
}
Also, vue-router should be in the dependancies section of your package.json
Related
I've been trying to get storybook working with a Vue 2 + composition API project for a while now and I keep running into the error:
Unexpected error while loading ./ProductCard.stories.js: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
So I assume I need to include it before any file/story gets called.
When I try and import it into my storybook's main.js file like this:
import Vue from "vue";
import VueCompositionApi from "#vue/composition-api";
Vue.use(VueCompositionApi);
module.exports = {
//... storybook config
}
I get the console error:
import Vue from "vue";
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've also tried:
const Vue = require("vue");
const VueCompositionApi = require('#vue/composition-api');
Vue.use(VueCompositionApi);
Which appears to work but I still get the top error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
Does anybody know where I'm meant to import the composition API so it's loaded before it's called?
I've tried putting it in the preview.js file as well with the same error.
Whats causing it is the component ProductCard loads a composable called useUiStatewhich uses vue-composition-api.
I would have thought it's called vue.use already.
Anyone know a way to insert a telephone field with a country code dropdown similar to the one in the link for vue3?
https://www.npmjs.com/package/vue-tel-input
I had tried to use the package in the link but it throws the following error in console.
Uncaught (in promise) TypeError: selfHook.bind is not a function
attempted implementation:
main.js
import { createApp } from 'vue'
import VueTelInput from 'vue-tel-input'
const app = createApp(App);
app.use(VueTelInput)
app.mount('#app');
in the App.vue I just imported it like a component using the following code:
<vue-tel-input></vue-tel-input>
Someone posted on an open issue regarding Vue3 support for the library that they have created a Vue3 version of it: https://github.com/victorybiz/vue3-tel-input
I have tried it and it seems to work fine!
This library supports Vue 3 now. https://iamstevendao.github.io/vue-tel-input/documentation/next.html
npm install vue-tel-input#next
import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';
const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');
...
<template>
<vue-tel-input v-model="phone"></vue-tel-input>
></template>
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
Using vue-auth (vue-auth on GitHub) with the Axios HTTP driver I get the following error in the browser console:
TypeError: this.Vue.axios is undefined
main.js
import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import "./libs/vue-auth";
./libs/vue-auth.js
import Vue from "vue";
import vueAuth from "#websanova/vue-auth";
import bearer from "#websanova/vue-auth/drivers/auth/bearer";
import axiosHttp from "#websanova/vue-auth/drivers/http/axios.1.x";
import vueRouter from "#websanova/vue-auth/drivers/router/vue-router.2.x";
// Vue.axios = axios;
Vue.use(vueAuth, {
auth: bearer,
http: axiosHttp,
router: vueRouter
// ...
});
When removing the comment for Vue.axios = axios; it seems to work at first glance. So I thought moving Vue.axios = axios; to the main.js but then again it's not working.
Vue.axios can be assigned either manually or with vue-axios plugin. Since #websanova/vue-auth/drivers/http/axios.1.x expects it to exist on plugin initialization:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
...
Vue.use(VueAxios, axios)
Vue.use(vueAuth, ...)
Moving Vue.use(VueAxios, axios) to main.js won't work because it should be evaluated before ./libs/vue-auth is imported, and it cannot precede import according to JS specs. Vue.use(...) should either moved to main.js together, or they both should be located in ./lib modules.
I am testing with axios within a Vue application and the CLI. I've been using vue-resource and I could access it on all my components by simply passing it to Vue.use (VueResource). How can I achieve this with axios, so I do not have to import it into a component, but simply define it once in the main.js file?
In main.js you can just assign Axios to $http.
main.js
import Axios from 'axios'
Vue.prototype.$http = Axios;
By modifying the vue prototype, any vue instance will have the ability to call $http on this. (e.g. this.$http.get('https://httpbin.org/get')
Note: $http is the axios object now, so any method you can call on axios object, you can call on this.$http.
NOTE: When Vue module is installed as a package and not using through CDN then this approach works fine else if importing Vue from CDN then we have both options, first the answer here and second is to import Vue in main.js and then use Vue.prototype.{variable}=Axios
For VUE3, you need to add below code:
Syntax:
app.config.globalProperties.{variable} = value;
Example:
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
In your main.js or app.js
/**
* Importing libraries & componenets
*/
import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import Axios from 'axios';
/**
* Vue initialization
*/
const app = createApp({
components: {
Index
},
});
app.use(router);
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
app.mount('#app');
You can call the GET method same as VUE2 in your components: this.$http.get('https://httpbin.org/get')
For all those who implement from zero (whithout deprecated vue-resource), another simple and efficient way, the "Laravel way" too.
In CLI run: npm install axios
In main.js define:
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Accept'] = 'application/json';
and then you can use it in any component like this:
window.axios.get('https://example.com').then(r => console.log(r.data));
and capture r.data output
(if you use the Laravel routes instead of those of Vue you can use it like this: axios.get(url).then(...)
What worked for me in the end was this:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(router)
app.use(VueAxios, axios)
app.mount('#app')
And I used this library:
vue-axios