PrimeVue

https://primevue.org/
Admin
PrimeVue is a comprehensive UI component library for Vue.js featuring 80+ customizable, feature-rich...
Tokens:532,384
Snippets:5,184
Trust Score:9.5
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Run Development Server

Source: https://primevue.org/templates/atlantis

Use these commands to install project dependencies and start the development server for the Atlantis PrimeVue template.

```bash
npm install or yarn
```

```bash
npm run dev or yarn dev
```

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

### Install PrimeCLT

Source: https://primevue.org/guides/primeflex

Install the PrimeCLT command-line utility globally to assist with project setup and migration tasks.

```bash
npm install -g primeclt
```

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

### Full ConfirmDialog Example with Composition API and Templating (Vue)

Source: https://primevue.org/llms/llms-full.txt

This comprehensive example demonstrates how to integrate `ConfirmDialog` with custom templating, `useConfirm`, and `useToast` in a Vue 3 Composition API setup to handle user confirmations.

```vue
<template>
    <ConfirmDialog group="templating">
        <template #message="slotProps">
            <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700">
                <i :class="slotProps.message.icon" class="!text-6xl text-primary-500"></i>
                <p>{{ slotProps.message.message }}</p>
            </div>
        </template>
    </ConfirmDialog>
    <div class="card flex justify-center">
        <Button @click="showTemplate()" label="Save"></Button>
    </div>
    <Toast />
</template>

<script setup>
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";

const confirm = useConfirm();
const toast = useToast();

const showTemplate = () => {
    confirm.require({
        group: 'templating',
        header: 'Confirmation',
        message: 'Please confirm to proceed moving forward.',
        icon: 'pi pi-exclamation-circle',
        rejectProps: {
            label: 'Cancel',
            icon: 'pi pi-times',
            outlined: true,
            size: 'small'
        },
        acceptProps: {
            label: 'Save',
            icon: 'pi pi-check',
            size: 'small'
        },
        accept: () => {
            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
        }
    });
};
<\/script>
```

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

### Start Development Server

Source: https://primevue.org/templates/freya

Execute this command to launch the development server for the Freya project.

```bash
npm run dev or yarn dev
```

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

### Menu Template Usage with Composition API (Vue)

Source: https://primevue.org/llms/llms-full.txt

This example demonstrates the same menu customization using 'start', 'submenulabel', 'item', and 'end' templates within a Vue Composition API setup.

```vue
<template>
    <div class="card flex justify-center">
        <Menu :model="items" class="w-full md:w-60">
            <template #start>
                <span class="inline-flex items-center gap-1 px-2 py-2">
                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                        <path
                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                            fill="var(--p-primary-color)"
                        />
                        <path
                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
                            fill="var(--p-text-color)"
                        />
                    </svg>
                    <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
                </span>
            </template>
            <template #submenulabel="{ item }">
                <span class="text-primary font-bold">{{ item.label }}</span>
            </template>
            <template #item="{ item, props }">
                <a v-ripple class="flex items-center" v-bind="props.action">
                    <span :class="item.icon" />
                    <span>{{ item.label }}</span>
                    <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                </a>
            </template>
            <template #end>
                <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
```

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

### Run PrimeVue Showcase Locally

Source: https://primevue.org/contribution

Sets up the project dependencies and starts the development server to run the PrimeVue showcase locally.

```bash
npm run setup
npm run dev
```

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

### Vue Composition API Drawer Example with Custom Header

Source: https://primevue.org/llms/llms-full.txt

This example shows a Vue Composition API setup for a Drawer component, featuring a custom header with a logo, title, and a close button using `closeCallback`.

```vue
<template>
    <div class="card flex justify-center">
        <Drawer v-model:visible="visible">
            <template #container="{ closeCallback }">
                <div class="flex flex-col h-full">
                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
                        <span class="inline-flex items-center gap-2">
                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                                    fill="var(--p-primary-color)"
                                />
                                <path
                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
                                    fill="var(--p-text-color)"
                                />
                            </svg>
                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
                        </span>
                        <span>
                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded variant="outlined"></Button>
                        </span>
                    </div>
                    <div class="overflow-y-auto">
```

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

### Example Custom Theme Configuration File

Source: https://primevue.org/nuxt

A sample `mytheme.js` file showing how to define a custom theme preset based on an existing theme, including semantic token overrides and dark mode settings.

