How to create a new page

Our template uses unplugin-vue-router plugin to auto generate route types base on your route files to provide autocomplete for vue-router.

To create a new route add a file to the src/pages directory. It will be automatically available as a route.

TIP

You can inspect all the generated routes in the vite dev tool.

Creating a new page /contact-us

1. To create a new page, navigate to the src/pages directory and create your new file: src/pages/contact-us.vue

<template>
  <h1>Contact us</h1>
</template>

/contact-us route will be auto generated.

Nested Routes /dashboard/analytics

To create a nested route like /dashboard/analytics, we need to create dashboard directory and then create a new file named analytics.vue inside it as below:

📂 pages
 └── 📂 dashboard
     └── analytics.vue

Now visit /dashboard/analytics route to see the route is auto generated based on your directory/file name. ✨

Dynamic URL /users/<id>

Dynamic routes are represented by square brackets. Directories and pages can be dynamic.

TIP

This is referred to as a dynamic route in vue-router terminology.

Creating dynamic routes is a breeze! 😅 For example, to develop a dynamic route like /products/<id>, where id can be any integer, simply follow these steps:

1. Create a new directory called products within the src/pages directory, and then add a new file named id inside that directory.

   📂 pages
   └── 📂 products
       └── [id].vue

2. Place the following content inside the [id].vue file:

<template>
  <div>
    <h1>Products</h1>
    <p>product id: {{ $route.params.id }}</p>
  </div>
</template>

Now, if you navigate to /products/1 it will render product id: 1.

404 page - Catching all routes

We provide users with a customizable notice when they enter an incorrect URL, such as a 404 page, ensuring a user-friendly experience.

Square brackets with an ellipsis inside indicate catch-all routes.

📂 pages
└── [...all].vue (/non-existent-page)

The following content in the src/pages/[...all].vue file will be presented when you visit any URL you haven't built.

<template>
  <div>
    <p>Page not found (404)</p>
    <RouterLink tag="p" to="/">Back to homepage</RouterLink>
  </div>
</template>

Using different layout

By default, the pages you create will be displayed in the default layout (src/layouts/Default.vue), which contains a header and vertical navigation. However, you can use another predefined or custom-made layout in this directory.

To do this, Update your file as follows:

<template>
  <div>
    <p>Page not found (404)</p>
    <RouterLink tag="p" to="/">Back to homepage</RouterLink>
  </div>
</template>

<script setup>
</script>

<route>
  {
  meta: {
  layout: "error"
  }
  }
</route>

Plugin docs

The two plugins listed below are used by Vue to automatically construct routes and wrap layouts:

• vite-plugin-pages
• vite-plugin-vue-layouts

Please read the official documentation for both plugins by visiting the two URLs provided above.

Route Meta

Using meta enhances route management and provides flexibility for implementing features based on route-specific requirements.

<route>
    {
        meta: {
        layout: String, // Your preferred Layout @values: default, error, blank
        authRequired: Boolean // Specifies whether a page requires users to be logged in for access.
        fixedHeight: Boolean, // Applies fixed-height styles to the page content, such as in email and chat pages.
        noBackToTop: Boolean, // Determines whether the 'Back to Top' button should be displayed on the page
        excludeAnimation: Boolean // Checks whether the route should include transition animations.
        navActiveLink: String, // navActiveLink is a meta attribute that keeps a navigation link active for related sub-pages.
        // For example, when you’re on the TicketDetails page at (/ticket/:id), the ticket nav item (/ticket) remains active in the sidebar, showing that you’re still within the Ticket section.
    }
    }
</route>