# 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  <a href="#creating-about-page" id="creating-about-page"></a>

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

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

It will **auto register the route** with `/demo` url in <mark style="color:red;">typed-router.d.ts</mark>. Navigate to that route and you will find the rendered content of `demo.vue` file.

```typescript
// 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 <a href="#subpath-url" id="subpath-url"></a>

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.

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

then it will generate route with the URL like this:

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

### Dynamic URL✌️ <a href="#dynamic-url" id="dynamic-url"></a>

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](https://next.router.vuejs.org/guide/essentials/dynamic-matching.html) 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 <mark style="color:green;">`customers`</mark> create a new file with the name <mark style="color:green;">`[id].vue`</mark>. Place below content inside this create file:

```html
<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:

```typescript
// 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 <a href="#dynamic-url" id="dynamic-url"></a>

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

* [<mark style="color:orange;">unplugin-vue-router</mark>](https://github.com/posva/unplugin-vue-router)
* [<mark style="color:orange;">vite-plugin-vue-layouts-next</mark>](https://github.com/loicduong/vite-plugin-vue-layouts-next)

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