كيف يمكن استخدام Vue مع Laravel؟

Abdelrahman Mostafa10 · 3 ديسمبر 2023

كيف يمكنني دمج Vue في تطبيق Laravel الخاص بي؟ بافتراض أنني أقوم ببناء تطبيق fullstack، فما فهمته وهو أنه Vue لديها موجه (Router) خاص بها، وكذلك Laravel لديها موجه خاص بها.

وهذا حقاً جعلني أتساءل أكثر حول كيفية استخدام كليهما، وقد قمت بالبحث عما إذا كان يجب علي تعلم Vue أم Inertia أولاً، وتعلمت أن Inertia هو ببساطة أداة تربط بين Laravel وVue أو بعض الأطُر الأخرى.

لذا، فكرتُ ربما Inertia هي الجزء المفقود، ولكن ذلك جعلني أتساءل مرة أخرى، كيف يمكنني تطوير تطبيق fullstack فقط باستخدام Laravel + Vue؟ الأمر الذي أربكني حقًا هو وجود موجه في Vue.

Ahmed Elmrsawy · 3 ديسمبر 2023

يوجد أثر من طريقة لإستعمال laravel مع Vue :
1- الطريقة الأبسط و هي أستعمال vue ك single page application و تطوير تطبيق vue بشكل منمفصل و استعمال laravel ك api

// مثال على استعمال vue بشكل منفصل 
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        message: '',
      };
    },
    mounted() {
      // قم بالاتصال بتطبيق laravel الخاص بك
      axios.get('https://your-laravel-api.com/api/data')
        .then(response => {
          this.message = response.data.message;
        })
        .catch(error => {
          console.error('API Request Error', error);
        });
    },
  };
</script>

و قم بتجهيز تطبيق laravel الخاص بك لاستقبال الrequests

// routes/api.php
Route::get('/data', [ApiController::class, 'getData']);


_______________________________________________


// app/Http/Controllers/ApiController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiController extends Controller
{
    public function getData()
    {
        return response()->json(['message' => 'Data from Laravel API']);
    }
}

و في هذة الحالة فأن المسؤول عن الrouting (الموجه) هو الموجه الخاص ب vue لأن في هذة الحالة نكون استعملنا vue ك single page application

_____________
2-الطريقة الثانية :
و هي استعمال inertia و في هذة الحالة نقوم بالدمج بين laravel و vue ولكن في هذة الحالة لا نستخدم vue ك single page application ولا نقوم بالاستفادة بمميزات الSPA ولا نستخدم الموجه الخاص ب vue بل يتم الإعتماد على التوجية من سيرفير laravel نفسو و ليس من ال client side
و نقوم في هذة الحالة بالأعتمال على الview template الخاص بlaravel و من أمثالة blade او handlebars و غيرهم

ولكن لها مميزات أخرى و أبرزها هو :
1- تبسيط بيئة التطوير (simple development workflow)
2-أداء أفضل : و ذلك نتيجة الserver-side rendering و هو أيضا ما يؤدي الى نتيجة أفضل في محركات البحث
3- السهولة في التعلم في حال ما إذا كنت تألف بالفعل laravel
مثال على استعمال laravel و vue والربط بينهم ب inertia

// لنفترض أن التالي هو الroot الخاص بك 
<!-- resources/views/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app" data-page="{{ json_encode($page) }}"></div>
    <script src="{{ asset('js/app.js') }}" defer></script> // هنا يكون الطريق الى الvue components
</body>
</html>

________________

// التالي هو الvue component المسمى app 
// والذي سييكون مصنوع اعتمادا على inertia 
<!-- resources/views/js/Pages/Home/Index.vue -->
<template>
    <div>
        <h1>Welcome to Inertia.js with Vue.js and Laravel!</h1>
        <p>{{ message }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'This is a simple Inertia.js example.',
        };
    },
};
</script>

و كود السيرفر في هذة الحالة هو التالي :

// routes/web.php
use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index'])->name('home');
__________________________________
// و قم بتخصيص الcontroller لتعمل بشكل مناسب كالتالي 

// app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class HomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Home/Index');
    }
}

كيف يمكن استخدام Vue مع Laravel؟

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

Ahmed Elmrsawy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية