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>,
      | never
    >,
    
export interface _RouteFileInfoMap {
'resources/ts/pages/demo.vue': {
  routes:
    | '/demo'
  views:
    | 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>,
      | 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> },
      | never
    >,

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-next

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