Volt UI Component Library for Vue.js

https://volt.primevue.org/
Admin
Volt is a modern UI component library for Vue.js, built with Tailwind CSS, offering a rich set of...
Tokens:117,851
Snippets:859
Trust Score:9.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install PrimeVue

Source: https://volt.primevue.org/nuxt

Install PrimeVue using npm, yarn, or pnpm.

```bash
# Using npm
npm install primevue

# Using yarn
yarn add primevue

# Using pnpm
pnpm add primevue
```

--------------------------------

### Installation

Source: https://volt.primevue.org/toast

Install the Toast component using the Volt CLI.

```bash
npx volt-vue add toast
```

--------------------------------

### Download

Source: https://volt.primevue.org/drawer

Install the Drawer component using npm.

```bash
npx volt-vue add Drawer
```

--------------------------------

### Register Components

Source: https://volt.primevue.org/nuxt

Example of local component registration in a Vue template.

```vue
<template>
    <div>
        <h1>Your Application</h1>
        <Button label="Hello World" />
    </div>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue'; // local registration
</script>
```

--------------------------------

### Download

Source: https://volt.primevue.org/toolbar

Install the Toolbar component using npm.

```bash
npx volt-vue add Toolbar
```

--------------------------------

### Download

Source: https://volt.primevue.org/panel

Install Panel using npm or yarn.

```bash
npx volt-vue add Panel
```

--------------------------------

### Download

Source: https://volt.primevue.org/inputotp

Install the InputOtp component using npm.

```bash
npx volt-vue add InputOtp
```

--------------------------------

### Download

Source: https://volt.primevue.org/splitter

Install the Splitter component using npm.

```bash
npx volt-vue add Splitter
```

--------------------------------

### Download

Source: https://volt.primevue.org/datatable

Install DataTable using the Volt CLI.

```bash
npx volt-vue add DataTable
```

--------------------------------

### Basic

Source: https://volt.primevue.org/toolbar

A basic Toolbar example with start, center, and end slots for content.

```html
<template>
    <Toolbar>
        <template #start>
            <SecondaryButton icon="pi pi-plus" class="mr-2" text />
            <SecondaryButton icon="pi pi-print" class="mr-2" text />
            <SecondaryButton icon="pi pi-upload" severity="secondary" text />
        </template>

        <template #center>
            <InputText placeholder="Search" />
        </template>

        <template #end>
            <Button icon="pi pi-check" />
        </template>
    </Toolbar>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import InputText from '@/volt/InputText.vue';
import Toolbar from '@/volt/Toolbar.vue';
</script>
```

--------------------------------

### Download

Source: https://volt.primevue.org/confirmdialog

Install ConfirmDialog using npm.

```bash
npx volt-vue add ConfirmDialog
```

--------------------------------

### Download

Source: https://volt.primevue.org/toggleswitch

Install the ToggleSwitch component using npm.

```bash
npx volt-vue add ToggleSwitch
```

--------------------------------

### Download

Source: https://volt.primevue.org/progressbar

Install the ProgressBar component using npm.

```bash
npx volt-vue add ProgressBar
```

--------------------------------

### Download

Source: https://volt.primevue.org/inplace

Install the Inplace component using npm.

```bash
npx volt-vue add Inplace
```

--------------------------------

### Download

Source: https://volt.primevue.org/inputnumber

Install InputNumber using the Volt CLI.

```bash
npx volt-vue add InputNumber
```

--------------------------------

### Download

Source: https://volt.primevue.org/metergroup

Install MeterGroup using npm.

```bash
npx volt-vue add MeterGroup
```

--------------------------------

### Download

Source: https://volt.primevue.org/popover

Install the Popover component using npm.

```bash
npx volt-vue add Popover
```

--------------------------------

### Download

Source: https://volt.primevue.org/button

Install the Button component using the Volt CLI.

```bash
npx volt-vue add Button SecondaryButton ContrastButton DangerButton
```

--------------------------------

### Image Example

Source: https://volt.primevue.org/icons

Example of using an image as an icon for customization.

```vue
<template #dropdownicon>
    <template #dropdownicon>
        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
    </template>
</template>
```

--------------------------------

### Download

Source: https://volt.primevue.org/tree

