آموزش نصب و راه اندازی inertia - vue3

آموزش نصب و راه اندازی inertia - vue3
آموزش نصب و راه اندازی inertia - vue3

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=&quot{{ str_replace('_', '-', app()->getLocale()) }}&quot>
    <head>
        <meta charset=&quotutf-8&quot>
        <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>

        <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 هایی که در بالا تعریف کرده ایم را شناسایی کند.

{
    &quotcompilerOptions&quot: {
        &quotbaseUrl&quot: &quot.&quot,
        &quotpaths&quot: {
            &quot@components/*&quot: [&quotresources/js/Components/*&quot],
            &quot@pages/*&quot: [&quotresources/js/Pages/*&quot],
            &quot@layouts/*&quot: [&quotresources/js/Layouts/*&quot]
        }
    },
    &quotexclude&quot: [&quotnode_modules&quot, &quotpublic&quot]
}

مرحله 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>


export default {
    props: {
        message: {
            type: String,
            required: true
        }
    }
}

اختیاری - نصب کردن 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: [
        &quot./app/**/*.blade.php&quot,
        &quot./resources/**/*.blade.php&quot,
        &quot./resources/**/*.js&quot,
        &quot./resources/**/*.vue&quot
    ],
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ]
}
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

مرحله 3 - افزودن Tailwind در فایل stylesheet

در نهایت شما باید کد زیر را در فایل stylesheet جایگذاری کنید.

@tailwind base;
@tailwind components;
@tailwind utilities;

حالا شما میتوانید از Tailwind درون پروژه خودتون استفاده کنید. خیلی ممنون از شما که این مقاله را مطالعه کردید، اگر در خصوص در این مقاله هرگونه مشکل/سوالی داشتید حتما در قسمت نظرات سایت با ما در میان بگذراید.

منبع: وبسایت میموک