```javascript
import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';

const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{indigo.50}',
            100: '{indigo.100}',
            200: '{indigo.200}',
            300: '{indigo.300}',
            400: '{indigo.400}',
            500: '{indigo.500}',
            600: '{indigo.600}',
            700: '{indigo.700}',
            800: '{indigo.800}',
            900: '{indigo.900}',
            950: '{indigo.950}'
        }
    }
});

export default {
    preset: MyPreset,
    options: {
        darkModeSelector: '.p-dark'
    }
};
```

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

### Initialize Vue App with CDN

Source: https://primevue.org/llms/llms-full.txt

Sets up a basic Vue 3 application using CDN links, creating an app instance and mounting it to a DOM element.

```vue
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>

    <div id="app">
    </div>

    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {

            }
        });

        app.mount('#app');
    <\/script>
</body>
```

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

### Sample InputOtp UI with Templating and Layout

Source: https://primevue.org/inputotp

A complete UI example demonstrating InputOtp with custom templating, a specific length, and additional layout elements like buttons and text for an authentication flow.

```vue
<div class="flex flex-col items-center">
    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
    <p class="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
    <InputOtp v-model="value" :length="6" style="gap: 0">
        <template #default="{ attrs, events, index }">
            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
            <div v-if="index === 3" class="px-4">
                <i class="pi pi-minus" />
            </div>
        </template>
    </InputOtp>
    <div class="flex justify-between mt-8 self-stretch">
        <Button label="Resend Code" link class="p-0"></Button>
        <Button label="Submit Code"></Button>
    </div>
</div>
```

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

### Chip with Icon using Composition API in Vue

Source: https://primevue.org/llms/llms-full.txt

This example demonstrates using chips with icons and a custom remove icon slot within a Vue Composition API setup, enclosed in a template and script setup block.

```vue
<template>
    <div class="card flex flex-wrap gap-2">
        <Chip label="Apple" icon="pi pi-apple" />
        <Chip label="Facebook" icon="pi pi-facebook" />
        <Chip label="Google" icon="pi pi-google" />
        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
        <Chip label="GitHub" icon="pi pi-github" removable>
            <template #removeicon="{ removeCallback, keydownCallback }">
                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
            </template>
        </Chip>
    </div>
</template>
<script setup>

<\/script>
```

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

### AutoComplete Sizes - Composition API Example (Vue)

Source: https://primevue.org/llms/llms-full.txt

Provides a complete example of the AutoComplete component with different sizes using the Vue Composition API. It includes both the template and script setup for reactive data and basic search logic.

```vue
<template>
    <div class="card flex flex-col items-center gap-4">
        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
    </div>
</template>

<script setup>
import { ref } from "vue";

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const items = ref([]);

const search = () => {
    items.value = [];
}
</script>
```

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

### Full Timeline Opposite Slot Example with Composition API (Vue)

Source: https://primevue.org/llms/llms-full.txt

This complete Vue component example demonstrates the `#opposite` slot usage within a PrimeVue Timeline, including the script setup with Composition API to define the `events` data.

```vue
<template>
    <div class="card">
        <Timeline :value="events">
            <template #opposite="slotProps">
                <small class="text-surface-500 dark:text-surface-400">{{slotProps.item.date}}</small>
            </template>
            <template #content="slotProps">
                {{slotProps.item.status}}
            </template>
        </Timeline>
    </div>
</template>

<script setup>
import { ref } from "vue";

const events = ref([
    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
]);

<\/script>
```

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

### Run Development Server

Source: https://primevue.org/templates/apollo

Starts the local development server for the Apollo project using either npm or yarn.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Install Project Dependencies

Source: https://primevue.org/templates/freya

Use this command to install all necessary project dependencies using either npm or Yarn.

```bash
npm install or yarn
```

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

### Composition API Example for Custom Animations with v-styleclass and CSS Keyframes

Source: https://primevue.org/llms/llms-full.txt

This example demonstrates the same animation logic as the basic usage within a Vue Composition API setup, including the necessary CSS keyframe definitions for `my-fadein` and `my-fadeout` animations.

