# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://phoenixcoded.gitbook.io/able-pro/vue-laravel/create-a-new-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.