BETA We're building something new — all help is welcome! Contribute →

Creating Components

Use Artisan commands to generate LiVue components in three different formats.

Artisan Command

The make:livue command generates LiVue components: 

php artisan make:livue ComponentName [--single] [--multi]

Component Types

LiVue supports three component formats, each suited for different use cases:

Standard

Class-based component with separate PHP class and Blade view.

make:livue Name

Single File (SFC)

PHP and template in one file, similar to Vue SFCs.

make:livue Name --single

Multi File (MFC)

Organized folder with PHP, Blade, JS, and CSS files.

make:livue Name --multi

Standard Component

The default format creates a PHP class and a Blade view: 

php artisan make:livue Counter

This creates two files:

app/LiVue/Counter.php
<?php

namespace App\LiVue;

use LiVue\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    protected function render(): string
    {
        return 'livue.counter';
    }
}
resources/views/livue/counter.blade.php
<div>
    <p>Count: {{ count }}</p>
    <button v-click:increment>
        +1
    </button>
</div>

Best for: Complex components, reusable logic, components that need unit testing, and when you prefer separation of concerns.

Single File Component (SFC)

Combines PHP logic and template in a single file using an anonymous class: 

php artisan make:livue Counter --single

This creates one file:

resources/views/livue/counter.blade.php
<?php

use LiVue\Component;

new class extends Component {
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }
};
?>

<div>
    <p>Count: {{ count }}</p>
    <button v-click:increment>+1</button>
</div>

Best for: Simple components, rapid prototyping, page-specific components, and when you prefer colocation of logic and template.

Multi File Component (MFC)

Creates a dedicated folder with separate files for PHP, template, JavaScript, and CSS: 

php artisan make:livue Dashboard --multi

This creates a folder structure:

resources/views/livue/dashboard/
├── dashboard.php        # PHP logic (anonymous class)
├── dashboard.blade.php  # Blade template
├── dashboard.js         # Vue Composition API setup
└── dashboard.css        # Scoped styles
dashboard.php
<?php

use LiVue\Component;

new class extends Component {
    public array $stats = [];

    public function mount(): void
    {
        $this->stats = $this->loadStats();
    }

    public function refresh(): void
    {
        $this->stats = $this->loadStats();
    }
};
dashboard.blade.php
<div class="dashboard">
    <h1>Dashboard</h1>
    <div v-for="stat in stats">
        {{ stat.label }}: {{ formatted(stat.value) }}
    </div>
    <button v-click:refresh>
        Refresh
    </button>
</div>
dashboard.js
// Vue Composition API setup
const formatted = (value) => {
    return new Intl.NumberFormat()
        .format(value);
};

onMounted(() => {
    console.log('Dashboard ready');
});

return { formatted };
dashboard.css
/* Scoped to this component */
.dashboard {
    padding: 2rem;
}

.dashboard h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

Best for: Complex UI components with custom JavaScript logic, components with dedicated styles, and when you need maximum organization.

Comparison

Feature Standard SFC MFC
Files created 2 1 4
PHP class Named class Anonymous Anonymous
Separate JS file No No Yes
Scoped CSS No No Yes
Unit testable Easy Harder Harder
Colocation No Yes Yes (folder)

Other Artisan Commands

Create a Form Object
php artisan make:livue-form Contact
# Creates: app/LiVue/Forms/ContactForm.php
Generate layout
php artisan livue:layout
# Generates the base layout for LiVue pages
← Overview Properties →