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
Una de las características de Laravel es que permite de crear un scaffolding de API para autenticar aplicaciones JavaScript modernas, como las que funcionan con Next, Nuxt y otras. En esta sección veremos como crear dicho scaffolding haciendo uso de los Starter Kits de Laravel.
Requisitos
En primer lugar necesitaremos una aplicación de Laravel recién instalada en su última versión. Puedes ver las guías de instalación de la Laravel en el siguiente post.
- Instalación Laravel Framework
Al momento de crear este post la versión actual de Laravel es la 10x y esta es la versión sobre la cual estamos diseñando la solución.
Desde la versión 8x Laravel provee algunos Starter Kits como una manera fácil y rápida de automatizar el scaffold (andamio / estructura) de una aplicación. Vamos entonces a instalar laravel/breeze y a ejecutar el comando de instalación para un scaffold de 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. Suponiendo que tienes configurado el virtual host dev-misitio.com el valor que debes configurar sería similar al siguiente.
FRONTEND_URL=http://dev-misitio.com:3000Laravel provee el archivo de configuración config/cors.php en donde puedes ver los origenes desde los cuales se puede consumir la API. Si necesitamos uno adicional, podrás agregalo a la key allowed_origins.
Nuxt.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 de configuración nuxt.config.js debes colocar la URL de tu virtual host y habilitar las credenciales para axios.
axios: {
baseURL: 'http://dev-misitio.com',
credentials: true
}