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 :-
-
Add pageHeader component. it's a common component, it's used to add breadcrumbs in your page.
- You have to pass 2 props here, first is title and second is item.
- the title prop refers to page title and the items array refers to page's breadcrumb item's title. and page title
-
Add MetaTags to give a html title to your page.
<script>
import Layout from "@/layouts";
import PageHeader from "@/components/page-header.vue";
import RightBar from "@/components/right-bar.vue";
export default {
data() {
return {
};
},
components: {
Layout,
PageHeader,
RightBar,
},
};
</script>
<template>
<Layout>
<div class="page-title-box">
<BRow class="align-items-center">
<BCol md="5">
<PageHeader title="NewPage" pagetitle="Pages" />
</BCol>
<BCol md="auto" class="ms-auto">
<RightBar />
</BCol>
</BRow>
</div>
// write your code here
</Layout>
</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/router/routes.js file,
declare your route. E.g.
{
path: "/newpage/index",
name: "index",
meta: { title: "index", authRequired: true },
component: () => import("../views/newpage/index"),
}
Each of these properties are explained below:
- path : Url relative path
- component : Actual component name which would get rendered when user visits the path
3. Add a navigation in the layouts
For more details, check the Layouts page to see how to add menu item in your template.
-
/src/components/menu.js