Let say I have 2 plugins I want to use:
Bootstrap-Vue & Vue Analytics
I would import like so
import BootstrapVue from 'bootstrap-vue'
import VueAnalytics from 'vue-analytics'
How would I use them if one has parameters?
Is this correct?
Vue.use(BootstrapVue, VueAnalytics, {
id: 'UA-12345678-9'
});
Don't overthink it. Just call Vue.use twice.
Vue.use(BootstrapVue);
Vue.use(VueAnalytics, {
id: 'UA-12345678-9'
});
import BootstrapVue from 'bootstrap-vue'
import VueAnalytics from 'vue-analytics'
[BootstrapVue, VueAnalytics].forEach((x) => Vue.use(x));
This is what I usually use.
I will use:
const useArray = [Bootstrap-Vue, Vue Analytics];
useArray.forEach((item)=>{
Vue.use(item)
})
Related
I can't find any documentation on this.
Currently when I want to get an instance of the store or a route in 2.6 I do this:
import { ComponentInternalInstance, computed } from "#vue/composition-api";
const store = instance.proxy.$store;
const router = instance.proxy.$router;
Does anyone know how I can achieve the same in vue 2.7?
In Vue 2.7.x, you can use it like this:
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const router = proxy.$router
As it's discussed here.
I would like to import a single bootstrap component dynamically only when I need it.
Bellow syntax actually can do it but it does import all components.
So final module bundle after tree-shaking is 1.4MB (entire bootstrap library).
BNavbar: () => import('bootstrap-vue').then(module => module.BNavbar),
How can I change it to import only navbar to be equivalent of
import { BNavbarPlugin } from 'bootstrap-vue'
Vue.use(BNavbarPlugin)
I think the solution is to wrap it in another component like AppNavbar which imports the BNavbarPlugin the basic way import { BNavbarPlugin } from 'bootstrap-vue' Then import your wrapper component dynamically
AppNavbar: () => import('#/components/AppNavbar')
i have use realm sdk in vue2 with this syntax
// file scr/plugins/realm.js
import Vue from 'vue';
import {App} from 'realm-web';
Vue.prototype.realmApp = new App({id: 'artes-realm-vl12'})
//file scr/main.js
import './plugins/realm';
but in Vue3 this syntax is't working anymore can you please help me how to solve with this problem thank you
In main.js add that app as global property :
import {createApp} from 'vue'
import {App} from 'realm-web';
import app from './App.vue'
const myApp=createApp(app)
myApp.config.globalProperties.realmApp = new App({id: 'artes-realm-vl12'})
myApp.mount('#app');
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);
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