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 Vuevue-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:

path
http://localhost:8000

 

laravel-nuxt-js-spa-example

 

Hope it can help you.

 

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