I’m using VueJS with the Vue Router and a js uniform module to modify form elements like select, checkboxes, etc to wrap these elements in a new element to improve the way we can style them. How can I efficiently execute this module after I changed route and my components are mounted? I could manually initialize the module in the
Tag: vue-router
How to make routes case sensitive in Nuxt
I use nuxt.js + vue.js. I need to create case sensitivity of routers. I found the following property: caseSensitive. I’m trying to put it into nuxt.config but it doesn’t work, the transition is possible by links in upper case. If I directly change the file ~project/.nuxt/router.js, everything works correctly. Help me to figure it out. Answer Your code seems to
Vue’s transitions don’t work when you refresh the browser?
Vue’s Transitions don’t seem to work when you refresh your browser. For instance, when I click to go to http://myvue.com/#/foo I get the transitions and all the console logs. But I don’t get the transitions and the logs when I refresh my browser on http://myvue.com/#/foo Any ideas? Answer
Callback function in beforeRouteEnter is not triggered
I have simple routes: /follower/:token/edit and /follower/new When I move from the first one to the second one by $router.push(‘/follower/new’) befoureRouteEnter hook is triggered but callback function inside ‘next’ function does not (problem does not exist when I go from different routes or reload page). Do you know what can be wrong? Vue: 2.5.17 Vue-router: 3.0.1 Regards Answer If you
Access LocalStorage in Middleware – NuxtJs
Well, I’m starting with nuxt and I have following routes: I want to protect the /dashboard, but only for users logged in with a token in localStorage. The simplest way I thought of doing this was by creating a /middleware/auth.js and registering it in the /dashboard/index.vue component. But I cannot access localStorage within a middleware, because LocalStorage is client-side. I
How to prevent any routing before some async data (in Vuex store) has loaded?
In my application I need some data to be loaded inside the VueX store before routing starts (for example user sessions). An example of a race condition would be the following: In this situation the route guard might be executed before the user had been received from the server. Using conditional rendering did not help as the route guards are
In Vue.js how to use multiple router-views one of which is inside another component?
I have a Vue.js single page application where there is a main navbar that uses <router-view/> to render different pages. Something like this: In one of those pages I have a sidebar that has more navigation links (that are using <router-link/> just like the main navbar. Something like this: When I click on the sidebar navigation links I want the
How to pass parameter to vue.js router in a method function?
I’m trying to send ‘joke.id’ as parameter to the router: The relevant route is: However I get this in the console: Module build failed: SyntaxError: Unexpected token How can I fix this? Answer There’s no need for curly braces inside the push function. Your code should be like this:
How to add external JS scripts to VueJS Components?
I’ve to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don’t want to load these files at the beginning itself. The payment gateway is needed only in when user open a specific component (using router-view). Is there anyway to achieve this? Thanks. Answer A simple and effective way to
Vue-router error: TypeError: Cannot read property ‘matched’ of undefined
I’m trying to write my first Vuejs app. I’m using vue-cli and simple-webpack boilerplate. When I add vue-router links to my app component I get this error in console Error in render function: “TypeError: Cannot read property ‘matched’ of undefined” Here is my code: App.vue main.js routes.js Answer The name when you add it to Vue must be router. If,