Laravel with Turbo JS

2 min readMar 29, 2023

Turbo is a JavaScript library to make building fast and highly interactive web applications easier. It works by using a technique called “Turbo Links”, which allows you to navigate between pages on your site without fully reloading the page.

In a Laravel application, you can use Turbo to enhance the user experience by adding fast, smooth page transitions and making your application feel more like a single-page application. TurboJS is the JavaScript library that powers Turbo Links and is designed to work seamlessly with Rails and other server-side web frameworks, including Laravel.

Using Turbo in your Laravel application requires installing the TurboJS library and adding some simple markup to your HTML. Once set up, Turbo can handle page transitions and form submissions automatically, providing a more fluid and interactive experience for your users.

Overall, TurboJS is a great tool for enhancing the performance and user experience of Laravel web applications, and it can help you create highly interactive and engaging web applications with less effort.

Step 1: Install Laravel

First, you need to install Laravel. If you haven’t installed it already, you can follow the official documentation for installing Laravel: https://laravel.com/docs/8.x/installation

Step 2: Create a new Laravel project

Once Laravel is installed, create a new Laravel project using the following command:

laravel new laravel-turbo-demo

Step 3: Install Turbo

Next, install Turbo using npm. You can do this by running the following command in the root directory of your Laravel project:

npm install @hotwired/turbo

Step 4: Create a new route

Create a new route in your Laravel project by adding the following code to the routes/web.php file:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index'])->name('home');

Step 5: Create a new controller

Create a new controller in your Laravel project by running the following command:

php artisan make:controller HomeController

This will create a new file called HomeController.php in the app/Http/Controllers directory.

Step 6: Add code to the controller

Add the following code to the index method in the HomeController.php file:

public function index()
{
    return view('home');
}

Step 7: Create a new view

Create a new view in your Laravel project by creating a new file called home.blade.php in the resources/views directory

Step 8: Add Turbo code to the view

Add the following code to the home.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel with TurboJS Demo</title>
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
    <h1>Welcome to the Laravel with TurboJS</h1>

    <a href="{{ route('home') }}" data-turbo>Home</a>
</body>
</html>

Step 9: Run the project Finally,

run the project using the following command:

php artisan serve

Now you can go to http://localhost:8000/ in your web browser and see the Laravel with TurboJS demo in action!

Note: Make sure that you have run npm run dev command after step 3 to compile the JavaScript assets.

Laravel with Turbo JS

Written by Rathod Akash