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
//then
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:

config/app.php

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

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

routes/web.php

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

Route::get(
    '{uri}',
    '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->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:

package.json

{
    "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 Vue, vue-router, @nuxtjs/axios, etc. Let's create the nuxt.config.js file:

nuxt.config.js

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:

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.