من الصفر للاحتراف: Full Stack مع Laravel + Vue.js

ليه Laravel + Vue.js؟

Laravel بيوفر Backend قوي وسريع، وVue.js بيوفر Frontend تفاعلي وسلس. الدمج بينهم بيوفر تجربة تطوير ممتازة وأداء عالي.

هيكلة المشروع

فيه نهجين للدمج:

• Monorepo: Vue.js جوه مشروع Laravel نفسه باستخدام Vite
• Separated: API منفصل + Frontend منفصل (الأفضل للمشاريع الكبيرة)

إعداد Laravel API

// إنشاء API Resource Controller
php artisan make:controller Api/PostController --api --model=Post

// routes/api.php
Route::apiResource('posts', PostController::class);

إعداد Vue.js

npm create vite@latest frontend -- --template vue
cd frontend
npm install axios pinia vue-router

Pinia Store للتواصل مع الـ API

import { defineStore } from 'pinia'
import axios from 'axios'

export const usePostsStore = defineStore('posts', {
    state: () => ({ posts: [], loading: false }),
    actions: {
        async fetchPosts() {
            this.loading = true
            const { data } = await axios.get('/api/posts')
            this.posts = data.data
            this.loading = false
        }
    }
})

Authentication مع Laravel Sanctum

// في axios config
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000'

// Login flow
await axios.get('/sanctum/csrf-cookie')
await axios.post('/login', { email, password })

خلاصة

Laravel + Vue.js مزيج قوي جداً للـ Full Stack. تعلمهم مع بعض هيخليك مطور Full Stack حقيقي قادر على بناء أي تطبيق من الأول للآخر.