🇬🇧

Vue Daisy Components

Getting Started

Introduction

Vue Daisy Components is a comprehensive collection of Vue 3 components styled with Tailwind CSS and DaisyUI. Built with TypeScript, these components are designed for performance, accessibility, and developer experience.
🚀

Performance

Optimized for speed with lazy loading and efficient rendering

🎨

Design

Styled with DaisyUI, and adapt to your theme for seamless integration

⚡

TypeScript

Full TypeScript support with comprehensive type definitions

Setup

Installation and configuration guide

Prerequisites

Make sure you have the following dependencies installed: 
npm install vue@^3.5.21 tailwindcss@^4.1.12 daisyui@^5.0.50

Installation

npm install vue-daisy-components

Configuration

Configuration based on your Tailwind CSS version: 
/* Add to your main CSS file */
@import "tailwindcss";
@plugin "daisyui";

@source "./node_modules/vue-daisy-components";
// Add to your Tailwind configuration file (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/vue-daisy-components/**/*.{vue,js,ts}"
  ],
  plugins: [require("daisyui")]
}

Internationalization (i18n)

All components automatically adapt to the page language (based on the HTML lang attribute) if translations are available (if not, the default language is English). Available translations: English 🇬🇧, French 🇫🇷, Spanish 🇪🇸

Components

DataTable

Advanced data table with pagination, sorting, filtering, export and more.

Import

import { DataTable } from 'vue-daisy-components'

Basic

A simple data table with basic functionality. All props above are required.
Prop Type Default value Description
data Object[] | String Array of data objects (represents the table rows), see Advanced for more info about the String type usage
columns Object[] Array of column definitions (represents the table columns)
└─ key
String Unique identifier for the column (will be capitalized and used as the column header if no label, e.g. 'email' becomes 'Email') 
<template>
  <DataTable
    :data="data"
    :columns="columns"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id' },
    { key: 'name' },
    { key: 'email' }
  ];
</script>

Pagination

Data table with pagination controls.
Prop Type Default value Description
paginationConfig Object Pagination configuration
└─ maxVisiblePages
Number 5 Number of page buttons to display
└─ showFirstLast
Boolean true Show first/last page navigation buttons
└─ showPageInfo
Boolean true Display current page information
└─ perPageOptions
Number[] [5, 10, 25, 50] Array of items per page options
└─ perPage
Number 10 Default number of items per page 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id' },
    { key: 'name' },
    { key: 'email' }
  ];

  const paginationConfig = {
    maxVisiblePages: 2,
    showFirstLast: false,
    showPageInfo: false,
    perPageOptions: [4, 8, 12, 16, 20],
    perPage: 4
  };
</script>

Style

Customize the appearance of your data table.
Prop Type Default value Description
tableClass String table-zebra Defines the table classes, can be tailwind/daisyui classes but custom classes are also supported 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    tableClass="table-xs border-1 border-gray-300"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Label

