Create a New Page

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

-> Follow the below steps to create new page.

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 here" pageTitle="pageTitle here" />
        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"
        }
    }
},

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

-> Follow the below steps to create new page.

1. Create a new folder in resources/js/views. ex. NewPage, and then create a vue file in resources/js/views/NewPage with name index.vue

Ex :-

  • 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

<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. How to add new route ?

You can easily add, change or remove any route by simply making changes described below:

1. Open resources/js/routes/index.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

Note : you don't need to restart the development server in order to see the menu changes getting in effect

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 :- /resources/js/components/menu.js
  • For Horizontal Layout :- /resources/js/components/horizontal-menu.js
© Skote.