Routing

We use Nuxt Routing, which generates our route using the pages/ folder.

The structure of our pages/ determines the url paths in our app.

Named paths

We can use the name of a file to determine it’s path.

Example

The component located at pages/profile.vue is what is rendered at the path https://tansy.app/profile

The name of the file is the route.

Path variables

in order to have dynamic variables in our urls, we name the file with brackets [].

Example

If we want to pass an id to load a specific appointment, we create a component file at:
pages/appointments/[id].vue

To use this route, set the id in the path:
https://tansy.app/appointments/wv3mx7hnmilgab3

Inside the component, we can access the variable using the name we set inside of the brackets:

import { useRoute } from 'vue-router'
const route = useRoute()
const appointmentID = route.params.id

We now have the variable id to fetch the correct appointment.

Static paths inside folders

Now a conflict arises: How can we use the /appointments route if it appointments is now a folder instead of a vue file?

We simply place a index.vue file inside the folder:
pages/appointments/index.vue

generates the same routing as
pages/appointments.vue

both being accessible at: https://tansy.app/appointments

Important

if you do have the folder, the {route}.vue file won’t work, so you need to move it to the {route}/index.vue file within the folder.