Install the Tree component using the Volt CLI.

```bash
npx volt-vue add Tree
```

--------------------------------

### Download

Source: https://volt.primevue.org/inputtext

Install InputText using npm or yarn.

```bash
npx volt-vue add InputText
```

--------------------------------

### Download

Source: https://volt.primevue.org/timeline

Install the Timeline component using npm.

```bash
npx volt-vue add Timeline
```

--------------------------------

### SVG Example

Source: https://volt.primevue.org/icons

Example of using inline SVGs for customization.

```vue
<template #dropdownicon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g id="chevron-down">
            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
        </g>
    </svg>
</template>
```

--------------------------------

### Download

Source: https://volt.primevue.org/dataview

Install the DataView component using npm.

```bash
npx volt-vue add DataView
```

--------------------------------

### Download

Source: https://volt.primevue.org/datepicker

Install the DatePicker component using npm.

```bash
npx volt-vue add DatePicker
```

--------------------------------

### Material Icons Example

Source: https://volt.primevue.org/icons

Example of using Material icons for customization.

```vue
<template #dropdownicon>
    <span class="material-icons">arrow_drop_down</span>
</template>
```

--------------------------------

### Font Awesome Example

Source: https://volt.primevue.org/icons

Example of using Font Awesome icons for customization.

```vue
<template #dropdownicon>
    <i class="fa-light fa-chevron-down"></i>
</template>
```

--------------------------------

### Download

Source: https://volt.primevue.org/fluid

Install the Fluid component using npm.

```bash
npx volt-vue add Fluid
```

--------------------------------

### Download

Source: https://volt.primevue.org/paginator

Install the Paginator component using npm.

```bash
npx volt-vue add Paginator
```

--------------------------------

### Download

Source: https://volt.primevue.org/slider

Install Slider via npm or yarn.

```bash
npx volt-vue add Slider
```

--------------------------------

### Download

Source: https://volt.primevue.org/badge

Install the Badge component using the Volt CLI.

```bash
npx volt-vue add Badge
```

--------------------------------

### Download

Source: https://volt.primevue.org/divider

Install the Divider component using npm.

```bash
npx volt-vue add Divider
```

--------------------------------

### Download

Source: https://volt.primevue.org/radiobutton

Install the RadioButton component using npm.

```bash
npx volt-vue add RadioButton
```

--------------------------------

### Download

Source: https://volt.primevue.org/password

Install the Password component using npm.

```bash
npx volt-vue add Password
```

--------------------------------

### Download

Source: https://volt.primevue.org/inputmask

Install InputMask using the Volt CLI.

```bash
npx volt-vue add InputMask
```

--------------------------------

### Download

Source: https://volt.primevue.org/togglebutton

Install ToggleButton using npm or yarn.

```bash
npx volt-vue add ToggleButton
```

--------------------------------

### Download

Source: https://volt.primevue.org/rating

Install the Rating component using npm.

```bash
npx volt-vue add Rating
```

--------------------------------

### Download

Source: https://volt.primevue.org/textarea

Install the Textarea component using npm or yarn.

```bash
npx volt-vue add textarea
```

--------------------------------

### Download

Source: https://volt.primevue.org/fieldset

Install the Fieldset component using the Volt CLI.

```bash
npx volt-vue add Fieldset
```

--------------------------------

### Download

Source: https://volt.primevue.org/dialog

Install the Dialog component using the Volt CLI.

```bash
npx volt-vue add Dialog
```

--------------------------------

### Download

Source: https://volt.primevue.org/checkbox

Install the Checkbox component using npm.

```bash
npx volt-vue add Checkbox
```

--------------------------------

### Download

Source: https://volt.primevue.org/tabs

Install the Tabs component using the Volt CLI.

```bash
npx volt-vue add Tabs TabList Tab TabPanels TabPanel
```

--------------------------------

### Download

Source: https://volt.primevue.org/accordion

Install the Accordion component and its related components using npm.

```bash
npx volt-vue add Accordion AccordionPanel AccordionHeader AccordionContent
```

--------------------------------

### Download

Source: https://volt.primevue.org/stepper

Install the Stepper component and its related components using npm.

```bash
npx volt-vue add Stepper StepList Step StepPanels StepPanel StepItem
```

