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 and also meta tag.

-> Follow the below steps to create new page.

1. Create a component in the `src/router/views/demo.vue` with name `demo.vue`.

Example :-

As you know, there are 2 different types of layouts, first is Blank Layout and second is Full layout.

- if you want to make your page blank layout, then you need to wrap your page's content with <BContainer>

- if you want to make your page with full layout, then you need to wrap your page's content with <div class="page-content"><div> tag and <BContainer fluid>

<script>
    import Layout from '@/layouts/main'
    import PageHeader from '@/components/page-header'
                                                            
    export default {
        components: { Layout, PageHeader },
    }
</script>
                                        
<template>
    <Layout>
        <PageHeader title="title here" pageTitle="pageTitle here" />
        This is New Page
    </Layout>
</template>

2. Set the route in `/src/router/routes.js`

Example :-

{
    path: "/demo",
    name: "sample-page',
    meta: { authRequired: true },
    component: () => import('./views/demo')
},

3. Add link of the page in Vertical Layout and Horizontal Layout. Add menu id, label and link in JSON object.

For Vertical Layout :- /src/components/menu.js

For Horizontal Layout :- /src/layou/hor-menu.js

Example

{
    id: 1,
    label: "menuitems.demo.text",
    icon: "bx-file",
    link: "/demo"
},

4. Add page name in src/lang/en.json file.