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.
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.
#laravel #laravel-8x #spa #nuxt-js #vue-js