How to create an application with Laravel API (PHP) and Vue.js (Nuxt.js) Front End.
With Laravel we have many ways to create an application using Laravel's template engine (Blade) and some option for the front-end like Vue or React. However, in this post we will see how to use Laravel only as an authentication API and a different FrontEnd repository in Vue.js.
Solution design
First, we will define how the architecture design of the application will be, how it will work, and how each component will communicate.
...
Laravel API setup
In a newly installed Laravel project, you must add the laravel/breeze package and run the API installation command. This method is part of Laravel's Starter Kits.
composer require laravel/breeze --dev
php artisan breeze:install api
php artisan migrateAfter this, we must configure the frontend URL to be able to accept requests in Laravel from this URL. If you do not configure this URL correctly, you will receive an error in the browser due to CORS.
FRONTEND_URL=http://dev-misitio.com:3000Nuxt.js
Nuxt.js is a frontend framework built on top of Vue.js that offers great development features such as server-side rendering, automatically generated routes, enhanced management of meta tags, and improved SEO.
In this article, we will not discuss the benefits and possible disadvantages of using Nuxt over Vue. However, if you want to develop an application open to the internet, you should consider that for browsers, it is not easy to index pages dynamically created with JavaScript. If what you are going to develop is an app on an intranet, this should not be a problem.
Requirements
You must create an application in Nuxt.js using SSR with Node.js. To meet this requirement, you can follow the following tutorial:
- How to create an application with Nuxt.js Step by Step
In the nuxt.config.js file.
axios: {
baseURL: 'http://dev-misitio.com',
credentials: true
}