```vue
<template>
    <div class="card flex items-center justify-center gap-8">
        <div class="flex flex-col items-center">
            <div>
                <Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
                <Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
            </div>
            <div class="h-32">
                <div class="my-hidden animate-duration-500 box1">
                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
                </div>
            </div>
        </div>
        <div class="flex flex-col items-center">
            <div>
                <Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
                <Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
            </div>
            <div class="h-32">
                <div class="hidden animate-duration-500 box2 overflow-hidden">
                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped>
@keyframes my-fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes my-fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.my-hidden {
    display: none;
}

.my-fadein {
    animation: my-fadein 150ms linear;
}

.my-fadeout {
    animation: my-fadeout 150ms linear;
}
</style>
```

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

### Button Group Example with Composition API in Vue

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

Illustrates how to use the `ButtonGroup` component to group buttons within a Vue Composition API setup.

```vue
<template>
    <div class="card flex justify-center">
        <ButtonGroup>
            <Button label="Save" icon="pi pi-check" />
            <Button label="Delete" icon="pi pi-trash" />
            <Button label="Cancel" icon="pi pi-times" />
        </ButtonGroup>
    </div>
</template>

<script setup>
</script>
```

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

### PanelMenu Command Example with Composition API in Vue

Source: https://primevue.org/llms/llms-full.txt

Full example showing how to define menu items with `command` callbacks using Vue's Composition API and `primevue/usetoast` for notifications.

```vue
<template>
    <div class="card flex justify-center">
        <PanelMenu :model="items" class="w-full md:w-80" />
        <Toast />
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useToast } from "primevue/usetoast";

const toast = useToast();

const items = ref([
    {
        label: 'Files',
        icon: 'pi pi-file',
        items: [
            {
                label: 'New',
                icon: 'pi pi-plus',
                command: () => {
                    toast.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
                }
            },
            {
                label: 'Search',
                icon: 'pi pi-search',
                command: () => {
                    toast.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
                }
            },
            {
                label: 'Print',
                icon: 'pi pi-print',
                command: () => {
                    toast.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
                }
            }
        ]
    },
    {
        label: 'Sync',
        icon: 'pi pi-cloud',
        items: [
            {
                label: 'Import',
                icon: 'pi pi-cloud-download',
                command: () => {
                    toast.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
                }
            },
            {
                label: 'Export',
                icon: 'pi pi-cloud-upload',
                command: () => {
                    toast.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
                }
            }
        ]
    },
    {
        label: 'Sign Out',
        icon: 'pi pi-sign-out',
        command: () => {
            toast.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
        }
    }
]);
<\/script>
```

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

### Advanced Dock Implementation with Composition API

Source: https://primevue.org/llms/llms-full.txt

This example demonstrates a full mock desktop UI using the Dock component, integrating Menubar, Toast, Dialogs, Terminal, Tree, and Galleria. It uses Vue's Composition API for state management and lifecycle hooks.

```vue (template)
<template>
    <div>
        <div class="card dock-demo">
            <Toast position="top-center" group="tc" />

            <Menubar :model="menubarItems">
                <template #start>
                    <i class="pi pi-apple px-2"></i>
                </template>
                <template #end>
                    <i class="pi pi-video px-2" />
                    <i class="pi pi-wifi px-2" />
                    <i class="pi pi-volume-up px-2" />
                    <span class="px-2">Fri 13:07</span>
                    <i class="pi pi-search px-2" />
                    <i class="pi pi-bars px-2" />
                </template>
            </Menubar>

            <div class="dock-window dock-advanced">
                <Dock :model="items">
                    <template #item="{ item }">
                        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
                            <img :alt="item.label" :src="item.icon" style="width: 100%" />
                        </a>
                    </template>
                </Dock>

                <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
                    <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
                </Dialog>

                <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
                    <Tree :value="nodes" />
                </Dialog>

                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                        <template #item="slotProps">
                            <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                        </template>
                    </Galleria>
                </div>
            </div>
        </div>
    </template>
```