--------------------------------

### Download

Source: https://volt.primevue.org/avatar

Install the Avatar component using the Volt CLI.

```bash
npx volt-vue add Avatar
```

--------------------------------

### Download

Source: https://volt.primevue.org/select

Download the Select component using npm.

```bash
npx volt-vue add Select
```

--------------------------------

### Tab Menu Example

Source: https://volt.primevue.org/tabs

A Vue.js template and script setup demonstrating how to implement a Tab Menu where each tab navigates to a different route, utilizing router-view for content display. The example shows the structure for defining tabs with labels, icons, and routes.

```html
<template>
    <div class="card">
        <Tabs value="/dashboard">
            <TabList>
                <Tab v-for="tab in items" :key="tab.label" :value="tab.route" as="div" class="flex items-center gap-2">
                    <i :class="tab.icon" />
                    <span>{{ tab.label }}</span>
                </Tab>
            </TabList>
        </Tabs>
    </div>
</template>
```

```javascript
<script setup lang="ts">
import Tabs from '@/volt/Tabs.vue';
import Tab from '@/volt/Tab.vue';
import TabList from '@/volt/TabList.vue';
import { ref } from "vue";

const items = ref([
    { route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
    { route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
    { route: '/products', label: 'Products', icon: 'pi pi-list' },
    { route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
]);
</script>
```

--------------------------------

### Column Toggle Example

Source: https://volt.primevue.org/datatable

A Vue.js template and script setup demonstrating dynamic column visibility in a DataTable. A MultiSelect component allows users to select which columns are displayed.

```html
<template>
    <div class="card">
        <DataTable :value="products" pt:table="min-w-200">
            <template #header>
                <div style="text-align: left">
                    <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle" display="chip" placeholder="Select Columns" />
                </div>
            </template>
            <Column field="code" header="Code" />
            <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
        </DataTable>
    </div>
</template>

<script setup lang="ts">
import { ProductService } from '@/service/ProductService';
import DataTable from '@/volt/DataTable.vue';
import MultiSelect from '@/volt/MultiSelect.vue';
import Column from 'primevue/column';
import { ref, onMounted } from 'vue';

const columns = ref([
    { field: 'name', header: 'Name' },
    { field: 'category', header: 'Category' },
    { field: 'quantity', header: 'Quantity' }
]);
const selectedColumns = ref(columns.value);
const products = ref(null);
const onToggle = (val) => {
    selectedColumns.value = columns.value.filter((col) => val.includes(col));
};

onMounted(() => {
    ProductService.getProductsMini().then((data) => (products.value = data))
});
</script>

```

--------------------------------

### Install tailwindcss-primeui and tailwind-merge

Source: https://volt.primevue.org/nuxt

Install the necessary npm packages for Tailwind CSS integration with Volt and PrimeVue.

```bash
npm i tailwindcss-primeui
npm i tailwind-merge
```

--------------------------------

### Toast Service Installation

Source: https://volt.primevue.org/toast

Install the ToastService as an application plugin.

```javascript
import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);
```

--------------------------------

### PrimeIcons Example

Source: https://volt.primevue.org/icons

An icon is customized with templating, example below changes the dropdown icon of a Select in @/volt/select/index.vue.

```vue
<template #dropdownicon>
    <ArrowDownIcon class="text-primary"/>
</template>
```

```javascript
import ArrowDownIcon from '@primevue/icons/arrowdown';
```

--------------------------------

### Virtual Scrolling Example

Source: https://volt.primevue.org/datatable

This example demonstrates how to use virtual scrolling with a DataTable to render 100,000 records. The `virtualScrollerOptions` property is set with a fixed `itemSize` of 44px, and the `scrollHeight` is set to 400px.

```html
<template>
    <div class="card">
        <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 44 }" tableStyle="min-width: 50rem">
            <Column field="id" header="Id" style="width: 20%; height: 44px"></Column>
            <Column field="vin" header="Vin" style="width: 20%; height: 44px"></Column>
            <Column field="year" header="Year" style="width: 20%; height: 44px"></Column>
            <Column field="brand" header="Brand" style="width: 20%; height: 44px"></Column>
            <Column field="color" header="Color" style="width: 20%; height: 44px"></Column>
        </DataTable>
    </div>
</template>
```

