Интеграция компонентов Vue.js в Laravel: руководство для начинающих

Laravel и Vue.js — две мощные среды, обычно используемые в веб-разработке. Laravel предоставляет комплексное серверное решение, а Vue.js предлагает гибкий и эффективный способ создания интерактивных компонентов внешнего интерфейса. Хотя Laravel предлагает альтернативные варианты, такие как Inertia.js и Livewire для динамических интерфейсов, бывают ситуации, когда разработчики предпочитают интегрировать Vue.js непосредственно в свои приложения Laravel, особенно для существующих или начинающих проектов.

Это руководство специально разработано для новичков, которые начинают работу с такими проектами и хотят научиться беспрепятственно интегрировать компоненты Vue.js в приложения Laravel. Выполняя шаги, описанные в этом руководстве, вы приобретете ценные навыки включения компонентов Vue.js в свои проекты Laravel, даже если они изначально были созданы без Vue.js. Давайте погрузимся и узнаем, как вы можете улучшить свои навыки разработки Laravel, используя возможности Vue.js!

Предварительные требования. Прежде чем начать, убедитесь, что у вас есть следующее:

Базовые знания фреймворка Laravel.
Знание основ Vue.js

Шаг 1: Настройка Laravel

Для начала убедитесь, что Laravel установлен на вашем локальном компьютере. Если нет, следуйте официальной документации Laravel, чтобы установить Laravel и настроить новый проект. Когда ваш проект Laravel будет готов, перейдите в каталог проекта в своем терминале.

Шаг 2: Установка Laravel Breeze

Laravel Breeze — это легкий пакет шаблонов, который обеспечивает минимальную настройку аутентификации в приложениях Laravel. Чтобы установить Laravel Breeze, выполните в терминале следующую команду:

composer require laravel/breeze --dev

После установки создайте каркас аутентификации, выполнив следующую команду:

php artisan breeze:install

Шаг 3: Создание базы данных

Затем создайте новую базу данных для вашего приложения Laravel. Вы можете использовать инструмент управления базой данных, такой как phpMyAdmin, или запустить соответствующие команды SQL на сервере базы данных.

Шаг 4: Запуск миграции

Теперь запустите миграцию базы данных, чтобы настроить необходимые таблицы для аутентификации и управления пользователями. Выполните следующую команду в своем терминале:

php artisan migrate

Шаг 5: Установка зависимостей и сборка ресурсов

Чтобы установить необходимые внешние зависимости и собрать ресурсы, выполните следующие команды:

npm install
npm run dev

Шаг 6: Обслуживание приложения Laravel

Чтобы обслуживать ваше приложение Laravel локально, выполните следующую команду:

php artisan serve

Это запустит локальный сервер разработки, и вы сможете получить доступ к своему приложению в своем веб-браузере, используя предоставленный URL-адрес.

Шаг 7: Установка Vue.js и Vue Loader

Чтобы улучшить опыт разработки при работе с компонентами Vue.js, мы установим Vue Loader. Vue Loader — это загрузчик Webpack, который позволяет писать однофайловые компоненты Vue. Он упрощает структуру компонентов, объединяя HTML, CSS и JavaScript в одном файле.

Чтобы установить Vue Loader, выполните следующую команду:

npm install vue@next vue-loader@next

Шаг 8: Установка плагина Vue.js для Vite

Vite — это инструмент сборки внешнего интерфейса нового поколения, и Laravel предоставляет плагин для его интеграции с вашим приложением Laravel. Установите плагин Vue.js для Vite, выполнив следующую команду:

npm i @vitejs/plugin-vue

Шаг 9: Обновление конфигурации Vite

Чтобы настроить Vite, откройте файл vite.config.js и обновите его следующим кодом:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            'vue': 'vue/dist/vue.esm-bundler.js'
        },
    },
});

Шаг 10. Обновление файла app.js

Откройте файл app.js и обновите его следующим образом:

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

const app = createApp({});

app.mount("#app");

Шаг 11: Изменение шаблонов блейдов

Чтобы компоненты Vue.js работали с механизмом шаблонов Laravel Blade, вам нужно внести несколько изменений в файлы блейдов. Откройте файлы app.blade.php и guest.blade.php и добавьте id="app" к их родительским элементам.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100" id="app">

....
....
....
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans text-gray-900 antialiased">
        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100" id="app">
....
....
....

Шаг 12: Создание компонентов Vue.js

Создайте новую папку с именем «components» внутри каталога resources/js. Внутри папки «components» создайте файл компонента Vue.js, например ComponentA.vue, и определите шаблон и логику компонента. Например:

<template>
    <h1>Working</h1>
</template>

Шаг 13: Регистрация компонентов Vue.js

Откройте файл app.js и импортируйте созданный компонент Vue.js. Зарегистрируйте компонент методом app.component. Например:

import './bootstrap';

import { createApp } from 'vue';
import ComponentA from './components/ComponentA.vue';

const app = createApp({});

app.component('ComponentA', ComponentA);

app.mount("#app");

Шаг 14. Использование компонентов Vue.js в шаблонах Blade

Зарегистрировав компонент Vue.js, вы теперь можете использовать его в своих шаблонах Blade. Откройте любой файл Blade и добавьте компонент, используя синтаксис <component-a></component-a>. Обязательно включите компонент в элемент <div id="app"></div>.

Другой компонент и получение данных из Laravel

