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" } } },
Laravel-vue
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 /resources/js/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 /resources/js/views/index.js
Ex :-
Vue.component("demo", require("./demo").default);
3. Add link of the page in Vertical Layout and Horizontal Layout. Add menu id, label and link in JSON object.
For Vertical Layout :- /resources/js/components/menu.js
For Horizontal Layout :- /resources/js/components/horizontal-menu.js
Ex :-
{ id: 1, label: "menuitems.demo.text", icon: "bx-file", link: "/demo" },
4. Add page name in /resources/js/locales/en.json
file.
Ex :-
{ "menuitems": { "demo": { "text": "Demo" } } },