Laravel 8 + Vue 3. SPA приложение

В данной статье рассматривается способ подготовки SPA-приложения для дальнейшей разработки с использованием Laravel 8 и Vue 3.

Вообще, Laravel из коробки поддерживает работу с Vue, с помощью своей надстройки над webpack'ом под названием mix. Но там Vue ориентирован больше на использование в качестве библиотеки: можно создавать компоненты, пихать их в blade шаблоны и все будет работать. При этом Laravel используется как основное приложение. В таком случае, можно не запариваться и использовать mix и стандартные средства использования Vue в Laravel.

Здесь же предлагается вариант когда laravel используется лишь как API, а всю работу по маршрутизации, шаблонизации и т.д. выполняет Vue.

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

1. Глобально установлен composer
2. Установлен node js и, в частности, npm

Установка Laravel 8

1. Выбираем директорию для будущего проекта cd path/to/project.loc.
2. Запускаем установку laravel composer create-project laravel/laravel projectdir --prefer-dist. Заменяем projectdir на своё.
3. Выпиливаем из laravel - mix и другие директории, касающиеся фронта:
   • package.json
   • package-lock.json
   • resources/js
   • webpack.mix.js
   • public/css
   • public/js
     и прочие папки, которые посчитаете относящиемися к фронту

Установка Vue 3

1. Устанавливаем глобально Vue CLI - npm install -g @vue/cli. Это специальная платформа Vue, которая позволяет генерить проекты на Vue. У нее даже есть свой интерфейс для контроля проектов, установки плагинов и пр. полезных фишек. Подробнее в доках по Vue CLI. С помощью нее мы и сгенерим проект Vue внутри проекта Laravel.
2. Создаём папку в проекте - frontend.
3. Переходим в эту папку в консоли - cd frontend. 
4. Устанавливаем с помощью ранее установленного Vue CLI проект - vue create app .. Убязательно указываем точку, чтобы не создавалась папка т.к. мы уже эту папку создали.
5. Конфиг для установки на скринах:

   Примечание. ESLint по желанию. Иногда его тяжко подружить с IDE!

   
6. Добавляем файл в корень папки frontend - vue.config.js и добавляем туда содержимое:

   module.exports = {
     // proxy API requests to Valet during development
     devServer: {
       proxy: 'http://laracon.test'
     },
   
     // output built static files to Laravel's public dir.
     // note the "build" script in package.json needs to be modified as well.
     outputDir: '../public',
   
     // modify the location of the generated HTML file.
     // make sure to do this only in production.
     indexPath: process.env.NODE_ENV === 'production'
       ? '../resources/views/index.blade.php'
       : 'index.html'
   }

   Редактируем proxy под свой. Это параметр, относительно которого будут отправляться запросы на API, например, с помощью axios.
7. Редактируем package.json:

   "build": "rm -rf ../public/{js,css,img} && vue-cli-service build --no-clean",

С этого момента можно запускать приложение из папки frontend с помощью npm run serve и вести разработку. На Laravel пишем все роуты в файле routes/api.php. Обращение к этим проутам происходит через http://localhost:8080/api/.

Можно посмотреть оригинал видео, откуда была взята большая часть материала: