Create New Page

How to Create a New Page

Here is the example on how to create your custom page and add it to the leftsidebar menu, breadcrumbs and also meta tag.

1. Create a new folder in `src/views`. ex. newPage, and then create a vue file in `src/views/newPage` with name `index.vue`

Example :-

Create one folder in components , name of new page and it will have utils.ts and index.vue file.

- In utils.ts file it will have breadcrumbs.
import { BreadcrumbType } from "@/app/common/types/breadcrumb.type"; export const breadcrumb: BreadcrumbType[] = [ { title: "main-folder-title", disabled: false, }, { title: "page-name", disabled: true, }, ];

- In index.vue file it will have all you code. Initially it can have code as per below,
<script lang='ts' setup> </script> <template> </template>

Note: In project we have used option API. And we have added typescript support to it so we need to add lang='ts' for typescript support and setup for optionAPI.

Components

In src/views/newPage/index.vue file it will import above component and utils.

<script lang="ts" setup>
import { breadcrumb } from "@/components/newPage/utils";
import NewPage from "@/components/newPage/index.vue";
</script>
<template>
    <Breadcrumb title="NewPage Title" :items="breadcrumb" /> 
    // It will use global component of breadcrumb and set data using breadcrumb passed in items. 
    <NewPage /> // Entry page component for new added route
</template>

2. How to add new route ?

You can easily add, change or remove any route by simply making changes described below:

1. Open src/components/layouts/utils.ts file, add your route in menuItems. E.g.

If You are adding new route then add new object into array as per below

{
    label: "name", // it will translate by default, so add key directly here
    icon: "icon-name", 
    link: "/link-name",
},

If You are adding new route with subitem then follow below code,

{
    label: "parent-label",
    icon: "icon",
    id: "parent-id",
    prefix: "prefix-value", // if you have submenu items to it
    subMenu: [
        { 
            label: "child-label", 
            link: "/link-to-child-route" 
        },
    ]
},

If there is 3rd level nested item is also there then you can add subMenu in that 2nd level route.

Our next task is to add this in route. We are lazy loading all components to reduce load for application on load time.

{
    path: `route-path`,
    name: "NewPageComponent", // It should be unique
    component: () => import("@/views/newPage/index.vue"),
    meta: { 
        title: "Title", 
        authRequired: true, 
        layout: DefaultLayout // or use AuthLayout for auth pages
    },
},

Note : you don't need to restart the development server in order to see the menu changes getting in effect

3. Add a navigation in the layouts

It will add route to all layouts i.e vertical, horizontal, two column. For more details, check the Layouts page to see how to add menu item in your template.

For adding menu item :- src/components/layouts/utils.ts
For adding route :- src/router/routes.ts

Create New Page

How to Create a New Page

1. Create a new folder in src/views. ex. newPage, and then create a vue file in src/views/newPage with name index.vue

2. How to add new route ?

3. Add a navigation in the layouts

1. Create a new folder in `src/views`. ex. newPage, and then create a vue file in `src/views/newPage` with name `index.vue`