LaravelNuxt under the hood

Cristian Pallarés — Tue, 17 Jul 2018 18:08:42 +0000

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.

Create a SPA with Laravel and Nuxt

Cristian Pallarés — Tue, 13 Feb 2018 20:54:40 +0000

In this tutorial we'll use Laravel as an API and Nuxt as a Single Page Application. They can work together, but it's not an easy task at first. If you already tried, getting HMR to seamlessly work is a pain! For that reason I created laravel-nuxt and laravel-nuxt-js.

There are more reasons to use these packages, such as when using Laravel Passport and the CreateFreshApiToken. The middleware will create an api_token cookie on web routes that use the get http verb, and that's a problem if you're not serving your SPA from within Laravel.

Getting started

Install Laravel

Let's start with fresh new Laravel installation:

composer create-project laravel/laravel spa

Go inside the spa directory with your terminal.

Install laravel-nuxt (for PHP)

# cd spa
composer require pallares/laravel-nuxt

This package will be autodiscovered. If you're using old versions of Laravel, just add the service provider in config/app.php file:

<?php
return [
    // ...
    'providers' => [
        // ...
        Pallares\LaravelNuxt\LaravelNuxtServiceProvider::class,
    ],
];

Add a fallback route that will render the SPA page in routes/web.php file. Be sure to remove the default route that comes with the framework:

<?php
// Route::get('/', function () {
//     return view('welcome');
// });

Route::get(
    '{uri}',
    '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('uri', '.*');

Now, your backend is ready to serve the compiled assets that Nuxt will generate for you. Every route that would return a 404 now will serve our SPA page.

Install laravel-nuxt (for JS)

It's time to install the JS package. Replace your package.json file with this:

{
    "private": true,
    "scripts": {
        "start": "laravel-nuxt dev",
        "build": "laravel-nuxt build"
    },
    "dependencies": {
        "laravel-nuxt": "^1.0.0"
    }
}

Install the dependencies:

npm install

The laravel-nuxt package will install Nuxt for you, along with Vue, vue-router, @nuxtjs/axios, etc. Let's create the nuxt.config.js file:

const laravelNuxt = require("laravel-nuxt");

module.exports = laravelNuxt({
  // Options such as mode, srcDir and generate.dir are already handled for you.
  modules: [],
  plugins: [],
});

From now on, Nuxt will look for the source files in the resources/nuxt directory.

Create a hello world route in resources/nuxt/pages/index.vue:

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'world' };
  },
};
</script>

Finally, run:

npm start

Go to http://localhost:8000. You should see this:

That's it! Laravel artisan's server and Nuxt's dev server are up and working together transparently. Try editing your home page now, it's very enjoyable to see the live reload in action.

Under the hood, Nuxt's dev server is proxying every call to the Laravel's server, including the SPA rendering. Since @nuxtjs/axios module is included (and proxied, too), you can make API calls normally.

Calling the API from the SPA

The SPA will surely need to call our API, so let's add a route to routes/api.php to retrieve the user information:

<?php
Route::get('me', function () {
    // Let's return fake information.
    return [
        'name' => 'John Doe',
    ];
});

Now, edit resources/nuxt/pages/index.vue:

<template>
  <h1>Hello {{ user.name }}!</h1>
</template>

<script>
export default {
    // https://github.com/nuxt-community/axios-module
    async asyncData({ app }) {
        const user = await app.$axios.$get('api/me');
        return { user };
    },
};
</script>

Voila! Your page should now look like this!

In order to keep the tutorial simple, we aren't using any kind of authentication here. Integrating Passport should be almost trivial here.

Deployment

If you want to deploy your application, just run npm run build. The compiled assets will be placed in the public/_nuxt directory.

You can preview your final app with the well known artisan command php artisan serve.

You may want to add the .nuxt and public/_nuxt directories to your .gitignore.

Final thoughts

This is my first tutorial. I hope everything is clear and concise! Please, don't hesitate to ask questions here or create issues in the laravel-nuxt repositories. Thanks!

Forem: Cristian Pallarés