Archive search

Find the stories you need

vue-router

Extending Vue Router Links in Vue 3

Easily handle both internal and external links in Vue 3 by wrapping the router link component in your own custom AppLink component.

Vue Router v4 is officially stable!

Vue Router 4 is officially stable!

Redesign the position object returned by `scrollBehavior` · vuejs/rfcs

New Vue-Router RFC that aims at changing the way scrollBehavior will work in the new version of Vue-Router. Here is the full explanation.

#12: Enjoy The Vue: Vue Router with Eduardo San Martin Morote

This week we are joined by Eduardo San Martin Morote, who is from Ecuador, but currently lives in Paris. He is a Freelance Front-end Developer and spends much of time on Vue.js and more specifically on Vue Router. Tessa, Chris, and Ari have a bunch of questions for Eduardo dealing with Vue Router, recent changes happening with it, problems with it, and he talks about what it’s like to be the core maintainer of it.

Change active and exact-active behavior for router-link by posva · Pull Request #136 · vuejs/rfcs · GitHub

The RFCs of Vue core usually get more traction than those of supporting tools like the Vue-Router. Here’s a very important decision to be made for the future of our official router package and your voice matters. Please read it and leave your vote using 👍 /👎 or contribute to the discussion.

Vue-router — props — 1/2

Here’s a short article with a few useful tips to working with Vue-router and component props. Did you know – for example – that you can automatically transform things like this.$route.params.id into an id prop? Read the article to learn how!

Popup Overlays with Vue Router and Portal Vue

Most apps introduce modals at some point. It’s usually controlled by the internal state of the parent component or from Vuex. However, what if we want to persist the fact that the modal is open even when the page is reloaded? In that case, we got to tie it to the URL and thus to the vue-router. Read this article to learn how.

Vue.js Router Performance

At this point lazy-loading routes in Vue-Router should probably be a pretty common practice. Hence, it’s how Nuxt.js works by default. However, there’s more that can be done to further optimize the performance of your Vue apps. In this article, Filip Rakowski is talking about a webpack trick that can improve how your vendor code is being handled by using the splitChunksPlugin.

Release v3.1.0 · vuejs/vue-router · GitHub

A new version of the Vue-Router has been released with several fixes and improvements. It also comes with a scoped-slot that is now available on the Router-Link component. Read the corresponding docs to learn how to use it.

Triggering events from Vue Router views

Last week, we mentioned a tweet by Dan Vega that highlighted the fact that you can listen to events emitted by route-level components. If you’d like to read some more explanation on why this is possible (and what more) check out this follow-up article!

Vue-Router RFCs

Vue-Router might be receiving some breaking changes regarding the exact functionality in the coming release. Additionally router-link might finally get a scoped slot!

Check out the 3 new RFCs related to the router.

Whoops! We couldn't access this Tweet.

‘Go Beyond Static’ with Vue Router

Netlify is an amazing service that lets you deploy your Vue apps in mere minutes. However, it can be a little tricky to set it up with the Vue-Router’s history mode (the one without the # sign in your URL). If you ever struggled with that, here’s a quick tutorial on how to make it work quickly.

Vue.js: Using Vue Router Page Transitions

Vue transition component is a pretty useful tool to animate elements on your page. But you can also use them on your router views. But if you don’t really have the time to figure out how to make the best out of it, Orlandster has created the vue-page-transitions library which includes several predefined page transitions ready to be used.

Handling Dialogs with Vue Router

If you were ever curious of how you could use routing for modals / dialogs, this article is part of a series on Vue Router architecture that covers this scenario.

Yes, this is how to cache pages by URL with Vue, Vue Router and Keep Alive component

There is a less known functionality in Vue, that allows you to cache the component when it is being rendered and removed from the DOM. This is made possible thanks to the keep-alive abstract component. Instead of destroying the component instance it makes them simply inactive. This can be also used with dynamic components as well as with the router-view to cache specific routes. Check out this article to learn how to do that for custom route params.

How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase

Looking for a complete tutorial on how to build a Vue SPA that also utilizes Vuex, Vuetify and Firebase? Check out this article by Jennifer Bland.

Vue Route Component Hooks

Although routing might seems as a rather straightforward topic it can get quite complicated once your application requirements grow. Especially in universal (SSR) applications. Here’s an advanced article on the router lifecycle hooks / guards and which one to use for different kinds of actions, starting from permission checks to data fetching. Great write-up!

Accessible routing with Vue.js

Marcus Hermann is gathering strategies for making Single Page Applications more accessible, and in a blog this week he discusses how navigation around a SPA can be difficult for users on assistive devices. He builds functionality into Vue Router that may make it into a future release of the library.

Laravel 5.7 + Vue + Vue Router = SPA

Here’s an article for those of you who happen to work with or intent to start using Laravel, the PHP framework. In it, Aiden Koh explains how to set up a Vue single-page application with routing on top of the backend framework.

Vue Router — The Missing Manual

In this article Harshal Patil goes through some less discussed functionalities and design decisions of Vue-Router, and how it compares to other routing solutions used in different frameworks.