My First SPA With Laravel And Nuxt Js

Hello artisan and vue js lover, in this laravel and nuxt js tutorial i will show you how we can create a single page application using laravel and nuxt js. From this tutorial you will also learn how to setup nuxt js in your laravel app.

To create this Laravel and nuxt js single page application i will use laravel-nuxt and laravel-nuxt-js packages. This package allows you to build a SPA with Laravel and Nuxt. So let's start.

Let's start with fresh Laravel installation:

composer create-project laravel/laravel spa


No go inside the spa directory with your terminal.

cd spa
composer require pallares/laravel-nuxt


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


return [
    // ...
    'providers' => [
        // ...


Add a fallback route that will render the SPA page from routes/web.php file.


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

)->where('uri', '.*');


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

Install laravel-nuxt 

It is time to install all the js packages. 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


This laravel-nuxt package will install Nuxt for you, along with Vuevue-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: [],


Now Nuxt will look for the source files in the resources/nuxt directory. So we need to create a hello world route in resources/nuxt/pages/index.vue:



All are set to go. Now run


npm start


Go to below url You should see this:





Hope it can help you.


#laravel #laravel-8x #spa #nuxt-js #vue-js