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/main.vue";
import PageHeader from "@/components/page-header";
import appConfig from "../../../app.config";
export default {
data() {
return {
title: "index",
items: [
{
text: "newpage",
href: "/",
},
{
text: "index",
active: true,
},
],
};
},
components: {
Layout,
PageHeader,
},
};
</script>
<template>
<Layout>
<PageHeader :title="title" :items="items" />
// 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.
-
For Vertical Layout :-
/src/layouts/main.vue -
For Horizontal Layout :-
/src/layouts/horizontal.vue -
For Two Column Layout :-
/src/layouts/twocolumn.vue