Photo by Denys Nevozhai on Unsplash

A First Look at Vue Router in Vue3

Matt Maribojoc
Apr 6 · 5 min read

Managing routes is an essential feature for most single page applications. With the new version of Vue Router in alpha stages, we can already start checking out how it works in the next version of Vue.

A lot of the changes in Vue3 will slightly modify the way we access plugins and libraries, and this includes Vue Router.

We’ll be taking a look at using the alpha version Vue Router in conjunction with the current Vue3 Alpha release.

By the end of this article, you should know how to add Vue Router to your Vue3 projects and have a nice little example going!

Setting things up

So to start off, we’re going to be using the Vue3 Webpack preview posted by Evan You.

Let’s clone the repo with git clone https://github.com/vuejs/vue-next-webpack-preview.git

Then, to add the vue-router alpha to our project, we want to modify our package.json file.

Inside our dependencies, we want to add the following version of vue-router

Now, we can finally run npm install from our command line to install all of our dependencies.

The final setup we want to do is to actually create our router file and some views for it to map to.

Inside our src/ folder, we're going to add three files.

  • router/index.js
  • views/Home.vue
  • views/Contact.vue

Our router file will — you guessed it — contain our router and our Home/Contact views will just output a single word so we can see what’s happening.

Creating our routes

Okay — with everything ready to go, let’s start using Vue Router!

Simply put, the main difference in the Vue3 version of vue router is that we have to import new methods in order to get our code working. The most important of which are createRouter and createWebHistory.

Inside our router/index.js file, let’s import these two methods and our two views from earlier.

Next, what we want to do is create a routerHistory object using the createWebHistory method like this.

Before, we could just say mode: history to switch from hash to history mode, but now it's we do that using history: createWebHistory()

Next, we can actually create our router using createRouter. It accepts an object and we want to pass our routerHistory variable as well as an array of our two routes.

Finally, let’s just make our file export our router.

As you can see, from a high level, it’s still pretty similar to Vue2. But with all these changes allowing for better Typescript support and optimizations, it’s good to get familiar with the new methods.

Making our app use vue router

Now that our Vue Router file is actually set up, we can add it into our project. Previously, we could just import it and say Vue.use(router), but this is different in Vue3.

This is actually a great intro to how we create and mount our Vue application.

Inside our main.js file, you’ll see that we’re using a createApp method from Vue to actually create our project. In the default project, it's chaining the createApp and mount methods.

What we want to do is separate these methods like this.

Then, before we mount our app, we want to tell it to use our router file.

Finally, inside our App.vue file, let’s actually display our router-view and provide some router-links so that we can navigate around.

So now, if we click around, we’ll see that we can actually navigate between our two pages!

BUT if we try to go directly to our /contact route it doesn't work! We get some sort of error.

Luckily this is a really quick webpack fix.

Inside our webpack.config.js file, we want to enable our devServer to use the history api by changing our configuration so it looks like this.

Now, if we navigate straight to our Contact route, everything should work properly :)

Conclusion

We’re all done — we’ve successfully added vue-router into our Vue3 project. Most of the other features like navigation guards, handling scrolls, and such work mostly the same.

Here’s a link to the final Github repo from this tutorial. It’s a great template code if you want to have vue-router in your Vue3 testing area.

Once all of Vue3 is officially released, I’ll definitely write a more in-depth guide, but knowing how to add it is already a great way to start playing around in the new framework.

I hope you learned a thing or two and are as excited as me to start trying out some of the new features in Vue3.

Happy coding!


If you’re interested in learning more about VueJS click here to get a free Vue cheatsheet with all the essential code snippets for developers and click here to access our Vue3 Build Along Course.

A note from JavaScript In Plain English: We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at submissions@javascriptinplainenglish.com with your Medium username and we will get you added as a writer.

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store