How to Create a Custom Page

Vuejs

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

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

Ex :-

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

                                                        

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

Ex :-

{
    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/components/horizontal-menu.js

Ex :-

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

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

Ex :-

{
    "menuitems": {
        "demo": {
            "text": "Demo"
        }
    }
},