Share this:

As web development continues to evolve, new tools and techniques are constantly emerging to help developers optimize and streamline their workflows. Vite.js is one such tool, providing a fast and flexible build system and development server designed to work with modern web development frameworks.

By combining Laravel 10, Alpine.js, and Vite.js, you can create a powerful and efficient development environment for building highly interactive web applications.

In this blog post, we will guide you through the process of integrating Alpine.js with Laravel 10 using Vite.js as the build tool and development server.

Step 1: Create a New Laravel Project

First, you need to create a new Laravel project or navigate to your existing Laravel 10 project folder. To create a new Laravel 10 project, run the following command in your terminal:

composer create-project --prefer-dist laravel/laravel my-alpine-vite-app

Replace “my-alpine-vite-app” with your desired project name. This command will create a new Laravel 10 project and install all necessary dependencies.

Step 2: Install Alpine.js

Run the following command to install Alpine.js:

npm install alpinejs

Step 3: Configure Alpine.js with Vite.js

  1. In your Laravel project, open the resources/js/app.js file, and import Alpine.js:
import 'alpinejs';
  1. Create a new file resources/js/counter.js and add the following content:
export default function counter() {
    return {
        count: 0,
        increment() {
        decrement() {
  1. Import the counter component in resources/js/app.js:
import 'alpinejs';
import counter from './counter';

document.addEventListener('alpine:init', () => {'counter', counter);

Step 4: Utilize Alpine.js in Your Laravel Views

  1. In your resources/views folder, create a new file called counter.blade.php.
  2. Add the following code to counter.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine.js Counter Example</title>
    <div x-data="counter()">
        <h1>Counter: <span x-text="count"></span></h1>
        <button @click="increment()">Increase</button>
        <button @click="decrement()">Decrease</button>

    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}

Step 5: Create a Route to Display the Counter View

Open the routes/web.php file and add the following route:

use Illuminate\Support\Facades\Route;

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

Step 6: Start the Laravel and Vite.js Development Servers

Open a terminal and run the following command to start the Laravel development server:

php artisan serve

Open another terminal and run the following command to start the Vite.js development server:

npm run dev

Now, navigate to your Laravel application in your browser and visit the /counter route (e.g., http://localhost:8000/counter). You should see the Alpine.js counter example working as expected, allowing you to increase and decrease the counter value.


You have successfully integrated Alpine.js with Laravel 10 using the built-in Vite.js support. By leveraging this modern development environment, you can build interactive and dynamic web applications with ease. Remember to explore the official documentation for Alpine.js ( and Vite.js ( to learn more about their features and capabilities.

Happy coding!

Share this:

Categorized in: