Installation & Setup

Install the Laravel package and Vue adapter to start using Zonvoir Table in your application. If you are new to the package, review the Introduction to Zonvoir Table and verify your environment meets the system requirements (PHP 8.3+, Laravel 11/12/13, Vue 3.4+).

Install the Laravel package

Install Zonvoir Table using Composer:

composer require zonvoir/zonvoir-table

The package auto-discovers its service provider in Laravel.

Install the Vue adapter

Install the Vue adapter using your preferred JavaScript package manager:

npm install @zonvoir/zonvoir-table-vue

Or with pnpm:

pnpm add @zonvoir/zonvoir-table-vue

Or Yarn:

yarn add @zonvoir/zonvoir-table-vue

Import the styles

Import the Zonvoir Table stylesheet from your application’s JavaScript entry point:

import '@zonvoir/zonvoir-table-vue/style.css';

For example, in resources/js/app.ts:

import '../css/app.css';
import '@zonvoir/zonvoir-table-vue/style.css';

Import the component

Import ZonvoirTable wherever you need to render a table:

<script setup lang="ts">
import { ZonvoirTable } from '@zonvoir/zonvoir-table-vue';
</script>

You can then render a table payload returned by your Laravel application:

<template>
  <ZonvoirTable :table="users" />
</template>

Configure Tailwind CSS

If your application uses Tailwind CSS 4, add the Zonvoir Table package to your source scanning configuration:

@import "tailwindcss";

@source "../../node_modules/@zonvoir/zonvoir-table-vue/**/*.{js,vue}";

If you are using Tailwind CSS 3, add the package path to your tailwind.config.js content array:

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './node_modules/@zonvoir/zonvoir-table-vue/**/*.{js,vue}',
  ],
};

This ensures Tailwind detects classes used by the Vue adapter when building your application’s CSS.

You’re ready

Zonvoir Table is now installed.

Create your first table using the Artisan generator:

php artisan make:zon-table UsersTable --model=User

Then pass the generated table to an Inertia page:

return inertia('Users', [
    'users' => UsersTable::make(),
]);

And render it with the Vue adapter:

<script setup lang="ts">
import { ZonvoirTable } from '@zonvoir/zonvoir-table-vue';

defineProps<{
  users: unknown;
}>();
</script>

<template>
  <ZonvoirTable :table="users" />
</template>

Continue to Basic Usage to learn how to configure your first table, or see Generating Tables for Artisan scaffolding options.