JavaScript

<!-- Direct call (recommended) -->
<button @click="save()">Save</button>

<!-- With arguments -->
<button @click="delete(item.id)">Delete</button>

<!-- Multiple arguments -->
<button @click="update(item.id, { name: 'New Name' })">Update</button>

<!-- Declarative with v-click -->
<button v-click="save">Save</button>

<button @click="livue.toggle('showDetails')">
    {{ showDetails ? 'Hide' : 'Show' }} Details
</button>

<div v-if="showDetails">
    <p>Detailed content here...</p>
</div>

// Watch a property for changes
const unwatch = livue.watch('count', (newValue, oldValue) => {
    console.log('Count changed from', oldValue, 'to', newValue);
});

// Stop watching when no longer needed
unwatch();

const componentStore = useStore('demo-counter');
const globalStore = livue.useGlobalStore('demo-global-counter');

// Frontend updates (local until sync)
componentStore.count++;
globalStore.count++;

const syncToBackend = () => livue.sync();

// Access the root DOM element
const width = livue.$el.offsetWidth;
console.log('Component width:', width);

// Scroll into view
livue.$el.scrollIntoView({ behavior: 'smooth' });

<div>
    <input v-model-livue="email" type="email">

    <!-- Show error for a specific field -->
    <p v-if="$errors.email" class="text-red-500">
        {{ $errors.email }}
    </p>

    <!-- Loop through all errors (programmatic API) -->
    <ul v-if="Object.keys(livue.errors).length">
        <li v-for="(messages, field) in livue.errors">
            {{ field }}: {{ messages[0] }}
        </li>
    </ul>

    <button @click="livue.clearErrors()">Clear Errors</button>
</div>

// Get the first component on the page
const component = LiVue.first();

// Get all root/island components
const components = LiVue.all();
console.log('Found', components.length, 'components');

// Find a specific component by ID
const cart = LiVue.find('livue-abc123');
console.log(cart.state);

// Find all components by name
const counters = LiVue.getByName('counter');
// Returns: [{ id, name, state, livue }, ...]

import LiVue from 'livue';

LiVue.setup((app) => {
    // app is a Vue app instance (from createApp())
    // Configure it however you need
});

import LiVue from 'livue';
import MyButton from './components/MyButton.vue';
import DataTable from './components/DataTable.vue';

LiVue.setup((app) => {
    app.component('MyButton', MyButton);
    app.component('DataTable', DataTable);
});

import LiVue from 'livue';

LiVue.setup((app) => {
    app.directive('focus', {
        mounted(el) {
            el.focus();
        }
    });

    app.directive('tooltip', {
        mounted(el, binding) {
            el.title = binding.value;
        },
        updated(el, binding) {
            el.title = binding.value;
        }
    });
});

import { defineConfig } from 'vite';
import { resolve } from 'path';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    resolve: {
        alias: {
            'livue': resolve(__dirname, 'vendor/livue/livue/dist/livue.esm.js'),
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

import LiVue from 'livue';
import { createVuetify } from 'vuetify';
import 'vuetify/styles';

const vuetify = createVuetify({
    theme: {
        defaultTheme: 'dark'
    }
});

LiVue.setup((app) => {
    app.use(vuetify);
});

protected function defineStores(): array
{
    return [
        'demo-counter' => [
            'state' => ['count' => $this->serverCount],
            'bridge' => ['count' => 'serverCount'],
        ],
    ];
}

use LiVue\Facades\LiVue;

public function boot(): void
{
    // Global stores are defined once at bootstrap
    LiVue::createStore('demo-global-counter', [
        'state' => ['count' => 100],
        'bridge' => ['count' => 'globalCount'],
    ]);

    LiVue::createStore('demo-app-counter', [
        'state' => ['count' => 500],
    ]);
}

const componentStore = useStore('demo-counter');
const globalStore = livue.useGlobalStore('demo-global-counter');
const appGlobalStore = livue.useGlobalStore('demo-app-counter');

componentStore.count++;
globalStore.count++;
appGlobalStore.count++;

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
    state: () => ({ items: [] }),
});

import LiVue from 'livue';
import { createVuetify } from 'vuetify';
import { createI18n } from 'vue-i18n';

const vuetify = createVuetify({ /* ... */ });
const i18n = createI18n({ /* ... */ });

// Register multiple plugins in one call
LiVue.setup((app) => {
    app.use(vuetify);
    app.use(i18n);
});

// Or spread across multiple setup() calls
LiVue.setup((app) => {
    app.use(vuetify);
});

LiVue.setup((app) => {
    app.use(i18n);
});

LiVue.setup((app) => {
    app.use(MyPlugin, { option: 'value' });
    app.component('my-button', MyButton);
    app.directive('focus', focusDirective);
});

import LiVue from 'livue';

// Simple error handler
LiVue.onError((error, componentName) => {
    console.error('Error on', componentName, ':', error);
});

import LiVue from 'livue';
import { toast } from 'vue-sonner';

LiVue.onError((error, componentName) => {
    // Show toast to the user
    toast.error('Something went wrong. Please try again.');

    // Send to error tracking service
    Sentry.captureException(error, {
        tags: { component: componentName }
    });
});

const unsubscribe = LiVue.hook('component.init', ({ component, el, cleanup }) => {
    console.log('Component initialized:', component.name);

    // Register a cleanup function that runs when the component is destroyed
    cleanup(() => {
        console.log('Component destroyed:', component.name);
    });
});

// Later, stop listening to all component.init events
unsubscribe();

let requestStart;

LiVue.hook('request.started', ({ url, updateCount }) => {
    requestStart = performance.now();
    console.log(`Request to ${url} with ${updateCount} updates`);
});

LiVue.hook('request.finished', ({ url, success, error }) => {
    const duration = performance.now() - requestStart;

    if (success) {
        console.log(`Request completed in ${duration.toFixed(0)}ms`);
    } else {
        console.error('Request failed:', error);
    }
});

export function initAnalytics() {
    // Track component usage
    LiVue.hook('component.init', ({ component }) => {
        analytics.track('component_mounted', {
            name: component.name,
        });
    });

    // Track server interactions
    LiVue.hook('request.started', ({ url, updateCount }) => {
        analytics.track('server_request', {
            url,
            updates: updateCount,
        });
    });

    // Track errors
    LiVue.hook('error.occurred', ({ error, componentName }) => {
        analytics.track('component_error', {
            component: componentName,
            message: error.message,
        });
    });
}