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 resource/js/Pages. ex. NewPage, and
then create a vue file in resource/js/Pages/NewPage with name
index.vue
Example :-
-
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
-
if you want to add meta tags, you need to import
import { Head } from '@inertiajs/vue3'and register as a component and use it in your page.
<script>
import Layout from "@/layouts/index.vue";
import { Head } from '@inertiajs/vue3'
import PageHeader from "@/components/page-header.vue";
import RightBar from "@/components/right-bar.vue";
export default {
data() {
return {
};
},
components: {
Layout,
PageHeader,
RightBar,
Head
},
};
</script>
<template>
<Layout>
<Head title="new page">
<meta name="description" content="your page description.">
<meta name="keyword" content="add some keywords">
</Head>
<div class="page-title-box">
<BRow class="align-items-center">
<BCol md="5">
<PageHeader title="NewPage" pagetitle="Pages" />
</BCol>
<BCol md="auto" class="ms-auto">
<RightBar />
</BCol>
</BRow>
</div>
// write your code here
</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 routes/web.php file,
declare your route. E.g.
use App\Http\Controllers\ExampleController;
Route::get('/', [ExampleController::class, 'index']);
2. Create a controller using below command. E.g.
php artisan make:controller ExampleController
3. Create a function name index. E.g.
use Inertia\Inertia;
public function index()
{
return Inertia::render('somefolder/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.
-
resources/js/components/menu.js