Cómo construir un blog desde cero con Laravel 11 y Vue.js Tutorial

Construir un blog puede ser una tarea emocionante y educativa. En este tutorial, te guiaremos a través del proceso de crear un blog desde cero utilizando Laravel 11 para el backend y Vue.js para el frontend. Este enfoque te permitirá aprovechar las capacidades robustas de Laravel para el manejo de datos y la API, mientras disfrutas de la naturaleza reactiva y moderna de Vue.js en el cliente.

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente en tu sistema:

PHP (versión 8.0 o superior)
Composer
Node.js y npm
MySQL o cualquier otro sistema de gestión de bases de datos que prefieras

Paso 1: Configuración del entorno de Laravel

Instalación de Laravel

Abre tu terminal y ejecuta el siguiente comando para instalar Laravel:

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

Esto creará un nuevo proyecto de Laravel en un directorio llamado blog.

Configuración de la base de datos

Abre el archivo .env en la raíz de tu proyecto y configura las variables de conexión de la base de datos:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nombre_de_tu_base_de_datos
DB_USERNAME=tu_usuario
DB_PASSWORD=tu_contraseña

Asegúrate de crear una base de datos con el nombre que hayas especificado.

Migraciones

Laravel utiliza migraciones para gestionar esquemas de base de datos. Para nuestro blog, necesitaremos una tabla para las publicaciones. Crea una migración con el siguiente comando:

php artisan make:migration create_posts_table --create=posts

Abre la migración recién creada en database/migrations y edítala para que se vea así:

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

Ejecuta la migración:

php artisan migrate

Paso 2: Crear la API en Laravel

Controlador

Ahora, necesitamos un controlador para manejar las operaciones CRUD. Crea un controlador llamado PostController:

php artisan make:controller PostController

Edita el controlador en app/Http/Controllers/PostController.php y añade los métodos necesarios:

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();
}

Rutas API

Abre routes/api.php y define las rutas para las publicaciones:

use App\Http\Controllers\PostController;

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

Paso 3: Configuración de Vue.js

Instalar Vue.js

Primero, vamos a instalar Vue.js en el proyecto. Cambia al directorio blog y ejecuta:

npm install
npm install vue@next vue-router

Estructura de archivos

Crea la estructura de archivos para Vue.js en resources/js/components. Dentro de esta carpeta, crea un archivo llamado PostComponent.vue y otro llamado 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>

Integrar Vue.js en Laravel

Para asegurarte de que Vue.js se ejecute correctamente, abre resources/js/app.js y añade:

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

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

Luego, en la vista principal de Laravel, resources/views/welcome.blade.php, añade el siguiente código en el lugar deseado:

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

Compilar los activos

Ahora, compila los activos de Vue.js utilizando:

npm run dev

Paso 4: Ejecutar el proyecto

Asegúrate de que el servidor de Laravel esté en funcionamiento ejecutando:

php artisan serve

Esto levantará el servidor en http://localhost:8000. Ahora, abre tu navegador y accede a esta dirección para ver tu blog en acción.

Conclusión

Has construido un blog básico utilizando Laravel 11 y Vue.js. Este tutorial te ha presentado una guía clara sobre cómo configurar un backend robusto y un frontend interactivo. Desde aquí, puedes seguir mejorando tu blog añadiendo características como la autenticación de usuarios, comentarios y la paginación.