```vue (script setup)
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import TerminalService from 'primevue/terminalservice';
import { NodeService } from '@/service/NodeService';
import { PhotoService } from '@/service/PhotoService';

onMounted(() => {
    PhotoService.getImages().then(data => images.value = data);
    NodeService.getTreeNodes().then(data => nodes.value = data);
    TerminalService.on('command', commandHandler);
})

onBeforeUnmount(() => {
    TerminalService.off('command', commandHandler);
})

const displayFinder = ref(false);
const displayTerminal = ref(false);
const displayPhotos = ref(false);
const images = ref();
const nodes = ref();
const toast = useToast();
const items = ref([
    {
        label: 'Finder',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
        command: () => {
            this.displayFinder = true;
        }
    },
    {
        label: 'Terminal',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
        command: () => {
            this.displayTerminal = true;
        }
    },
    {
        label: 'App Store',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
        url: 'https://www.apple.com/app-store/'
    },
    {
        label: 'Safari',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
        command: () => {
            toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
        }
    },
    {
        label: 'Photos',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
        command: () => {
            this.displayPhotos = true;
        }
    },
    {
        label: 'GitHub',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg',
        url: 'https://github.com/primefaces/primevue'
    },
    {
        label: 'Trash',
        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
        command: () => {
            toast.add({ severity: 'info', summary: 'Trash is empty', life: 3000 });
        }
    }
]);
const menubarItems = ref([
    {
        label: 'Finder',
        class: 'menubar-root'
    },
    {
        label: 'File',
        items: [
            {
                label: 'New',

```

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

### Defining Tag Severity (Composition API) - Vue

Source: https://primevue.org/llms/llms-full.txt

Example of using the 'severity' property within a Vue Composition API setup to define tag variants.

```vue
<template>
    <div class="flex flex-wrap justify-center gap-2">
        <Tag value="Primary"></Tag>
        <Tag severity="secondary" value="Secondary"></Tag>
        <Tag severity="success" value="Success"></Tag>
        <Tag severity="info" value="Info"></Tag>
        <Tag severity="warn" value="Warn"></Tag>
        <Tag severity="danger" value="Danger"></Tag>
        <Tag severity="contrast" value="Contrast"></Tag>
    </div>
</template>

<script setup>
<\/script>
```

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

### Full ContextMenu and TreeTable Example with Composition API (Vue)

Source: https://primevue.org/llms/llms-full.txt

Provides a complete example using Vue's Composition API, demonstrating data fetching, menu model definition, and event handling for context menu actions.

```vue
<template>
    <div class="card">
        <ContextMenu ref="cm" :model="menuModel" @hide="selectedNode = null" />
        <TreeTable v-model:contextMenuSelection="selectedNode" :value="nodes" contextMenu @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
            <Column field="name" header="Name" expander style="width: 34%"></Column>
            <Column field="size" header="Size" style="width: 33%"></Column>
            <Column field="type" header="Type" style="width: 33%"></Column>
        </TreeTable>
        <Toast />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { NodeService } from '@/service/NodeService';

onMounted(() => {
    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
});

const cm = ref();
const toast = useToast();
const nodes = ref();
const selectedNode = ref();
const menuModel = ref(
    [
        { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewNode(this.selectedNode) },
        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteNode(this.selectedNode) }
    ]
);

const onRowContextMenu = (event) => {
    cm.value.show(event.originalEvent);
};

const viewNode = (product) => {
    toast.add({severity: 'info', summary: 'Node Selected', detail: node.data.name, life: 3000});
};

const deleteProduct = (node) => {
    nodes.value = filterNodes(nodes.value, node.key);
    toast.add({severity: 'error', summary: 'Node Deleted', detail: node.data.name, life: 3000});
    selectedProduct.value = null;
};

const filterNodes = (nodeList, keyToRemove) => {
    return nodes
        .map((node) => {
            if (node.key === keyToRemove) {
                return null;
            }

            if (node.children) {
                const filteredChildren = filterNodes(node.children, keyToRemove);

                return { ...node, children: filteredChildren };
            }

            return node;
        })
        .filter((node) => node !== null);
}
</script>
```

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

### Creating Pill-style Tags (Composition API) - Vue

Source: https://primevue.org/llms/llms-full.txt

Example of using the 'rounded' property within a Vue Composition API setup to create pill-shaped tags.

```vue
<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <Tag value="Primary" rounded></Tag>
        <Tag severity="success" value="Success" rounded></Tag>
        <Tag severity="secondary" value="Secondary" rounded></Tag>
        <Tag severity="info" value="Info" rounded></Tag>
        <Tag severity="warn" value="Warn" rounded></Tag>
        <Tag severity="danger" value="Danger" rounded></Tag>
        <Tag severity="contrast" value="Contrast" rounded></Tag>
    </div>
</template>

<script setup>

<\/script>
```

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

### DataTable Export with Composition API

Source: https://primevue.org/llms/llms-full.txt

