PHPackages                             jacquestrdx123/vue-inertia-resources - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. jacquestrdx123/vue-inertia-resources

ActiveLibrary[Admin Panels](/categories/admin)

jacquestrdx123/vue-inertia-resources
====================================

A Filament-like resource system for Inertia.js applications. Provides complete CRUD interface system with tables, forms, filters, actions, and more.

2.10.1(3mo ago)072MITVuePHP ^8.1

Since Jan 5Pushed 3mo agoCompare

[ Source](https://github.com/jacquestrdx123/vue3-admin-crud)[ Packagist](https://packagist.org/packages/jacquestrdx123/vue-inertia-resources)[ RSS](/packages/jacquestrdx123-vue-inertia-resources/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (8)Versions (23)Used By (0)

Vue Inertia Resources
=====================

[](#vue-inertia-resources)

A Filament-like resource system for Inertia.js applications. This package provides a complete CRUD interface system with tables, forms, filters, actions, and more. Includes Vue 3 components with Tailwind CSS 4 support.

Requirements
------------

[](#requirements)

- PHP >= 8.1
- Laravel >= 12.0
- Node.js >= 18.0.0
- npm >= 9.0.0
- Inertia.js (automatically installed with this package)
- Vue 3.x (automatically installed with this package)
- Tailwind CSS 4 (automatically installed with this package)
- Ziggy (automatically installed with this package via Composer)

Installation
------------

[](#installation)

### Quick Install

[](#quick-install)

Simply run:

```
composer require jacquestrdx123/vue-inertia-resources
```

This will automatically:

- ✅ Install all PHP/Laravel dependencies via Composer (including Ziggy for route helpers)
- ✅ Update your `package.json` with Vue 3 and Tailwind CSS 4 dependencies
- ✅ Set up the package structure

### Complete Setup

[](#complete-setup)

After the Composer installation, run:

```
# Run the installer (publishes assets, updates package.json, and runs npm install)
php artisan vue-inertia-resources:install
```

The installer will automatically:

- ✅ Merge npm dependencies into your `package.json` (including `laravel-vite-plugin`)
- ✅ Run `npm install` to install all dependencies
- ✅ Publish all package assets (components, config, migrations)
- ✅ Set up Tailwind CSS configuration

> **Note**: If you encounter "Cannot find package 'laravel'" errors, make sure `npm install` completed successfully. The `laravel-vite-plugin` package is required for Vite to work with Laravel.

Or manually publish assets:

```
# Publish all assets (config, migrations, Vue components, Tailwind config)
php artisan vendor:publish --tag=inertia-resource

# Or publish individually:
php artisan vendor:publish --tag=inertia-resource-config      # Configuration only
php artisan vendor:publish --tag=inertia-resource-migrations  # Migrations only
php artisan vendor:publish --tag=inertia-resource-components   # Vue components only
php artisan vendor:publish --tag=inertia-resource-tailwind    # Tailwind config only
```

### Vite Configuration

[](#vite-configuration)

Update your `vite.config.js` to include Tailwind CSS 4 and Vue support:

```
import { defineConfig } from "vite";
import laravel, { refreshPaths } from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: refreshPaths,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "resources/js"),
      "ziggy-js": path.resolve(
        __dirname,
        "vendor/tightenco/ziggy/dist/vue.es.js"
      ),
    },
  },
});
```

### Ziggy Route Helper Setup

[](#ziggy-route-helper-setup)

This package includes Ziggy for Laravel route helpers in Vue. **Ziggy is automatically installed via Composer** as a dependency when you install this package - no additional npm package is required.

The `ziggy-js` alias in Vite is just a path alias pointing to the vendor directory (`vendor/tightenco/ziggy/dist/vue.es.js`), not an npm package.

The setup is automatically configured, but if you see `@routes` literally rendering on your page, follow these troubleshooting steps:

1. **Update your Blade template** - Ensure `resources/views/app.blade.php` uses `@routes()` with parentheses:

    ```

    @routes()
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @inertiaHead
    ```
2. **Clear Blade view cache**:

    ```
    php artisan view:clear
    ```
3. **Verify Ziggy is installed**:

    ```
    composer show tightenco/ziggy
    ```
4. **Check your Vite configuration** - Ensure `vite.config.js` includes the Ziggy alias:

    ```
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "resources/js"),
        "ziggy-js": path.resolve(__dirname, "vendor/tightenco/ziggy/dist/vue.es.js"),
      },
    },
    ```
5. **Check your JavaScript entry point** - Ensure `resources/js/app.js` includes ZiggyVue:

    ```
    import { ZiggyVue } from "ziggy-js";

    createInertiaApp({
      setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
          .use(plugin)
          .use(ZiggyVue) // ← This must be present
          .mount(el);
      },
    });
    ```
6. **If you see "ziggy-js could not be resolved" error in Vite:**

    - Verify Ziggy is installed via Composer: `composer show tightenco/ziggy`
    - Verify the file exists: `ls -la vendor/tightenco/ziggy/dist/vue.es.js`
    - Make sure `vendor/tightenco/ziggy` exists - if not, run `composer install`
    - Ensure your `vite.config.js` includes the `ziggy-js` alias
    - Ensure your `app.js` uses the alias: `import { ZiggyVue } from "ziggy-js"`
    - Restart your Vite dev server after updating the config

Updating the Package
--------------------

[](#updating-the-package)

When you update the package to a new version, you may need to republish assets to get the latest Vue components, configuration files, or other assets.

### Republish Assets After Update

[](#republish-assets-after-update)

After updating the package via Composer:

```
composer update jacquestrdx123/vue-inertia-resources
```

Republish assets using one of these methods:

#### Option 1: Use the Publish Command (Recommended)

[](#option-1-use-the-publish-command-recommended)

```
# Republish all assets (will skip existing files)
php artisan vue-inertia-resources:publish

# Force republish all assets (overwrites existing files)
php artisan vue-inertia-resources:publish --force
```

#### Option 2: Use Laravel's Vendor Publish Command

[](#option-2-use-laravels-vendor-publish-command)

```
# Republish all assets (will skip existing files)
php artisan vendor:publish --tag=inertia-resource

# Force republish all assets (overwrites existing files)
php artisan vendor:publish --tag=inertia-resource --force

# Republish specific asset groups
php artisan vendor:publish --tag=inertia-resource-components --force  # Vue components only
php artisan vendor:publish --tag=inertia-resource-config --force      # Config only
php artisan vendor:publish --tag=inertia-resource-tailwind --force    # Tailwind config only
```

### What Gets Republished?

[](#what-gets-republished)

- **Vue Components**: Latest versions of table, form, and UI components
- **Configuration**: Updated config file (if you use `--force`)
- **Tailwind Config**: Updated Tailwind configuration (if you use `--force`)
- **CSS Assets**: Updated CSS files

> **Note**: Without `--force`, Laravel will skip files that already exist. Use `--force` to overwrite existing files with the latest versions from the package.

### CSS Setup

[](#css-setup)

Ensure your main CSS file (`resources/css/app.css`) includes Tailwind:

```
@import "tailwindcss";
```

If you're using the package's CSS file, import it in your main CSS:

```
@import "tailwindcss";
@import "./vue-inertia-resources.css";
```

### Import Vue Components

[](#import-vue-components)

After publishing, components will be available at `resources/js/vendor/inertia-resource/`. Import them in your Vue files:

```
// In your page components
import BaseDataTable from "@/vendor/inertia-resource/Components/Table/BaseDataTable.vue";
import FormBuilder from "@/vendor/inertia-resource/Components/Form/FormBuilder.vue";
import TextField from "@/vendor/inertia-resource/Components/Form/TextField.vue";
import SelectField from "@/vendor/inertia-resource/Components/Form/SelectField.vue";
import CsvImport from "@/vendor/inertia-resource/Components/Form/CsvImport.vue";
```

Components
----------

[](#components)

### CSV Import Component

[](#csv-import-component)

The `CsvImport` component provides a complete CSV import solution with file upload, column mapping, data preview, and example file downloads.

#### Features

[](#features)

- **File Upload**: Drag & drop or click to upload CSV files
- **Column Mapping**: Automatically detect CSV columns and map them to your data fields
- **Data Preview**: Preview parsed data before importing
- **Example Downloads**: Generate example CSV files with correct format
- **Validation**: File type and size validation
- **Auto-mapping**: Intelligent column name matching

#### Basic Usage

[](#basic-usage)

```

import { router } from '@inertiajs/vue3'
import CsvImport from '@/Components/Form/CsvImport.vue'

const columns = [
  {
    key: 'name',
    label: 'Full Name',
    required: true,
    type: 'text'
  },
  {
    key: 'email',
    label: 'Email Address',
    required: true,
    type: 'email'
  },
  {
    key: 'phone',
    label: 'Phone Number',
    required: false,
    type: 'text'
  },
  {
    key: 'birth_date',
    label: 'Birth Date',
    required: false,
    type: 'date',
    example: '1990-01-15'
  }
]

const handleImport = (data) => {
  // data.file - The uploaded File object
  // data.data - Array of mapped data objects
  // data.originalRows - Original CSV rows before mapping
  // data.mapping - Column mapping object

  router.post('/admin/customers/import', {
    data: data.data
  }, {
    onSuccess: () => {
      // Handle success
    },
    onError: (errors) => {
      // Handle errors
    }
  })
}

const handleError = (error) => {
  console.error('Import error:', error)
}

```

#### Column Configuration

[](#column-configuration)

Each column in the `columns` array can have the following properties:

- `key` (required) - Field identifier used in the mapped data
- `label` (optional) - Display label (defaults to `key`)
- `description` (optional) - Help text shown below the label
- `required` (optional) - Mark column as required (default: `false`)
- `type` (optional) - Type hint for example generation: `'email'`, `'date'`, `'number'`, `'boolean'`, `'text'`
- `example` (optional) - Custom example value for the CSV template

#### Props

[](#props)

PropTypeDefaultDescription`title`String`'CSV Import'`Component title`description`String`null`Component description`columns`Array`[]`Column definitions for mapping`required`Boolean`false`Mark file upload as required`uploadLabel`String`'CSV File'`File upload label`maxSize`Number`10240`Maximum file size in KB (default: 10MB)`importLabel`String`'Import'`Import button label`cancelLabel`String`'Cancel'`Cancel button label`showActions`Boolean`true`Show action buttons`showCancel`Boolean`true`Show cancel button`exampleFileName`String`'example.csv'`Example file download name`errorMessages`String/Array`[]`Error messages to displayAll `FormContainer` props are also supported (padding, shadow, background, rounded, border, maxWidth, class).

#### Events

[](#events)

- `@import` - Emitted when import button is clicked. Receives object with:
    - `file` - The uploaded File object
    - `data` - Array of mapped data objects
    - `originalRows` - Original CSV rows before mapping
    - `mapping` - Column mapping object
- `@cancel` - Emitted when cancel button is clicked
- `@file-selected` - Emitted when a file is selected and parsed
- `@error` - Emitted when an error occurs

#### Example with Backend Integration

[](#example-with-backend-integration)

```

import { router } from '@inertiajs/vue3'
import CsvImport from '@/Components/Form/CsvImport.vue'

const productColumns = [
  { key: 'sku', label: 'SKU', required: true },
  { key: 'name', label: 'Product Name', required: true },
  { key: 'price', label: 'Price', required: true, type: 'number' },
  { key: 'stock', label: 'Stock Quantity', type: 'number' }
]

const handleImport = async (importData) => {
  const formData = new FormData()
  formData.append('file', importData.file)
  formData.append('data', JSON.stringify(importData.data))
  formData.append('mapping', JSON.stringify(importData.mapping))

  router.post('/admin/products/import', formData, {
    forceFormData: true,
    onSuccess: () => {
      // Show success message
    },
    onError: (errors) => {
      // Handle validation errors
    }
  })
}

```

#### Backend Controller Example

[](#backend-controller-example)

```
public function import(Request $request)
{
    $request->validate([
        'data' => 'required|array',
        'data.*.sku' => 'required|string',
        'data.*.name' => 'required|string',
        'data.*.price' => 'required|numeric',
    ]);

    $imported = 0;
    $errors = [];

    foreach ($request->input('data') as $index => $row) {
        try {
            Product::create([
                'sku' => $row['sku'],
                'name' => $row['name'],
                'price' => $row['price'],
                'stock' => $row['stock'] ?? 0,
            ]);
            $imported++;
        } catch (\Exception $e) {
            $errors[] = "Row " . ($index + 1) . ": " . $e->getMessage();
        }
    }

    return redirect()->back()->with([
        'success' => "Successfully imported {$imported} products.",
        'errors' => $errors
    ]);
}
```

Configuration
-------------

[](#configuration)

Publish the configuration file:

```
php artisan vendor:publish --tag=inertia-resource-config
```

Configure your models and paths in `config/inertia-resource.php`:

```
return [
    'user_model' => \App\Models\User::class,
    'column_preference_model' => \InertiaResource\Models\UserColumnPreference::class, // Optional
    'resource_paths' => [
        app_path('Support/Inertia/Resources'),
    ],
    'route_prefix' => 'vue',
];
```

Optional: Column Preferences
----------------------------

[](#optional-column-preferences)

If you want to use the column preference feature, publish and run the migration:

```
php artisan vendor:publish --tag=inertia-resource-migrations
php artisan migrate
```

Then configure the model in your config:

```
'column_preference_model' => \InertiaResource\Models\UserColumnPreference::class,
```

Usage
-----

[](#usage)

### Quick Resource Generation

[](#quick-resource-generation)

You can use the `make:inertia-resource` Artisan command to quickly generate a complete InertiaResource setup:

```
# Generate InertiaResource only
php artisan make:inertia-resource User

# Generate InertiaResource + Controller
php artisan make:inertia-resource User --controller

# Generate InertiaResource + Routes
php artisan make:inertia-resource User --routes

# Generate InertiaResource + Vue pages
php artisan make:inertia-resource User --vue

# Generate everything (Resource, Controller, Routes, and Vue pages)
php artisan make:inertia-resource User --all
```

**Command Options:**

- `--controller` - Generate the controller class
- `--routes` - Generate route definitions
- `--vue` - Generate Vue page files (Index, Create, Edit, Show)
- `--all` - Generate controller, routes, and Vue files

**What Gets Generated:**

- **InertiaResource**: `app/Support/Inertia/Resources/{Model}Resource.php`
- **Controller**: `app/Http/Controllers/{Model}Controller.php` (if `--controller` or `--all`)
- **Routes**: Added to `routes/web.php` (if `--routes` or `--all`)
- **Vue Pages**: `resources/js/Pages/Resources/{Model}/Index.vue`, `Create.vue`, `Edit.vue`, `Show.vue` (if `--vue` or `--all`)

**Example:**

```
php artisan make:inertia-resource Product --all
```

This will create:

- `app/Support/Inertia/Resources/ProductResource.php`
- `app/Http/Controllers/ProductController.php`
- Routes in `routes/web.php` under `/admin/products` prefix
- Vue pages in `resources/js/Pages/Resources/Product/`

### Creating a Resource Manually

[](#creating-a-resource-manually)

Create a resource class extending `InertiaResource\Inertia\InertiaResource`:

```