Cómo crear una aplicación con API de Laravel (PHP) y Front End de Vue.js (Nuxt.js)
Con Laravel tenemos bastantes formas de crear una aplicación utilizando el gestor de plantillas de Laravel (Blade) y alguna opción para el front-end como Vue o React. Sin embargo, en este post veremos cómo utilizar Laravel solo como API de autenticación y otro repositorio diferente del lado de FrontEnd en Vue.js.
Diseño de la solución
Antes que nada vamos a definir cómo va a ser el deiseño de arquitectura de la aplicación, cómo va a funcionar y como va se va a comunicar cada componente.
...
Laravel API setup
En un proyecto recién instalado de Laravel debes agregar el paquete laravel/breeze y ejecutar el comando de instalación para API. Este método hace parte de los Starter Kits de Laravel.
composer require laravel/breeze --dev
php artisan breeze:install api
php artisan migrateDespués de esto debemos configurar la URL del frontend para poder aceptar peticiones en Laravel desde esta URL. Si no configuras esta URL de la manera correcta vas a recibir un error en el navegador por CORS.
FRONTEND_URL=http://dev-misitio.com:3000Nuxt.js
Nuxt.js es un framework de frontend construido sobre Vue.js que ofrece excelentes características de desarrollo, como renderizado del lado del servidor, rutas generadas automáticamente, gestión mejorada de meta etiquetas y mejora del SEO.
En este artículo no discutiremos los beneficios y posibles desventajas de utilizar Nuxt sobre Vue. Sin embargo, si lo que quieres es desarrollar una aplicación abierta a internet, debes considerar que para los navegadores no es fácil indexar las páginas creadas dinámicamente con JavaScript. Si lo que vas a desarrollar es una app en una intranet, esto no debería ser un problema.
Requisitos
Debes crear una aplicación en Nuxt.js usando SSR con Node.js. Para cumplir este requisito puedes seguir el siguiente tutorial:
- Cómo crear applicación con Nuxt.js Paso a Paso
En el archivo nuxt.config.js.
axios: {
baseURL: 'http://dev-misitio.com',
credentials: true
}