Skip to content
On this page

How to create a new page

Just create a new .vue file in src/views folder. For example you can use src/about.vue as a template.

WARNING

If you want to create a new page then you need to add the page to the src/router/index.js file.

Step.1 : Creating a new page

Create a new .vue file in the src/views folder. You can use src/about.vue as a template. and add the page to the src/router/index.js file. in Layout component.

vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>
js
{
  path: "/about",
  name: "About",
  component: () => import("../views/About.vue"),
},
js
{
    path: "/app",
    name: "Layout",
    component: () => import("@/Layout/index.vue"),
    beforeEnter: guard,
    children: [
        {
            path: "/about",
            name: "About",
            component: () => import("@/views/About.vue"),
        },

    ]
}

Step.2 : Adding a new page to the sidebar

Go to src/constant file and add the page to the menuItems array.

js
{
    title: "About",
    icon: "heroicons-outline:user",
    link: "email",
},

COPYRIGHT © 2022 Codeshaper, All rights reserved.