Laravel + Vue: Базова інтеграція - javascript.org.ua

Уявіть веб-додаток, де ваш бекенд бездоганно обробляє складну логіку, а фронтенд пропонує плавний та інтерактивний досвід. З Laravel і Vue.js ця мрія стає реальністю.

У цьому пості ми одразу перейдемо до процесу інтеграції — пропускаючи базові відомості про Laravel та Vue.js — щоб ви могли швидко дізнатися, як їх з'єднати та створити масштабований, динамічний веб-додаток з нуля.

Git репозиторій

laravel-vue-setup

Передумови

Composer
PHP 8+
Laravel 11
Node

Встановлення Laravel інсталятора через Composer

composer global require laravel/installer

Створення проекту

laravel new laravel-vue-setup

Встановлення node модулів

npm install

Встановлення Vue та vite-plugin

npm install vue@3 @vitejs/plugin-vue

Після встановлення Vue party😁, залежності в package.json повинні виглядати так:

// package.json  
{  
 "private": true,  
 "type": "module",  
 "scripts": {  
 "build": "vite build",  
 "dev": "vite"  
 },  
 "devDependencies": {  
 "autoprefixer": "^10.4.20",  
 "axios": "^1.7.4",  
 "concurrently": "^9.0.1",  
 "laravel-vite-plugin": "^1.0",  
 "postcss": "^8.4.47",  
 "tailwindcss": "^3.4.13",  
 "vite": "^6.0"  
 },  
 "dependencies": {  
 "@vitejs/plugin-vue": "^5.2.1",  
 "vue": "^3.5.13"  
 }  
}

Налаштування Vite

Щоб почати використовувати Vue в Laravel, плагін Vite для Vue потрібно додати до масиву плагінів у файлі vite.config.js.

// vite.config.js  
import { defineConfig } from 'vite';  
import laravel from 'laravel-vite-plugin';  
import vue from "@vitejs/plugin-vue";  

export default defineConfig({  
 plugins: [  
 vue(),  
 laravel({  
 input: ['resources/css/app.css', 'resources/js/app.js'],  
 refresh: true,  
 }),  
 ],  
 resolve: {  
 alias: {  
 vue: "vue/dist/vue.esm-bundler.js",  
 },  
 },  
});

Налаштування Blade файлу та маршруту web

Створіть Blade файл у resources/view з ім'ям index.blade.php і підключіть ресурси vite (app.js, app.css).







 @vite(['resources/js/app.js', 'resources/css/app.css'])  




          ``` Змініть стандартну маршрутизацію в папці _web.php_ з папки _routes_.  ```     ```  ## Останній крок  Запустіть наступні команди і все готово🥳.  ``` npm run dev ```  ``` php artisan serve ```  **Наступне:** [_Laravel + Vue: Маршрутизація_](/@hadarsh04/laravel-vue-routing-1a4a844978fa)  ## Щиро дякую вам за увагу та час, який ви витратили на прочитання цього посту.🕺



Перекладено з: [Laravel + Vue: Basic Integration](https://medium.com/@hadarsh04/laravel-vue-basic-integration-and-setup-vite-9497b63d2bdf)