```javascript
<script setup lang="ts">
import { CarService } from '@/service/CarService';
import DataTable from '@/volt/DataTable.vue';
import Column from 'primevue/column';
import { ref } from 'vue';

const cars = ref(null);

onMounted(() => {
    cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
});
</script>
```

--------------------------------

### Column Group Example

Source: https://volt.primevue.org/datatable

This example showcases the usage of ColumnGroup and Row components to create header and footer groups for a DataTable. It includes columns with colspan and rowspan attributes, as well as custom body templates and footer calculations.

```html
<template>
    <div class="card">
        <DataTable :value="sales" pt:table="min-w-200">
            <ColumnGroup type="header">
                <Row>
                    <Column header="Product" :rowspan="3" />
                    <Column header="Sale Rate" :colspan="4" />
                </Row>
                <Row>
                    <Column header="Sales" :colspan="2" />
                    <Column header="Profits" :colspan="2" />
                </Row>
                <Row>
                    <Column header="Last Year" sortable field="lastYearSale" />
                    <Column header="This Year" sortable field="thisYearSale" />
                    <Column header="Last Year" sortable field="lastYearProfit" />
                    <Column header="This Year" sortable field="thisYearProfit" />
                </Row>
            </ColumnGroup>
            <Column field="product" />
            <Column field="lastYearSale">
                <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
            </Column>
            <Column field="thisYearSale">
                <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
            </Column>
            <Column field="lastYearProfit">
                <template #body="slotProps">
                    {{ formatCurrency(slotProps.data.lastYearProfit) }}
                </template>
            </Column>
            <Column field="thisYearProfit">
                <template #body="slotProps">
                    {{ formatCurrency(slotProps.data.thisYearProfit) }}
                </template>
            </Column>
            <ColumnGroup type="footer">
                <Row>
                    <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
                    <Column :footer="lastYearTotal" />
                    <Column :footer="thisYearTotal" />
                </Row>
            </ColumnGroup>
        </DataTable>
    </div>
</template>
```

```javascript
<script setup lang="ts">
import DataTable from '@/volt/DataTable.vue';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';
import Row from 'primevue/row';
import { ref } from 'vue';

const sales = ref([
    { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
    { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
    { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
    { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
    { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
    { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
    { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
    { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
    { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
    { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
]);

const formatCurrency = (value) => {
    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};

const lastYearTotal = computed(() => {
    let total = 0;
    for (let sale of sales.value) {
        total += sale.lastYearProfit;
    }

    return formatCurrency(total);
});

const thisYearTotal = computed(() => {
    let total = 0;
    for (let sale of sales.value) {
        total += sale.thisYearProfit;
    }

    return formatCurrency(total);
});
</script>
```

--------------------------------

### Download Components

Source: https://volt.primevue.org/nuxt

Commands to download Volt components on demand using npx volt-vue.

```bash
npx volt-vue add Button
npx volt-vue add DataTable
npx volt-vue add Dialog
npx volt-vue add DatePicker
```

--------------------------------

### Download

Source: https://volt.primevue.org/chip

Download the Chip component using npm.

```bash
npx volt-vue add Chip
```

--------------------------------

### Download

Source: https://volt.primevue.org/selectbutton

Download the SelectButton component using npm.

```bash
npx volt-vue add SelectButton
```

--------------------------------

### Download

Source: https://volt.primevue.org/skeleton

Download the Skeleton component using the Volt CLI.

```bash
npx volt-vue add Skeleton
```

--------------------------------

### Download

Source: https://volt.primevue.org/breadcrumb

Install the Breadcrumb component using npm.

```bash
npx volt-vue add Breadcrumb
```

--------------------------------

### Basic

Source: https://volt.primevue.org/metergroup

Basic MeterGroup example with a single value.

```html
<template>
    <div class="card">
        <MeterGroup :value="value" />
    </div>
</template>

<script setup lang="ts">
import MeterGroup from '@/volt/MeterGroup.vue';
import { ref } from 'vue';

const value = ref([{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }]);
</script>
```

--------------------------------

### Download

Source: https://volt.primevue.org/menu

Download the Menu component using the Volt CLI.

```bash
npx volt-vue add Menu
```
Tokens:
Raw