LaravelNuxt under the hood

In this post we'll see how laravel-nuxt works. If you don't know what is it, you can check the introduction and tutorial
here.

Basically, there are two different modes:

• Development mode
• Production mode

Development mode

The laravel-nuxt dev command will launch two servers that interact with each other: Nuxt's and Laravel's dev servers.

The Nuxt server

Will be launched internally using:

nuxt dev --spa

This is the server we'll be fetching with our browser. Serves multiple purposes:

• Listen to the port 8000 by default.
• Compile assets and enable Hot Module Replacement.
• Render the HTML page when accessing a special dev URL (which is /__laravel_nuxt__ by default).
• Proxy any other routes to the Laravel server (that aren't /__laravel_nuxt__).

Proxying to Laravel is mandatory because we won't be handling headers or cookies using Nuxt.

The Laravel server

The Laravel server will be launched internally using:

php artisan serve

We aren't supposed to do any calls here. It will:

• Listen to the 8001 port by default.
• Serve your routes as usual (which should consist in API routes only).
• Serve a fallback route which will render the /__laravel_nuxt__ page whenever a non-AJAX call is made.
  • This is handled by the Pallares\LaravelNuxt\Controllers\NuxtController::class controller.
  • This should be your only web route.

With the proxying from Nuxt to Laravel, we let our app to attach any headers and cookies (like laravel_session) to the HTML rendered by Nuxt.

Production mode

The laravel-nuxt build command will just execute:

nuxt build

It'll compile all your frontend assets to the public/_nuxt directory, which will usually consist of some JS files and CSS files, along with a index.html file which will be served by the Pallares\LaravelNuxt\Controllers\NuxtController::class controller.

Any non-AJAX request to the Laravel server (that doesn't match any existing route) will render your HTML page. As you may have noticed, you'll never get a 404 response from Laravel (but you may still render a 404 page using Nuxt).

The app will be deployment-ready after executing this command. You can also test it using php artisan serve and opening http://localhost:8000/.

If you still have any doubts, don't hesitate to write a question here! Regards.