Jamstack Explorers

Get Started with Nuxt with Debbie O'Brien

Nuxt Routing and Links

Nuxt.js gives us automatic routing. In other words, all we have to do to have routing in our application is to create vue files in the pages folder. Let's create an about page. We can copy what is on our index page and paste it into the about page. Let's remove the buttons and change the text to About.

Now if we go to our browser you will see we have prettier errors. Ermm that's not good.

If you have added prettier and your editor isn't set up to fix prettier issues on save then you can open vs code settings. Search for on save and activate the Format on Save. Then every time we save the file it will auto fix our prettier issues.

OK let's see how routing works. In our browser, we can type slash about to get to our about page. Pretty cool right. So How is this working?

Remember in the last lesson I said the .nuxt directory is what Nuxt uses to build your application in dev mode. Well, let's have a look at what's inside.

Can you see we have a router.js file?

This is automatically created for us. Any time we create a new route it is automatically added here. You will also see that our pages are code split and the webpack chunk name is the name of your page.

If you are not familiar with how webpack works then don't worry because you don't have to. Nuxt does it all for you.

But what is code splitting exactly? By code-splitting we are splitting our code into different bundles. Imagine our about page had lots of JavaScript. We don't want to load that on the home page as not only will that slow down the home page but also the user may never click on the about page so why load it if it isn't necessary. With code splitting, we only load the JavaScript that is needed for each page. Let me show you.

Let's go back to the home page. open our network tab in the dev tools and select JS. Now let's refresh the page and you will see the JavaScript needed for this page to load. You will see a runtime.js and app.js but what we want to concentrate on is our index.js. This is the webpack bundle for our home page. You will notice that there is no about.js. Let's type slash about in our url and tada the about.js file is loaded. It is only loaded if we actually visit the page. This is how code splitting works. And all we had to do to get that working was to add a vue file in our pages folder and Nuxt does the rest. Pretty cool eh.

And that's it. mission complete. Hang on a second. We don't really want our users to have to type the page in the browser URL every time we want them to go to a new route.

To navigate between pages we use the <NuxtLink> component. This component is included with Nuxt and works similar to the <a> tag except that instead of using href to link to the page we use to.

Let's add a NuxtLink in our about page that links to the home page. Remember home is the index page so we just need to use a slash to link to the index and not slash home. Let's also add a NuxtLink to our home page that links to the about page.

Let's check it out in the browser. Clicking the about link brings us to about page and the home link brings us to the home page. Much better. But hang on. My page doesn't seem to be code splitted now. it is loading the about page on the index page. What?

Remember in the first video how I told you that Nuxt prefetches pages for you for better performance. Because we added a link to the about page Nuxt will prefetch that page so it is ready to load in case the user wants to click it. First, all the javascript for the index page is loaded and then once we are not on a slow 3g connection Nuxt will prefetch the pages that are linked to from this page so that the JavaScript is ready to load when the user clicks the link. And yes this is all done for you so you don't have to worry about it. Nice.

In the next lesson, let's take a look at dynamic routing.


your progress