Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Laravel 11 + Vue 3 + TailwindCSS: Fullstack personal blog.

Name: Laravel 11 + Vue 3 + TailwindCSS: Fullstack personal blog.
Rating: 4.8 (5 reviews)

create a fullstack personal blog with Laravel 11 and Vue 3

Created byAhmet Sabry Mahfouz

Last updated 4/2024

English

English [Auto],

What you'll learn

Building fullstack apps with laravela and vue
Creating SPAs
using apis in Laravel
using vue router and pinia in Vue

Course content

4 sections • 18 lectures • 1h 15m total length

Fresh Laravel project1:52
Create a fresh Laravel project with composer, naming it blog api, and configure mysql in the environment. Install api routes, remove web.php, install Fortify, and create blog database and tables.
Fresh Vue project4:19
Install and configure a fresh Vue 3 app for the blog, enable Vue routes and the new Vuex state management, integrate Tailwind CSS, and run the dev server to preview.

Source Code0:02
How to login with Vue and Laravel Fortify7:05
Implement a basic login with Laravel Fortify and Sanctum, configure API middleware and routes, and connect a Vue front-end with axios for authenticated requests across front-end and back-end servers.
Login form11:26
Build a login form for a Laravel 11 and Vue 3 Tailwind CSS fullstack blog, handling cookies, CSRF, and Sanctum stateful domains.
Input validation2:56
Implement frontend input validation to display backend validation errors, handling 422 responses from login attempts and showing the first email and password errors beneath each field in the login view.

Post Model and Migration2:55
Create a post model with migration and factory, generate a slug from the title, and use tinker to create a post and display the title and slug.
Creating post endpoint2:20
Create a post endpoint in a Laravel 11 API by building an invokable CreatePostController with a validated request, requiring title and body, and returning a created message via sanctum.
Creating post form4:33
Create a post form in the dashboard using axios to post title and body to /api/post, handle responses, clear inputs on success, and implement client-side validation and error handling.
Listing posts4:41
Build a posts listing in a Laravel 11 API and Vue 3 frontend, paginate results, and render them in a dashboard with router-link and TailwindCSS styling.
Pagination3:48
learn to implement simple pagination on the front end with next and previous URLs, manage a data object with posts, and disable navigation buttons when pages are unavailable.
Update post1:42
Implement an update post API endpoint by creating an invokable controller with validated request, binding the post model, and registering a put or patch route using slug instead of id.
Update post page8:28
Implement an update post view in the Laravel Vue app, fetch the post by slug via the API endpoint, populate a form, and submit updates with Axios, handling validation errors.
Delete post2:12
Implement a delete post API endpoint with a new controller, wire it to the dashboard button using axios, confirm before delete, and refresh the post list after a 204 response.

Handle expired sessions1:58
Handle expired sessions by implementing a global Axios response interceptor that redirects to the login page on a 401 error, ensuring seamless dashboard access after reauthentication.
Guest middleware5:09
Prevent logged-in users from accessing the login page using a guest middleware with Pinia persistence. Guard routes with beforeEnter and clear the user on logout to keep the dashboard secure.
Home page5:51
Implement the home page of a Laravel 11 + Vue 3 + TailwindCSS app with a dynamic navigation bar, authenticated-aware links, and paginated post previews.
Showing post3:49
Create a show post page with a dynamic route, fetch post data, and format the creation date using moment.js in a Vue setup.

Requirements

basic knowledge of Laravel and Vue

Description

Welcome to the **"Laravel 11 + Vue 3 + TailwindCSS: Fullstack Personal Blog"** course! If you're ready to build a dynamic, feature-rich personal blog from scratch using the latest web development technologies, this course is perfect for you. We'll guide you step by step through creating a stunning, responsive blog application, leveraging the power of Laravel, Vue, and TailwindCSS.

Course Overview:

This course is designed to give you practical, hands-on experience in building a personal blog application using modern technologies. We will take you through the entire process of developing a full-stack application, from setting up the backend with Laravel to crafting a beautiful front end with Vue and TailwindCSS.

1. Introduction

- **Introduction to the Course**: Start your journey with an overview of what to expect throughout the course, and get set up with the necessary tools and frameworks.

- **Setting Up the Environment**: Learn how to install and configure Laravel 11, Vue 3, and TailwindCSS in your development environment.

- **Project Structure**: Understand how to organize your project files and directories for a smooth development process.

2. Authentication with Sanctum, Fortify, and Pinia

- **Understanding Authentication**: Learn the importance of authentication in web applications and how it protects your data and user experience.

- **Sanctum and Fortify**: Implement user authentication using Laravel Sanctum for API token-based authentication and Laravel Fortify for UI-based authentication features like registration, login, password reset, and two-factor authentication.

- **Vue 3 and Pinia**: Connect Vue 3 with your Laravel backend and manage your application state efficiently with Pinia, the new Vuex-like state management library for Vue 3.

- **User Authentication in Action**: Build a secure user authentication system with registration, login, and logout features using Sanctum, Fortify, and Pinia.

3. Post Module CRUD

- **Create, Read, Update, Delete**: Implement a full CRUD (Create, Read, Update, Delete) system for managing blog posts in your application.

- **Creating Blog Posts**: Develop a user interface and backend functionality to allow users to create new blog posts, including text and images.

- **Reading Blog Posts**: Learn how to display blog posts on the front end in an organized and visually appealing manner.

- **Updating Blog Posts**: Enable users to edit and update existing blog posts, ensuring a seamless user experience.

- **Deleting Blog Posts**: Add the ability to delete blog posts from the system, including proper confirmation and error handling.

Course Outcomes:

By the end of the course, you'll have created a fully functional personal blog application using Laravel 11, Vue 3, and TailwindCSS. You'll be proficient in user authentication with Sanctum and Fortify, state management with Pinia, and CRUD operations for blog posts. These skills will empower you to build dynamic, modern web applications and excel in full-stack development.

Join us now and embark on an exciting journey to create your own personal blog!

Who this course is for:

Any developer who want to take a great step to be a fullstack developer

Laravel 11 + Vue 3 + TailwindCSS: Fullstack personal blog.

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 6min

Authentication4 lectures • 21min

Post module8 lectures • 31min

Improvements for client side4 lectures • 17min

Requirements

Description

Who this course is for: