DEV Community

Cristian Pallarés
Cristian Pallarés

Posted on

5 2

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (1)

Collapse
 
charlierydholm profile image
Charlie Rydholm

Hi,

I've deployed an application built with laravel-nuxt. But after I've deployed it gives me alot of 404 error messages.

searching for files with random letters and numbers in it.

in the /_nuxt/ file. But my _nuxt file is no longer in the ./public folder, it's in a sibling folder public_html. How can I fix this?

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay