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 resources/js/Pages. ex. NewPage, and
then create a vue file in resources/js/Pages/NewPage with name
index.vue
I) With Layout Example :-
-
For Create New Page With Layout.
-
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 Head and Link from @inertiajs/vue and register as a component.
-
You can add meta tags in Head Component.
<script>
import { Link, Head } from "@inertiajs/vue";
import Layout from "@/Layouts/main.vue";
import PageHeader from "@/Components/page-header.vue";
export default {
components: {
Layout,
PageHeader,
Link, Head
},
};
</script>
<template>
<Layout>
<Head title="Your page title">
<meta name="viewport" content="your content" />
// add other meta tags
</Head>
<PageHeader title="title" pageTitle="items" />
// write your code here
</Layout>
</template>II) Without Layout Example :-
-
For Create New Page Without Layout.
-
Without Layout Page doesn't have pageHeader & breadcrumbs.
<script>
import { Link, Head } from "@inertiajs/vue";
export default {
data() {
return {
title: "index",
};
},
components: {
Link, Head
}
};
</script>
<template>
<Head title="Your page title">
<meta name="viewport" content="your content" />
// add other meta tags
</Head>
// write your code here
</template>2. How to add new route ?
You can easily add, change or remove any route by simply making changes described below:
1. Open routes/web.php file,
declare your route. E.g.
Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified',])->group(function () {
Route::controller(VelzonRoutesController::class)->group(function () {
Route::get("/test-page", "test_func");
// other routes
});
});
2. Open app/Http/contollers/VelzonRoutesController.php file,
declare your function. E.g.
public function test_func(){
return Inertia::render('NewPage/index');
} 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 and Semibox Layout :-
resources/js/Component/menu.vue -
For Horizontal Layout :-
resources/js/Layouts/horizontal.vue -
For Two Column Layout :-
resources/js/Layouts/twocolumn.vue