Master Laravel and Vue.js: Build a Modern Blogging Platform

Build the database foundation for your Laravel blog by creating models and migrations for users, posts, and categories. Explore foreign keys, many-to-many relationships, and eloquent models with basic testing.

Create and migrate the category model with name, slug, and optional icon; establish a many-to-many post relationship via a category_post pivot table, and seed sample categories.

Create a Laravel post controller with API resource methods and join posts to categories and users. Handle store, update, destroy with slug generation, category attachment, image upload, and JSON responses.

Create a Laravel API dashboard controller to compute post counts, published and draft posts, categories, and users, and return recent posts and popular categories as JSON for the admin dashboard.

Build a modern single-page Vue.js frontend for a Laravel blog, covering routing, state management, reusable components for posts, categories, authentication, and user profile, plus API integration and CRUD operations.

Install Vue.js, Vue Router, and Axios with vite in a Laravel setup, then configure tailwind CSS and run the dev server with php artisan serve and npm run dev.

Create the root Vue component app.vue with a template featuring a conditional navbar for authenticated users and a router-view in the main area, using the composition API and useRoute.

Create register Vue component for the blogging platform by implementing a form with name, email, password and confirmation, preventing default submission, wiring a register method, and routing to the dashboard.

Create the dashboard component view with template, css, and logic to fetch and display posts, recent posts, categories, and users, including a loading spinner and dynamic post status.

Build a dynamic Vue.js navbar for a Laravel–Vue blogging platform, with route-based highlighting for dashboard, posts, and categories, plus a user avatar and a sign-out profile dropdown.

Create the post list by looping posts in the index view to display image, title, and description, with tailwind-based status styling and a prompt to create your first post.

Render the post list by looping posts, formatting creation dates, and displaying post categories with edit and delete actions. Add pagination to show ten posts per page.

Set up a paginated post list in the Laravel and Vue.js blogging platform using previous, next, and page numbers with dynamic active styling and first/last page disabled states.

Implement edit and delete post actions with route navigation using the post ID, confirm deletion via Axios, refresh the list, and manage pagination with first/previous/next and a computed page range.

Develop and navigate a post list and create flow within a Laravel and Vue.js blogging platform, including routes, post creation, and preparing views for editing.

Implement the edit post view in a Vue.js Laravel blog, with error and success alerts, loading state, and validation-driven styling. Bind post title and support draft or publish actions.

Edit vue post template part 2 covers building the description and image editing for a Laravel and Vue.js blog post, using dynamic class binding, validation, and multi-category selection.

Define current post data with title, description, content, status, image, and categories; implement form validation with errors and a validate form helper enforcing minimum lengths for title, description, and content.

Use vue watchers to monitor edits to a post's title, description, content, image, and categories, and employ JSON.stringify for deep comparison to detect modifications.

Publish and manage blog posts by validating forms before publishing, saving posts, and posting via API calls; handle errors and confirm deletions, with improved image upload validation.

edit vue post template part 10 guides you through uploading image, appending to form data, posting with axios to the API, and handling timeouts, full url image path, and errors.

Fix and refine the vue post edit template by resolving closing braces and syntax errors, handling image upload previews, and linking storage to expose cover images, then save and publish.

Implement a categories section for posts in Vue, fetching categories via axios and displaying icons, names, and post counts. Enable creating, editing, and deleting categories with routing and loading states.

Develop the edit category view in vue, handling create and edit modes, loading state, and a form for name and icon with axios calls to the categories api.

Finish the category section in Vue routing for the Laravel-Vue blog by defining index, create, and edit routes, importing components, using composition API, and testing via npm dev.

In module six, implement the front-end blog layout using blade templates and tailwind CSS, creating layouts in resources/views and wiring header, mobile menu, and yield content.

Create the home blade view by extending the front-end layout, define header and content sections. Loop through posts to display titles, descriptions, author, date, and categories with pagination.

Create and implement a Laravel home controller to fetch published posts with associated users and categories, paginate five, and render listing and single-post views by slug.

Define web routes for posts and categories with slug-based URLs, add a catch-all route to connect Laravel backend to the Vue front end, test, and ensure assets load post images.