New Page

Vue

To add a new page to the template, you will need to create a new component inside the src/views directory and specify the route for this component in the vue-router module through the router/index.ts file. Here's an example:

<!-- 
    src/views/NewPage.vue 
-->
<template>
    <div class="page">
        <h1>New page</h1>
    </div>
</template>

// router/index.ts
const router = createRouter({
    ...
    routes: [
        ...
        {
            path: "/new-page",
            name: "new-page",
            component: () => import("@/views/NewPage.vue"),
            meta: { title: "New Page" }
        }
    ]
})
export default router

Navigate to http://localhost:5173/new-page and you will find the rendered content of NewPage.vue file.

At this point, you can choose to make the page visible within the menu by modifying the file src/app-layouts/common/Navbar/items.tsx as follows:

// src/app-layouts/common/Navbar/items.tsx
export default function getItems(): MenuMixedOption[] {
    return [
        ...,
        {
            label: () =>
                h(
                    RouterLink,
                    {
                        to: {
                            name: "new-page"
                        }
                    },
                    { default: () => "New Page" }
                ),
            key: "new-page"
        }
    ]
}

Nuxt

If you are using Nuxt, you will need to place the new page in the pages/ directory, and you won't need to declare any routes explicitly since Nuxt provides file-based routing. This enables you to create routes within your web application using Vue Router under the hood.

Pages are Vue components and can have any valid extension that Nuxt supports (by default .vue, .js, .jsx, .mjs, .ts or .tsx). Nuxt will automatically create a route for every page in your pages/ directory.

By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.

This file system routing uses naming conventions to create dynamic and nested routes:

pages/
--| about.vue
--| index.vue
--| posts/
----| [id].vue

// Generated Router file
{
    "routes": [
        {
            "path": "/about",
            "component": "pages/about.vue"
        },
        {
            "path": "/",
            "component": "pages/index.vue"
        },
        {
            "path": "/posts/:id",
            "component": "pages/posts/[id].vue"
        }
    ]
}