Как правильно создать страницы с использованием Vue и Laravel?

Как лучше организовать маршрутизацию страниц при использовании Laravel? Например, у меня есть главная страница `welcome.blade.php`. Как правильно интегрировать в неё компоненты Vue - вставлять их прямо в этот шаблон, или есть другие подходы?
  • 12 июня 2024 г. 10:21
Ответы на вопрос 2
Для создания страниц с использованием Vue и Laravel, можно следовать следующим шагам:

1. Убедитесь, что у вас установлен Laravel и Vue. Если их нет, установите их с помощью Composer и npm соответственно.

2. Создайте компонент Vue, используя команду `vue init webpack frontend` (где "frontend" - название вашего проекта).

3. Затем создайте маршрут в Laravel для отображения вашей страницы с компонентом Vue. Вы можете использовать `Route::get('/', function () { return view('welcome'); });` для этой цели.

4. Подключите скомпилированные файлы Vue в свою страницу Laravel. Для этого добавьте ссылку на скомпилированный JS файл в `<script>` теге и на скомпилированный CSS файл в `<link>` теге в вашем шаблоне `welcome.blade.php`.

5. Создайте элемент `<div>` с уникальным `id`, в который будет монтироваться ваш компонент Vue.

6. Создайте экземпляр Vue и укажите `el` как ваш уникальный `id`. Пример:

```javascript
const app = new Vue({ el: '#app' });
```

7. Теперь вы можете добавить компоненты Vue в свой шаблон, используя тег `<script>` и `<template>` внутри вашего шаблона Laravel.


Относительно вопроса о маршрутизации страниц при использовании Laravel, вы можете использовать Vue Router для организации маршрутов в вашем приложении. Вы можете создать компоненты Vue для каждой страницы и определить маршруты в файле `routes/web.php`. Например:

```php
Route::get('/about', function () {
    return view('about');
});

Route::get('/contact', function () {
    return view('contact');
});
```

Затем вы можете добавить ссылки на эти маршруты в вашем приложении Vue, используя `<router-link>` компоненты. 

Относительно интеграции компонентов Vue в шаблон Laravel, лучше всего создать отдельные компоненты Vue и затем вставить их в шаблон Laravel с помощью `<script>` тега. Это делает код более модульным и обеспечивает лучшую организацию приложения.
Изучить Inertia. По-моему это единственный вариант для этой связки. Но я не знаю, как там с SSR. 

Или классический вариант. Vue отдельно, ларавел отдельно (и уже не важно, что там именно ларавел).
Похожие вопросы