Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1023 of the free egghead.io lessons, plus get Vue.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

1:08 Vue.js lesson by

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

A hidden page is a page that you create that starts with an underscore, we'll call this user view that had a template in there with the div of H1 saying, "Find me." If I try and navigate to this _user, we'll get our 404, or just user I'll get that same 404.

You can use these hidden pages to route to in your next config. In my config I'll configure the router which is an object which has routes inside of it. This is an array. This array has objects with that path. The path can just be /user, and then a component to map to.

Our component will be pages/_user. Now I'm going to hit Save, and I refresh on my user URL. We can find and display the user view hidden page at this user URL, because we configured our router to have a route with the path of user and a component of _user.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?