Чтобы продемонстрировать выборку данных из базы данных, давайте создадим еще один компонент с именем ComponentB.vue в каталоге компонентов. Вы можете написать любой код внутри этого компонента. Зарегистрируйте его в файле app.js аналогично тому, как мы зарегистрировали первый компонент (ComponentA).

import './bootstrap';

import { createApp } from 'vue';
import ComponentA from './components/ComponentA.vue';
import componentB from './components/ComponentB.vue';

const app = createApp({});

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB);

app.mount("#app");

Отправка данных из файла блейда в компонент Vue

Чтобы отправить данные из блейд-файла Laravel в компонент Vue, мы передадим объект User компоненту ComponentA.vue. Откройте файл ComponentA.vue и внесите следующие изменения:

<script setup>
const props = defineProps({
    user: Object
});
</script>

<template>
    <h1>Hello, {{ user.name }}</h1>
</template>

Теперь вы можете отправить данные в ComponentA, используя тег <component-a>. Обновим файл dashboard.blade.php следующим образом:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <component-a :user="{{ Auth::user() }}"/>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Теперь, когда вы перезагружаете страницу, она будет отображать имя вошедшего в систему пользователя в файле ComponentA.

Получение данных из базы данных

Чтобы получить данные из базы данных в компоненте Vue, мы будем использовать пакет Axios. Установите Axios, выполнив следующую команду:

npm install axios

Поскольку мы интегрируем компоненты Vue.js в шаблон Blade и нам нужен доступ к информации о сеансе и другим веб-функциям, мы создадим маршрут в файле web.php.

В Laravel файл web.php специально используется для обработки маршрутов и взаимодействий, связанных с сетью, которые требуют управления сеансами, обработки файлов cookie, защиты CSRF и других функций, специфичных для сети.

Определив маршрут в web.php, мы гарантируем, что наш компонент Vue может получить доступ к данным сеанса и другим веб-функциям при выполнении HTTP-запросов или взаимодействии с серверной частью.

В нашем примере мы создадим простой маршрут для демонстрации получения данных с сервера. Добавьте следующий маршрут в файл web.php:

Route::get('/demo-request', function() {
    return response()->json(Auth::user());
});

Этот маршрут будет отвечать на запросы GET, сделанные на URL-адрес /demo-request. В этом случае мы возвращаем данные аутентифицированного пользователя в виде ответа JSON.

Используя web.php вместо api.php, мы гарантируем, что у маршрута есть доступ к информации о сеансе, файлам cookie и другим веб-функциям, которые могут потребоваться в нашем компоненте Vue.

Теперь давайте обновим файл ComponentA.vue, чтобы получать данные с помощью Axios:

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const user = ref();

async function sendRequest() {
    const response = await axios.get('/demo-request')

    if (response.status === 200) {
        user.value = response.data;
    }
}

</script>

<template>
    <h1>Hello, {{ user ? user.name : 'World' }}</h1>
    <button class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150" @click="sendRequest">Send Request</button>
</template>

В этом обновленном компоненте мы добавили кнопку, которая запускает функцию sendRequest при нажатии. Он использует Axios для выполнения запроса GET к маршруту /demo-request, который мы создали ранее. Затем данные ответа назначаются user ref.

Теперь компонент будет отображать «Hello, World» по умолчанию. При нажатии на кнопку текст изменится на «Привет, имя пользователя», как только данные будут извлечены из базы данных.

Вы также можете использовать Axios для обработки запросов POST и выполнения других операций API в ваших компонентах Vue.

Отправка запроса POST и токена CSRF

Чтобы обработать запрос POST и включить токен CSRF, выполните следующие действия:

В файле web.php создайте новый маршрут для запроса POST:

Route::post('/demo-post', function (Request $request) {
    // Validate the request data if needed

    // Perform some processing with the data

    // Return a response
    return response()->json(['message' => 'Post request successful']);
});

2. В шаблоне Blade добавьте токен CSRF в раздел <head> файла макета:

<head>
    <!-- Other meta tags and stylesheets -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

При работе с файлом Laravel web.php, который имеет встроенную защиту от CSRF (подделка межсайтовых запросов), важно включить токен CSRF в тег <head> вашего шаблона Blade. Это необходимо для обеспечения безопасной связи между вашим приложением и сервером. Без токена CSRF запрос не будет выполнен.

3. В вашем компоненте Vue.js используйте пакет Axios для обработки запроса POST:

import axios from 'axios';

async function submitData() {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    try {
        const response = await axios.post('/demo-post', { data }, {
            headers: {
                'X-CSRF-TOKEN': csrfToken,
            },
        });

        // Handle the response
    } catch (error) {
        // Handle errors
    }
}

Не забудьте настроить маршрут, поля формы и код обработки данных в соответствии с требованиями вашего конкретного приложения.

Вот и все! Теперь вы узнали, как отправить запрос POST с токеном CSRF в компоненте Vue.js в приложении Laravel.

При работе с Laravel и Vue.js у вас есть возможность улучшить свой опыт разработки, используя дополнительные пакеты. Одним из таких пакетов является robsontenorio/vue-api-query, который предлагает совместимость с spatie/laravel-query-builder. Включив этот пакет, вы можете упростить создание запросов API в своих приложениях Vue.js. Изучение этих инструментов и обновление экосистемы Laravel позволит вам оптимизировать рабочий процесс разработки и воспользоваться новыми возможностями. Удачного кодирования!