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
.nuxtandpublic/_nuxtdirectories 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!
That's an impressive piece of work, a full Laravel/Nuxt integration! How did you get all of this 'magic' working? I'm planning to read your source code to understand how it works under the hood.
Searching for "laravel" and "nuxt" I saw that there were only a few Github projects dealing with this, that's a bit surprising since Laravel has a heavy 'bias' towards Vue.js and SSR (and hence Nuxt.js) seems a good fit for many Laravel projects (especially content-focused apps/websites).
I saw one other Laravel/Nuxt starter repo, but yours seems a bit more clean and lightweight.
Definitely want to try this out (another option would be to go for a pure Javascript approach, using node/express for the API/backend/server part rather than PHP/Laravel).
However the ease of development and the vibrant community are what attract me to a Laravel based solution (compared to for instance Django).