This example shows the full Vue component setup using the Composition API to enable CSV export functionality for a DataTable.

```vue
<template>
    <div>
        <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
            <template #header>
                <div class="text-end pb-4">
                    <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                </div>
            </template>
            <Column field="code" header="Code" exportHeader="Product Code"></Column>
            <Column field="name" header="Name"></Column>
            <Column field="category" header="Category"></Column>
            <Column field="quantity" header="Quantity"></Column>
        </DataTable>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';

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

const dt = ref();
const products = ref();
const exportCSV = () => {
    dt.value.exportCSV();
};
<\/script>
```

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

### Vue Application Initialization with PrimeVue

Source: https://primevue.org/playground

Initializes a Vue application, imports PrimeVue, applies the Aura theme, and mounts the app to the DOM.

```javascript
import { createApp } from 'vue'; import './assets/style.css'; import App from './App.vue'; import PrimeVue from 'primevue/config'; import Aura from '@primevue/themes/aura'; const app = createApp(App); app.use(PrimeVue, { theme: { preset: Aura, }, }); app.mount('#app'); 
```

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

### Install Project Dependencies

Source: https://primevue.org/templates/apollo

Installs the necessary project dependencies using either npm or yarn.

```bash
npm install
```

```bash
yarn
```

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

### Disabled ColorPicker Component (Vue)

Source: https://primevue.org/llms/llms-full.txt

Renders the ColorPicker component in a disabled state, preventing user interaction. This example includes a full Composition API setup.

```vue
<ColorPicker v-model="color" disabled />
```

```vue
<template>
    <div class="card flex justify-center">
        <ColorPicker v-model="color" disabled />
    </div>
</template>

<script setup>
import { ref } from "vue";

const color = ref();
</script>
```

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

### CascadeSelect with Composition API and Data (Vue)

Source: https://primevue.org/llms/llms-full.txt

Full Vue 3 Composition API example for CascadeSelect, including reactive data setup for hierarchical options.

```vue
<template>
    <div class="card flex justify-center">
        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
    </div>
</template>

<script setup>
import { ref } from "vue";

const selectedCity = ref();
const countries = ref([
    {
        name: 'Australia',
        code: 'AU',
        states: [
            {
                name: 'New South Wales',
                cities: [
                    { cname: 'Sydney', code: 'A-SY' },
                    { cname: 'Newcastle', code: 'A-NE' },
                    { cname: 'Wollongong', code: 'A-WO' }
                ]
            },
            {
                name: 'Queensland',
                cities: [
                    { cname: 'Brisbane', code: 'A-BR' },
                    { cname: 'Townsville', code: 'A-TO' }
                ]
            }
        ]
    },
    {
        name: 'Canada',
        code: 'CA',
        states: [
            {
                name: 'Quebec',
                cities: [
                    { cname: 'Montreal', code: 'C-MO' },
                    { cname: 'Quebec City', code: 'C-QU' }
                ]
            },
            {
                name: 'Ontario',
                cities: [
                    { cname: 'Ottawa', code: 'C-OT' },
                    { cname: 'Toronto', code: 'C-TO' }
                ]
            }
        ]
    },
    {
        name: 'United States',
        code: 'US',
        states: [
            {
                name: 'California',
                cities: [
                    { cname: 'Los Angeles', code: 'US-LA' },
                    { cname: 'San Diego', code: 'US-SD' },
                    { cname: 'San Francisco', code: 'US-SF' }
                ]
            },
            {
                name: 'Florida',
                cities: [
                    { cname: 'Jacksonville', code: 'US-JA' },
                    { cname: 'Miami', code: 'US-MI' },
                    { cname: 'Tampa', code: 'US-TA' },
                    { cname: 'Orlando', code: 'US-OR' }
                ]
            },
            {
                name: 'Texas',
                cities: [
                    { cname: 'Austin', code: 'US-AU' },
                    { cname: 'Dallas', code: 'US-DA' },
                    { cname: 'Houston', code: 'US-HO' }
                ]
            }
        ]
    }
]);
</script>
```

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

### on

Source: https://primevue.org/terminal

Displays the terminal using the action options.

```APIDOC
## on

### Description
Displays the terminal using the action options.

### Method Signature
`on(action: undefined | "command" | "response") : void`

### Parameters
- **action** (undefined | "command" | "response") - Defines the action to perform.
```

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

