Dynamic routes

You can create a dynamic route by wrapping the page file name in square brackets:

Then you can access any route and get the url parameter with the @vueuse/router useRouteParams composable:

pages/[id].vue

<template>  {{ userId }}</template><script setup>  import { useRouteParams } from '@vueuse/router'  const userId = useRouteParams('id')</script>

Will generate:

Then, you can use the generated userId within an API call.

Creating a dynamic page will overwrite the "not found" behavior on its nesting level. For example, if you create a [file].vue inside the /pages/posts/ folder, there will be no 404 fallback for the route /post.