Customize column headers with descriptive labels.
Prop Type Default value Description
columns Object[] See Basic for more info
└─ label
String Defines the column header label (default value: capitalized column key) 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: '1. ID' },
    { key: 'name', label: '2. Name' },
    { key: 'email', label: '3. Email' },
    { key: 'created_at', label: '4. Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Sort

Enable column sorting to help users find and organize data.
Prop Type Default value Description
columns Object[] See Basic for more info
└─ sortable
Boolean true Defines if the column is sortable 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', sortable: 'true' },
    { key: 'name', sortable: 'true' },
    { key: 'email', sortable: 'false' },
    { key: 'role', sortable: 'true' },
    { key: 'created_at', label: 'Created at', sortable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Filter

Add filtering capabilities to narrow down data.

Click the filter button to the left of the search bar to use the filters.

Prop Type Default value Description
columns Object[] See Basic for more info
└─ filterable
Boolean true Defines if the column is filterable, if all columns are not filterable, the filter button will disappear 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', filterable: 'false' },
    { key: 'name', filterable: 'true' },
    { key: 'email', filterable: 'false' },
    { key: 'role', filterable: 'true' },
    { key: 'created_at', label: 'Created at', filterable: 'true' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Export

Export the data to a CSV, JSON, or Excel file.
Prop Type Default value Description
exportFilename String | Boolean table-export Defines the filename of the exported file. If false, the export button will disappear. 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    exportFilename="my-table-export"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', searchable: 'false' },
    { key: 'name', searchable: 'false' },
    { key: 'email', searchable: 'false' },
    { key: 'role', searchable: 'false' },
    { key: 'created_at', label: 'Created at', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Custom Cells

Customize cells based on data values by using the cell-<column.key> slot.

For example, to customize the role cells, use the cell-role slot.

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :exportFilename="false"
  >
    <template #cell-role="{ value, row, column }">
      <span class="badge badge-sm badge-outline" :class="{
        'badge-primary': value === 'Admin',
        'badge-secondary': value === 'User',
        'badge-success': value === 'Moderator'
      }">
        {{ value }}
      </span>
    </template>
  </DataTable>
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Custom Actions

Add custom action buttons to the table.

You can use the @action event to handle the actions click.

Prop Type Default value Description
actionsConfig Object Defines the actions buttons to be displayed in the table
└─ actions
Object[] Array of actions
└─ action
String Action identifier (required, will be used to handle the action click)
└─ variant
String Variant of the action (primary, secondary, success, warning, error, info, ghost, link, neutral)
└─ icon
String | Component Icon of the action (add, edit, delete, refresh, or use your own component)
└─ tooltip
String Tooltip of the action (text to show on hover)
└─ disabled
Boolean false Defines if the action is disabled 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :actionsConfig="actionsConfig"
    @action="handleAction"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Add new' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Add new')
  };
</script>

Row Selection

Select multiple rows with checkboxes.

You can use the @bulk-action event to handle the bulk actions click.

Prop Type Default value Description
selectionConfig Object Defines the selection buttons to be displayed in the table
└─ actions
Object[] See Custom Actions for more info
└─ clearSelection
Boolean true Defines if the clear selection button is displayed 
<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :selectionConfig="selectionConfig"
    @bulk-action="handleBulkAction"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Edit selected' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Delete selected' }
    ]
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Edit selected: ${selectedData.length}`);
    else if (action === 'delete') alert(`Delete selected: ${selectedData.length}`);
  };
</script>

Advanced

Load data from an API endpoint (POST only).

Loading state is automatically handled by the component. Cache data is enabled by default.

You can also use the reloadData() method to clear the cache and reload the data (API mode only).

Prop Type Default value Description
data String | Object[] Defines the API endpoint to fetch the data from (full URL or relative path), see Basic for more info about the Object[] usage
customParameters Object Defines the additional parameters to be sent to the API

Request payload:

Prop Type Description
filters Object Filters values to apply to the request
page Number Page number
perPage Number Items per page
search String Search term to apply to the request
sort Object Sort order to apply to the request
└─ column
String Column to sort by
└─ ascending
Boolean Sort order (true for ascending, false for descending)
customParameters Object Defines the additional parameters to be sent to the API

Response structure:

Prop Type Description
data Object[] Data returned from the request
distinctValues Object Distinct values of the columns (for the filters)
page Number Page number
perPage Number Items per page
total Number Total number of items
totalPages Number Total number of pages 
<template>
  <DataTable
    data="/api/data.json"
    :columns="columns"
    :customParameters="customParameters"
    :actionsConfig="actionsConfig"
    :selectionConfig="selectionConfig"
    @action="handleAction"
    @bulk-action="handleBulkAction"
    ref="dataTableRef"
  />
</template>

<script setup>
  import { ref } from 'vue';
  import { DataTable } from 'vue-daisy-components';
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const customParameters = { lang: 'en' }

  const dataTableRef = ref();

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Add new' }, 
      { action: 'reload', variant: 'info', icon: 'refresh', tooltip: 'Reload data' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Add new');
    else if (action === 'reload') dataTableRef.value.reloadData();
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Edit selected' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Delete selected' }
    ],
    clearSelection: false
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Edit selected: ${selectedData.length}`);
    else if (action === 'delete') alert(`Delete selected: ${selectedData.length}`);
  };
</script>

MultiSelect

Powerful multi-selection component with search.

Import

import { MultiSelect } from 'vue-daisy-components'

Basic

Simple multi-selection with predefined options. 
<template>
  <MultiSelect
    :options="options"
    v-model="selected"
  />
</template>

<script setup>
  import { ref } from 'vue'
  import { MultiSelect } from 'vue-daisy-components'

  const options = ['Option 1', 'Option 2', 'Option 3']
  const selected = ref([])
</script>