How to Build a Blog from Scratch with Laravel 11 and Vue.js Tutorial

Building a blog can be an exciting and educational task. In this tutorial, we will guide you through the process of creating a blog from scratch using Laravel 11 for the backend and Vue.js for the frontend. This approach allows you to leverage Laravel's robust capabilities for data handling and the API while enjoying the reactive and modern nature of Vue.js on the client side.

Prerequisites

Before getting started, make sure you have the following installed on your system:

PHP (version 8.0 or higher)
Composer
Node.js and npm
MySQL or any other database management system of your choice

Step 1: Setting Up the Laravel Environment

Installing Laravel

Open your terminal and run the following command to install Laravel:

composer create-project --prefer-dist laravel/laravel blog

This will create a new Laravel project in a directory called blog.

Setting Up the Database

Open the .env file at the root of your project and configure the database connection variables:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

Make sure to create a database with the name you have specified.

Migrations

Laravel uses migrations to manage database schemas. For our blog, we will need a table for the posts. Create a migration with the following command:

php artisan make:migration create_posts_table --create=posts

Open the newly created migration in database/migrations and edit it to look like this:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

Step 2: Creating the API in Laravel

Controller

Now, we need a controller to handle CRUD operations. Create a controller named PostController:

php artisan make:controller PostController

Edit the controller in app/Http/Controllers/PostController.php and add the necessary methods:

use App\Models\Post;

public function index()
{
    return Post::all();
}

public function store(Request $request)
{
    $validated = $request->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);

    return Post::create($validated);
}

public function show(Post $post)
{
    return $post;
}

public function update(Request $request, Post $post)
{
    $validated = $request->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);

    $post->update($validated);
    return $post;
}

public function destroy(Post $post)
{
    $post->delete();
    return response()->noContent();
}

API Routes

Open routes/api.php and define the routes for the posts:

use App\Http\Controllers\PostController;

Route::apiResource('posts', PostController::class);

Step 3: Setting Up Vue.js

Installing Vue.js

First, let's install Vue.js in the project. Change to the blog directory and run:

npm install
npm install vue@next vue-router

File Structure

Create the file structure for Vue.js in resources/js/components. Inside this folder, create a file named PostComponent.vue and another called App.vue.

PostComponent.vue

<template>
    <div>
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
    </div>
</template>

<script>
export default {
    props: ['post'],
}
</script>

App.vue

<template>
    <div>
        <h1>Blog</h1>
        <PostComponent v-for="post in posts" :key="post.id" :post="post" />
    </div>
</template>

<script>
import PostComponent from './components/PostComponent.vue';

export default {
    components: { PostComponent },
    data() {
        return {
            posts: [],
        }
    },
    mounted() {
        fetch('http://localhost:8000/api/posts')
            .then(response => response.json())
            .then(data => {
                this.posts = data;
            });
    },
}
</script>

Integrating Vue.js into Laravel

To ensure Vue.js runs correctly, open resources/js/app.js and add:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Then, in the main Laravel view, resources/views/welcome.blade.php, add the following code where you want it:

<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>

Compiling Assets

Now, compile the Vue.js assets using:

npm run dev

Step 4: Running the Project

Make sure the Laravel server is running by executing:

php artisan serve

This will start the server at http://localhost:8000. Now, open your browser and navigate to this address to see your blog in action.

Conclusion

You have built a basic blog using Laravel 11 and Vue.js. This tutorial provided you with a clear guide on how to set up a robust backend and an interactive frontend. From here, you can continue improving your blog by adding features like user authentication, comments, and pagination.