Create a new page

only create new file in resources/ts/pages directory and you will have new page with auto generated route.

Create demo page

Create a new file which is demo.vue in resources/ts/pages directory with the following content

<template>
  <p>This is about page</p>
</template>

It will auto register the route with /demo url in typed-router.d.ts. Navigate to that route and you will find the rendered content of demo.vue file.

// typed-router.d.ts file
'demo': RouteRecordInfo<'demo', '/demo', Record<never, never>, Record<never, never>>,

Subpath URL

To create a URL which has something like /dashboards/default, we need to create dashboards folder and have to place default.vue file inside dashboards folder.

Let's create a new folder named dashboards in resources/ts/pages directory. Inside this folder let's create a new file default.vue with the following content.

<template>
  <p>This is Default page.</p>
</template>

then it will generate route with the URL like this:

// typed-router.d.ts file
'dashboards-default': RouteRecordInfo<'dashboards-default', '/dashboards/default', Record<never, never>, Record<never, never>>,

Dynamic URL✌️

we want to create a page which can accept ids as parameter and we want to fetch data according to that id. This is called dynamic route in terms of vue-router.

Let's we want to create a dynamic route like /customers/<id>, where id can be any number.

For this create new folder named customers in resources/ts/pages directory and inside customers create a new file with the name [id].vue. Place below content inside this create file:

<script setup lang="ts">
const route = useRoute('customers-id')
</script>
<template>
   <h1>Extra page id : {{ route.params.id }}</h1>
</template>

Above code create new Route url which is like this:

// typed-router.d.ts file
'customers-id': RouteRecordInfo<'customers-id', '/customers/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,

With this, if you visit /customers/1 it will render Extra page id : 1. here, 1 is taken from URL.

If you visit /customers/2 then it will render Extra page id : 2. It is really very easy to create url using parameter.

Plugins

The following plugins auto-generate routes and wrap layouts in Vue.

• unplugin-vue-router
• vite-plugin-vue-layouts

Click the links above to view the plugins' official documentation.