Empower and Enhance Your VitePress Blog with a Laravel API

Hello! 👋

After building our VitePress blog, we are ready to make it more dynamic with a Laravel API.

In the previous series, we explored VitePress from the initial project setup to deployment on Cloudflare Pages. We built a functional, automated blog with SEO metadata, Open Graph images, and a GitHub projects page. The blog handled everything at build time, so publishing content was the only task left.

This series introduces back-end development by creating a Laravel API that gives our blog a few interactive features.

Until now, our blog has been mostly static. Content was generated at build time, with a small amount of data loaded dynamically, and the resulting HTML files were distributed through a CDN. By adding a Laravel API, we will let readers interact with the blog through features such as post reactions and comments.

Although the focus is on the back end, we will also integrate the API into our VitePress blog. We will use Vue.js and Pinia Colada as our data-fetching framework. VitePress is a Vue.js application, so we can extend it with the components we need.

The examples are designed to be easy to follow. Unnecessary complexity and over-engineering are neither desirable nor necessary here. We will focus on simplicity, clarity, and efficiency.

Throughout the series, we will build a Laravel API and integrate it with our VitePress blog. We will cover:

• Setting up the Laravel project: Create a new Laravel project and become familiar with its structure.
• Improving the development workflow: Configure Pint, Rector, Larastan, and Pest for formatting, refactoring, static analysis, and testing.
• Adding social authentication: Let users sign in with GitHub through Laravel Socialite.
• Connecting the applications: Configure Sanctum, CORS, CSRF protection, and the first requests between the VitePress frontend and the Laravel API.
• Managing authentication state: Use Pinia Colada to retrieve the current user and log out with an optimistic update.
• Building the comment API: Create the models, relationships, endpoints, validation, authorization, and tests for comments.
• Keeping the backend in sync: Generate post metadata from VitePress and synchronize it with the Laravel database.
• Building the comment interface: Fetch, create, edit, and delete comments from the VitePress frontend.

By the end of the series, you will have a blog backed by a Laravel API. Readers will be able to sign in with GitHub and leave comments, and the architecture will be ready for additional interactive features.

Testing is part of the development process and will be included at each stage, so it does not need a dedicated article.

If you have questions, feedback, or suggestions, feel free to share them in the comments. Your input helps improve the series.