DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cristian PallarΓ©s
Cristian PallarΓ©s

Posted on

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.

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?

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.