​

MakeInertiaForm Command Documentation / Dokumentasi Command MakeInertiaForm

​

English Documentation

​

Overview

​

Command Signature

php artisan make:inertia-form {yamlFile} [options]

​

Required Arguments

• yamlFile: Path to the YAML configuration file (relative to project root)

​

Available Options

• --output-path=: Path where the generated Vue components will be saved (required)
• --route-prefix=: Sets the route prefix for form submission routes
• --model-variable=: Sets the variable name for the model object
• --entity-name=: Sets the entity name for the generated components
• --entity-name-lower=: Sets the lowercase entity name for routes

​

YAML Configuration Structure

form:
  - name: "title"
    label: "Title"
    model: "title"
    type: "text"
    validator: "required|string|max:255"
    create: true
    edit: true
  - name: "content"
    label: "Content"
    model: "content" 
    type: "textarea"
    validator: "nullable|string"
    create: true
    edit: true

view:
  - name: "title"
    label: "Title"
    model: "title"
    type: "text"
    visible: true
  - name: "content"
    label: "Content"
    model: "content"
    type: "textarea"
    visible: true

vue:
  - name: "title"
    type: "string"
    nullable: false
  - name: "content" 
    type: "string"
    nullable: true
  - name: "created_at"
    type: "datetime"
    nullable: true
  - name: "status"
    type: "string"
    nullable: false

​

Section Details

• name: Field identifier
• label: Display label for the field
• model: Model property name for v-model binding
• type: Input type (text, textarea, email, password, number, etc.)
• validator: Laravel validation rules
• create: Whether to include in create forms
• edit: Whether to include in edit forms

• name: Field identifier
• label: Display label for the field
• model: Model property name
• type: Display type (text, textarea, date, boolean, image, etc.)
• visible: Whether to show in view components

• name: TypeScript interface field name
• type: Data type for TypeScript mapping
• nullable: Whether the field can be null/undefined

​

Enhanced Features

​

TypeScript Interface Generation

interface EntityInterface {
  title: string;
  content?: string;
  created_at?: string;
  status: string;
}

​

Type Mapping

• string, text, textarea, email → string
• integer, int, number → number
• boolean, bool → boolean
• datetime, date, time, timestamp → string
• json, object → any
• array → any[]

​

Additional Field Generation

​

Generated Components

1. CreateForm.vue: Form for creating new entities
2. EditForm.vue: Form for editing existing entities
3. ShowView.vue: Read-only view component for displaying entity data

​

Placeholder Replacements

• {{{pl_form_fields}}}: Generated form input fields
• {{{pl_form_models}}}: Generated form model definitions
• {{{pl_view_fields}}}: Generated view display fields
• {{{pl_vue_interface_fields}}}: TypeScript interface field definitions
• {{{pl_vue_additional_fields}}}: Additional fields from vue section
• {{pl_store_route}}: Route for creating entities
• {{pl_update_route}}: Route for updating entities
• {{pl_model_variable}}: Variable name for the model object

​

Usage Examples

​

Basic Usage

php artisan make:inertia-form resources/models/controllers/directory/manager_controller.yml \
  --output-path="resources/js/Pages/Manager/Components" \
  --route-prefix="admin.manager" \
  --model-variable="manager" \
  --entity-name="Manager" \
  --entity-name-lower="manager"

​

Real-World Example with Project YAML

# Generate manager form components
php artisan make:inertia-form resources/models/controllers/directory/manager_controller.yml \
  --output-path="resources/js/Pages/Directory/Manager/Components" \
  --route-prefix="directory.manager" \
  --model-variable="manager" \
  --entity-name="Manager" \
  --entity-name-lower="manager"

• CreateForm.vue: Manager creation form
• EditForm.vue: Manager editing form
• ShowView.vue: Manager display component

​

Field Type Support

​

Input Field Types

• text: Standard text input
• textarea: Multi-line text input
• email: Email input with validation
• password: Password input (masked)
• number/integer: Numeric input
• boolean/simpleswitch: Boolean toggle

​

View Component Types

• text: Simple text display
• textarea: Multi-line text with whitespace preservation
• boolean: Badge display (Yes/No)
• date/datetime: Formatted date display
• image/imagecardview: Image display with fallback

​

Error Handling

• Validates YAML file existence and format
• Validates required options (output-path)
• Creates output directories if they don’t exist
• Provides clear error messages for missing stub files
• Returns appropriate exit codes (0 for success, 1 for error)

​

Dependencies

