LiVue - Server-driven reactivity for Laravel using Vue.js

Requirements

PHP 8.2 or higher
Laravel 11 or 12
Vue.js 3.5+
Node.js 18+ (for building assets)

1. Install the Package

Install LiVue via Composer:

composer require livue/livue

2. Publish Assets

Publish the LiVue JavaScript bundle to your public directory:

php artisan vendor:publish --tag=livue-assets

Optionally, publish the configuration file:

php artisan vendor:publish --tag=livue-config

3. Include Scripts

Add the LiVue scripts to your layout. You have two options:

Option A: Auto-injection (Recommended)

LiVue automatically injects scripts when it detects components on the page. Just make sure the middleware is registered (it is by default).

Option B: Manual inclusion

Add the directive to your layout's <head>:

<head>
    ...
    @livueScripts
</head>

4. Create Your First Component

Generate a new LiVue component:

php artisan make:livue Counter

This creates two files:

• app/LiVue/Counter.php - The PHP component
• resources/views/livue/counter.blade.php - The Blade template

5. Use the Component

Render your component in any Blade view:

@livue('counter')

Or as a full-page component in your routes:

use LiVue\Facades\LiVue;
use App\LiVue\Counter;

LiVue::route('/counter', Counter::class);

Vite Integration (Optional)

For development with HMR support, you can include LiVue through Vite instead of using the published bundle:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
        }),
        vue(),
    ],
});

Installation