Vue.js یک ابزار قدرتمند است که بسیاری از مزایای زیادی نسبت به استفاده از قالب های Blade لاراول را دارد، با این حال در ابتدا ممکن است برای شما سخت باشد که بخش های front-end و backend خود را با هم ترکیب کنید. در اینجا “Inertia” به کمک شما می آید، این ابزار به شما کمک می کند تا ارتباط بین بخش های front-end و backend خود را با یکدیگر برقرار کنید. این روش به عنوان `modern monolith` شناخته می شود.
Vue.js یک ابزار قدرتمند است که بسیاری از مزایای زیادی نسبت به استفاده از قالب های Blade لاراول را دارد، با این حال در ابتدا ممکن است برای شما سخت باشد که بخش های front-end و backend خود را با هم ترکیب کنید. در اینجا “Inertia” به کمک شما می آید، این ابزار به شما کمک می کند تا ارتباط بین بخش های front-end و backend خود را با یکدیگر برقرار کنید. این روش به عنوان `modern monolith` شناخته می شود.
نحوه راه اندازی Inertia
موارد زیر مربوط به لاراول 10 (به همراه Vite) است و فرض میکنیم که شما از قبل با Vue آشنایی دارید.
مرحله 1 - نصب dependencies
composer require inertiajs/inertia-laravel tightenco/ziggy
npm install @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @vitejs/plugin-vue vue
مرحله 2 - ایجاد ساختار پوشه ها
ساختار پوشه های پروژه را به شکل زیر ایجاد کنید.
resources
--| js
----| Components
----| Layouts
----| Pages
شما میتوانید که ساختار را متناسب با پروژه خودتان شخصی سازی کنید، فقط توجه داشته باشید که حتما باید مسیرها (path) جدید را در فایل های config بروزرسانی کنید.
مرحله 3 - ایجاد یک فایل root با فرمت blade
فایل 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 inertia>{{ config('app.name', 'Laravel') }}</title>
@routes
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
مرحله 4 - ایجاد middleware مربوط به Inertia
دستور زیر را اجرا کنید تا middleware مربوط به Inertia در مسیر app/Http/Middleware/HandleInertiaRequests.php ایجاد بشود.
php artisan inertia:middleware
زمانی که فایل middleware ساخته شد وارد فایل app/Http/Kernel.php بشوید و به عنوان آخرین آیتم در `web middleware` کد زیر را جایگذاری کنید.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
مرحله 5 - تنظیم فایل کانفیگ Vite
سپس شما نیاز دارید تا `Vue plugin` را در فایل کانفیگ Vite اضافه کنید، کد زیر را در vite.config.js جاگذاری کنید.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js',
// Add your stylesheet here
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'@components': '/resources/js/Components',
'@layouts': '/resources/js/Layouts',
'@pages': '/resources/js/Pages'
},
},
});
ایجاد یک فایل jsconfig.json هم بسیار مهم است تا به IDE شما کمک کند تا alias هایی که در بالا تعریف کرده ایم را شناسایی کند.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["resources/js/Components/*"],
"@pages/*": ["resources/js/Pages/*"],
"@layouts/*": ["resources/js/Layouts/*"]
}
},
"exclude": ["node_modules", "public"]
}
مرحله 6 - ساخت برنامه با Inertia
در مسیر resources/js/app.js ما نیاز به اجرای برنامه inertia داریم که میتوانید با استفاده از کد زیر این کار را انجام بدهید.
import './bootstrap';
// Import your stylesheet here
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Reflect';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.use(ZiggyVue)
.mount(el);
},
}).then(() => {
InertiaProgress.init({});
})
ساخت بخش front-end برنامه
اول از همه، ما باید یک مسیر برای صفحه خود ایجاد کنیم. به جای بازگرداندن یک view، اکنون یک درخواست Inertia برمی گردانیم:
Route::get('/hello-world', function () {
return Inertia::render('HelloWorld', [
'message' => 'Look mum, I\'m doing Inertia!',
]);
});
همینطور که مشاهده میکنید ما الان با استفاده از متد Inertia::render()، اطلاعات مربوط به کامپوننت Vue را ارسال میکنیم و برای ارسال پارامتر به کامپوننت هم میتوانید مانند لاراول اطلاعات را ارسال کنید. صفحات کامپوننت ها در پوشه resources/js/Pages قرار دارند، اینجا باید یک کامپوننت Vue جدید به اسم HelloWorld.vue ایجاد کنیم.
<template>
<div>
<h1>Hello World!</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>
اختیاری - نصب کردن Tailwind CSS
در اینجا ما پروژه Vue خودمون را راه اندازی کرده ایم، حالا وقتشه که قالب پروژه را دیزاین کنیم.
مرحله 1 - نصب dependencies
npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-importautoprefixer
اجرا دستور زیر اختیاری میباشد و در صورتی باید اجرا شود که شما بخواهید از Tailwind UI در ظاهر پروژتون استفاده کنید.
npm install @headlessui/vue @heroicons/vue
مرحله 2 - کانفیگ کردن Tailwind CSS
فایل کانفیگ tailwind.config.js را ایجاد کنید، اگر فایل را ایجاد نکنید Tailwind بدون فایل کانفیگ نمیتونه کار کنه.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.blade.php",
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue"
],
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
]
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
مرحله 3 - افزودن Tailwind در فایل stylesheet
در نهایت شما باید کد زیر را در فایل stylesheet جایگذاری کنید.
@tailwind base;
@tailwind components;
@tailwind utilities;
حالا شما میتوانید از Tailwind درون پروژه خودتون استفاده کنید. خیلی ممنون از شما که این مقاله را مطالعه کردید، اگر در خصوص در این مقاله هرگونه مشکل/سوالی داشتید حتما در قسمت نظرات سایت با ما در میان بگذراید.
منبع: medium