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.
Additional Resources
Good luck with your project!
