What is the difference between these two options when importing VueRouter?
import router from './router'
const app = new Vue({
el: '#app',
router,
});
vs
Vue.use(VueRouter);
I understand that Vue.use installs a plugin, is it necessary when passing it into my Vue instance constructor?
Your first example is passing a router definition object to the Vue instance. Your second example is registering the VueRouter plugin.
The VueRouter plugin needs to be registered to Vue via Vue.use(VueRouter) prior to passing the router object.
If you are confused why your first example works, even though you haven't registered VueRouter, I'd expect that Vue.use(VueRouter) is being called in the router.js file being imported.
Related
I'm totally a newbie in front end struggeling to wrap my head around it.
I have a question in Vue, for which I could't find answer anywhere: What does the 'vuetify' object here mean in the Vue constructor? I do know what veutify is, but why is it passed to the Vue constructor?
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
I have checked the Vue document https://012.vuejs.org/api/options.html
Every option has it's reserved name, like data, methods etc. But there are no definition of passing a 3rd party library or object to it.
Can anybody help me with this?
you can definitely pass custom or 3rd party options/library so you can use them in your Vue Application.
https://012.vuejs.org/api/instance-properties.html
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);
Importing vuex file with different name other than store (like "test" here). I cannot access vuex modules in Child Component like " this.$test ". How can I solve this. I need to make vuex import name other than store and accessing in child component with "this.$test" .
import {test} from './vuex/store.js';
const app = new Vue({
el: '#app',
test
});
Any help will be highly appreciated.
Assuming your store.js has a named export store:
Just use as:
import {store as test} from './vuex/store.js';
If that doesn't work, your store.js probably only has a default export. In that case, just omit the curly braces and proceed as you tried:
import test from './vuex/store.js';
You can do it like this.
import storeMessagerie from './store/store-messagerie'
new Vue({
el: '#messagerie',
components: { Messagerie},
store : storeMessagerie,
router
});
source : https://vuex.vuejs.org/guide/#the-simplest-store
Is it possible to access the VueRouter outside of Vue components.
I've tried importing Vue in a JavaScript file. In this file I can access Vue.http but not Vue.router or Vue.$router. The last 2 return undefined.
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from './store'
import * as rootUrl from './config/rootUrl'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
const router = new VueRouter({
mode: 'history',
routes: routes
})
new Vue({
store,
router,
}).$mount('#app')
Vue.http.get(rootUrl.url, {Accept: "application/json"}).then(response => {
let data = response.body
store.commit('SET_APP_DATA', { data: {
'title': data.title,
'peopleUrl': data.people,
'eventsUrl': data.events
}})
store.commit('SET_READY')
})
I've used it only from components but you could try following in case you're using common boilerplate where routes are defined under router/index.js then you just import it like:
import Router from '../router';
After it is possible to use it in code e.g.
Router.push('/mypage')
Not sure if it works but give it a try.
I resolved this by exporting my router instead of my routes in routes.js (now router.js)
export default new VueRouter({
mode: 'history',
routes: routes
})
Any file can then access the router with
import router from 'config/router'
You've defined your router with this statement
const router = new VueRouter({
mode: 'history',
routes: routes
})
So all you need to do to access it outside Vue is use
router.push(...)
Or whatever else you want to do.
If you want to use it in some other file, you may need to expose it on the window.
Add the router to your Vue constructor in the same file that you create and initialize your vue instance.
Vue.$router = router
Then use it as you first tried.
Vue.$router.push(...)
If using Typescript, you can augment the VueContructor to enable type checking and autocompletion.
mytypes.d.ts
import {VueRouter} from "vue-router/types/router";
declare module 'vue/types/vue' {
interface VueConstructor {
$router: VueRouter
}
}
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