### Example Custom Pass Through File

Source: https://primevue.org/nuxt

A sample `mycustompt.js` file demonstrating how to define and export a custom pass-through configuration object for PrimeVue components.

```javascript
const MyCustomPT = {
    ...
    button: {
        root: 'my-button',
       ...
    },
    ...
}

export default MyCustomPT;
```

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

### OverlayBadge with Composition API in Vue

Source: https://primevue.org/llms/llms-full.txt

Example demonstrating OverlayBadge usage within a Vue 3 Composition API setup, typically used in a <template> block.

```vue
<template>
    <div class="card flex flex-wrap justify-center gap-6">
        <OverlayBadge value="2">
            <i class="pi pi-bell" style="font-size: 2rem" />
        </OverlayBadge>
        <OverlayBadge value="4" severity="danger">
            <i class="pi pi-calendar" style="font-size: 2rem" />
        </OverlayBadge>
        <OverlayBadge severity="danger">
            <i class="pi pi-envelope" style="font-size: 2rem" />
        </OverlayBadge>
    </div>
</template>

<script setup>

<\/script>
```

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

### Auto-resizing Textarea in Vue

Source: https://primevue.org/llms/llms-full.txt

Enables the Textarea to automatically grow or shrink based on content, eliminating scrollbars. The Composition API example shows a full component setup.

```vue
<Textarea v-model="value" autoResize rows="5" cols="30" />
```

```vue
<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" autoResize rows="5" cols="30" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
<\/script>
```

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

### Dynamic Dialog Basic Usage Example

Source: https://primevue.org/dynamicdialog

This example demonstrates how to use `DynamicDialog` with a button to open a product selection dialog.

```html
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />

<DynamicDialog />
```

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

### Dynamic Tabs with Composition API and v-for

Source: https://primevue.org/llms/llms-full.txt

This example demonstrates how to set up dynamic tabs using the Composition API, defining tab data with `ref` in the script section.

```vue
<template>
    <div class="card">
        <Tabs value="0">
            <TabList>
                <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
            </TabList>
            <TabPanels>
                <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
                    <p class="m-0">{{ tab.content }}</p>
                </TabPanel>
            </TabPanels>
        </Tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const tabs = ref([
    { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
    { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
    { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
]);
<\/script>
```

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

### Custom Tag Content with Templates (Composition API) - Vue

Source: https://primevue.org/llms/llms-full.txt

Example of customizing Tag component content using templating within a Vue Composition API setup.

```vue
<template>
    <div class="card flex justify-center">
        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
            <div class="flex items-center gap-2 px-1">
                <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                <span class="text-base">Italy</span>
            </div>
        </Tag>
    </div>    
</template>

<script setup>
<\/script>
```

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

### open(content: any)

Source: https://primevue.org/dynamicdialog

Displays a dynamic dialog using the provided content and options, returning an instance to control the dialog.

```APIDOC
## open(content: any)

### Description
Displays the dialog using the dynamic dialog object options.

### Method
SDK Method

### Parameters
- **content** (any) - Required - The dynamic component to be displayed as the dialog's content.

### Return Type
**DynamicDialogInstance** - An object representing the opened dynamic dialog instance.

### DynamicDialogInstance Fields
- **content** (any) - Dynamic component for content template.
- **options** (DynamicDialogOptions) - Instance options.
- **data** (any) - Custom data object.
- **close** (Function) - Function to close the dialog.
```

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

### Displaying Icons in Tag Component (Composition API) - Vue

Source: https://primevue.org/llms/llms-full.txt

Example of using the 'icon' property within a Vue Composition API setup to display icons with tags.

```vue
<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <Tag icon="pi pi-user" value="Primary"></Tag>
        <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
        <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
        <Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
        <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
    </div>
</template>

<script setup>

<\/script>
```

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

### Sample Product Data for PickList (JSON)

Source: https://primevue.org/llms/llms-full.txt

Example JSON structure for product data typically used with PrimeVue PickList components.

```json
/* ProductService */
{
    id: '1000',
    code: 'f230fh0g3',
    name: 'Bamboo Watch',
    description: 'Product Description',
    image: '/bamboo-watch.jpg',
    price: 65,
    category: 'Accessories',
    quantity: 24,
    inventoryStatus: 'INSTOCK',
    rating: 5
},
...
```
Tokens:
Raw