Funda Of Web IT Watch on YouTube

Laravel 11 + Vue 3 with Inertia JS - Install and setup the pages, layouts, Component, use Props

4 min read 1 year ago

Published on Aug 03, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial guides you through setting up a Laravel 11 application with Vue 3 and Inertia JS. You'll learn how to configure your database, install necessary packages, create pages and components, and manage navigation using props and layouts. This integration allows for a seamless single-page application experience.

Chapter 1: Setup Database

Open the .env file
- Locate and open your .env file to configure your database settings.
Configure Database
- Copy your database name from your browser.
- Change the database type from SQLite to MySQL by updating the following line:
```
DB_DATABASE=larel11tutorial
```
Save Changes
- Save the .env file after updating the database name.
Run the Application
- Open a terminal and run:
```
php artisan serve
```
- Your application will be running at http://localhost:8000.
Migrate the Database
- Open a new terminal and run:
```
php artisan migrate
```
- This command creates the necessary tables in your database. Refresh your database to confirm the tables are created.

Chapter 2: Breeze Installation Auth Scaffolding

Install Breeze Starter Kit
- Run the following command to install the Breeze package:
```
composer require laravel/breeze --dev
```
Install Breeze with Vue
- Execute the command:
```
php artisan breeze:install vue
```
- This sets up authentication scaffolding with Vue.
Build Assets
- To compile the frontend assets, run:
```
npm install && npm run dev
```
- Visit http://localhost:8000 to check that the login and registration pages are functioning without needing a full page refresh.

Chapter 3: Creating Pages

Create Frontend Controller
- Generate a new controller:
```
php artisan make:controller FrontendController
```
Define Routes
- Open routes/web.php and update it to use the new controller.
- Define the index function:
```
public function index()
{
    return inertia('Frontend/Home');
}
```

Create Home Page View

In resources/js/Pages/Frontend, create a file named Home.vue:

<template>
  <h1>This is the homepage</h1>
</template>
<script setup>
</script>

Update Routing
- Ensure that the route points to the correct view file.
Create Additional Pages
- For the About and Contact pages, repeat the above steps, creating the respective methods and view files (About.vue and Contact.vue).

Chapter 4: Passing Data to Pages

Using Props

To pass data to the About page:

public function about()
{
    return inertia('Frontend/About', ['title' => 'About Us']);
}

Accessing Props in Vue

In About.vue, define props:

<script setup>
defineProps(['title']);
</script>

Display Title
- Use the title prop in your template:
```
<template>
  <h1>{{ title }}</h1>
</template>
```

Chapter 5: Create Navbar Component

Create Navbar Component

In resources/js/Components, create Navbar.vue:

<template>
  <nav>
    <ul>
      <li><Link href="/">Home</Link></li>
      <li><Link href="/about">About Us</Link></li>
      <li><Link href="/contact">Contact Us</Link></li>
    </ul>
  </nav>
</template>
<script setup>
import { Link } from '@inertiajs/inertia-vue3';
</script>

Include Navbar in Pages
- Import the Navbar component in your page views and include it:
```
<template>
  <Navbar />
  <div>Your page content here</div>
</template>
```

Chapter 6: Create Layout

Create Frontend Layout

In resources/js/Layouts, create FrontendLayout.vue:

<template>
  <div>
    <Navbar />
    <slot />
  </div>
</template>
<script setup>
import Navbar from '../Components/Navbar.vue';
</script>

Use Layout in Pages

Update your page components to use the layout:

<template>
  <FrontendLayout>
    <h1>This is the homepage</h1>
  </FrontendLayout>
</template>

Chapter 7: Add Page Title

Import Head Component

Use the Head component from Inertia to set the page title:

<template>
  <Head title="Home" />
  <h1>This is the homepage</h1>
</template>
<script setup>
import { Head } from '@inertiajs/inertia-vue3';
</script>

Repeat for Other Pages
- Add similar Head components to the About and Contact pages.

Conclusion

You have successfully set up a Laravel 11 application with Vue 3 and Inertia JS. You’ve learned to configure your database, install Breeze for authentication, create pages and components, manage navigation, and utilize props and layouts. Next, you can explore CRUD operations in Laravel with Inertia and Vue for a more advanced application.

Table of Contents

Recent