• symfony/yaml package for YAML parsing
• Laravel’s Console Command base class
• Properly formatted stub templates:
  • resources/views/stubs/inertia/js/CreateForm.vue.stub
  • resources/views/stubs/inertia/js/EditForm.vue.stub
  • resources/views/stubs/inertia/js/ShowView.vue.stub

​

Integration with Other Commands

• MakeInertiaColumns: Uses the same vue section for TypeScript interface consistency
• MakeInertiaCrud: Provides form components that integrate with generated CRUD interfaces

​

Best Practices

1. Consistent Naming: Use consistent field names across form, view, and vue sections
2. Type Safety: Define proper types in the vue section for better TypeScript support
3. Validation: Include proper validation rules in the form section
4. Visibility Control: Use the visible, create, and edit flags to control field display
5. Nullable Fields: Mark optional fields as nullable in the vue section

​

Dokumentasi Bahasa Indonesia

​

Gambaran Umum

​

Tanda Tangan Command

php artisan make:inertia-form {yamlFile} [opsi]

​

Argumen Wajib

• yamlFile: Path ke file konfigurasi YAML (relatif terhadap root proyek)

​

Opsi yang Tersedia

• --output-path=: Path tempat komponen Vue yang dihasilkan akan disimpan (wajib)
• --route-prefix=: Mengatur prefix route untuk route pengiriman form
• --model-variable=: Mengatur nama variabel untuk objek model
• --entity-name=: Mengatur nama entitas untuk komponen yang dihasilkan
• --entity-name-lower=: Mengatur nama entitas huruf kecil untuk route

​

Struktur Konfigurasi YAML

form:
  - name: "title"
    label: "Judul"
    model: "title"
    type: "text"
    validator: "required|string|max:255"
    create: true
    edit: true

view:
  - name: "title"
    label: "Judul"
    model: "title"
    type: "text"
    visible: true

vue:
  - name: "title"
    type: "string"
    nullable: false

​

Detail Seksi

• name: Identifier field
• label: Label tampilan untuk field
• model: Nama properti model untuk binding v-model
• type: Tipe input (text, textarea, email, password, number, dll.)
• validator: Aturan validasi Laravel
• create: Apakah disertakan dalam form create
• edit: Apakah disertakan dalam form edit

• name: Identifier field
• label: Label tampilan untuk field
• model: Nama properti model
• type: Tipe tampilan (text, textarea, date, boolean, image, dll.)
• visible: Apakah ditampilkan dalam komponen view

• name: Nama field interface TypeScript
• type: Tipe data untuk mapping TypeScript
• nullable: Apakah field bisa null/undefined

​

Fitur yang Ditingkatkan

​

Generasi Interface TypeScript

interface EntityInterface {
  title: string;
  content?: string;
  created_at?: string;
  status: string;
}

​

Mapping Tipe

• string, text, textarea, email → string
• integer, int, number → number
• boolean, bool → boolean
• datetime, date, time, timestamp → string
• json, object → any
• array → any[]

​

Komponen yang Dihasilkan

1. CreateForm.vue: Form untuk membuat entitas baru
2. EditForm.vue: Form untuk mengedit entitas yang ada
3. ShowView.vue: Komponen view read-only untuk menampilkan data entitas

​

Contoh Penggunaan

​

Penggunaan Dasar

php artisan make:inertia-form resources/models/controllers/directory/manager_controller.yml \
  --output-path="resources/js/Pages/Manager/Components" \
  --route-prefix="admin.manager" \
  --model-variable="manager" \
  --entity-name="Manager" \
  --entity-name-lower="manager"

​

Penanganan Error

• Memvalidasi keberadaan dan format file YAML
• Memvalidasi opsi yang diperlukan (output-path)
• Membuat direktori output jika belum ada
• Menyediakan pesan error yang jelas untuk file stub yang hilang
• Mengembalikan kode keluar yang sesuai (0 untuk sukses, 1 untuk error)

​

Dependencies

• Package symfony/yaml untuk parsing YAML
• Kelas base Laravel Console Command
• Template stub yang terformat dengan benar

​

Best Practice

1. Penamaan Konsisten: Gunakan nama field yang konsisten di seluruh seksi form, view, dan vue
2. Type Safety: Definisikan tipe yang tepat di seksi vue untuk dukungan TypeScript yang lebih baik
3. Validasi: Sertakan aturan validasi yang tepat di seksi form
4. Kontrol Visibilitas: Gunakan flag visible, create, dan edit untuk mengontrol tampilan field
5. Field Nullable: Tandai field opsional sebagai nullable di seksi vue