### Install Project Dependencies

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/README.md

Install the necessary Python libraries listed in requirements.txt.

```bash
pip install -r requirements.txt
```

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

### Install PrimeVue and Themes

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install PrimeVue and its associated themes using npm, yarn, or pnpm.

```bash
# Using npm
npm install primevue @primeuix/themes

# Using yarn
yarn add primevue @primeuix/themes

# Using pnpm
pnpm add primevue @primeuix/themes
```

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

### Install PrimeCLT

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Installs the PrimeCLT command line utility globally using npm.

```bash
npm install -g primeclt

```

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

### Install PrimeVue and PrimeIcons

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/TECHNICAL_REFERENCE.md

Install PrimeVue and PrimeIcons using npm. These are the initial steps for setting up PrimeVue in your project.

```bash
npm install primevue
npm install primeicons
```

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

### Basic Accordion Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

A basic Accordion setup with three AccordionPanels. Each panel requires a unique 'value' property for identification and state management.

```html
<Accordion value="0">
    <AccordionPanel value="0">
        <AccordionHeader>Header I</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </AccordionContent>
    </AccordionPanel>
    <AccordionPanel value="1">
        <AccordionHeader>Header II</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
            </p>
        </AccordionContent>
    </AccordionPanel>
    <AccordionPanel value="2">
        <AccordionHeader>Header III</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
            </p>
        </AccordionContent>
    </AccordionPanel>
</Accordion>
```

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

### Complete PrimeVue v4 Configuration Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/configuration.md

A full example demonstrating how to set up PrimeVue v4 in a Vue application, including theme, icons, presets, and services.

```typescript
// main.ts
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue';

// Theme & Icons
import 'primevue/resources/themes/lara-light-blue/theme.css';
import 'primevue/resources/primevue.css';
import 'primevue/icons/primeicons.css';

// Tailwind (optional)
import Tailwind from 'primevue/presets/tailwind';

const app = createApp(App);

app.use(PrimeVue, {
  locale: 'en',
  ripple: true,
  zIndex: {
    modal: 1100,
    overlay: 1000,
    dropdown: 1000,
    tooltip: 1100,
    toast: 1050
  },
  pt: Tailwind,
  unstyled: false
});

// Provide services
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useDynamicDialog } from 'primevue/usedynamicdialog';

app.provide('toast', useToast());
app.provide('confirm', useConfirm());
app.provide('dialog', useDynamicDialog());

app.mount('#app');
```

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

### Install PrimeVue with Nuxt using pnpm

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install PrimeVue, themes, and the Nuxt module using pnpm.

```bash
pnpm add primevue @primeuix/themes
pnpm add -D @primevue/nuxt-module
```

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

### Install PrimeVue with Nuxt using npm

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install PrimeVue, themes, and the Nuxt module using npm.

```bash
npm install primevue @primeuix/themes
npm install --save-dev @primevue/nuxt-module
```

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

### Custom Pass Through Configuration Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Example of a custom Pass Through configuration file defining root and other element styles for a button.

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

export default MyCustomPT;
```

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

### Install PrimeVue with Nuxt using yarn

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install PrimeVue, themes, and the Nuxt module using yarn.

```bash
yarn add primevue @primeuix/themes
yarn add --dev @primevue/nuxt-module
```

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

### Run Showcase Locally

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install dependencies and run the PrimeVue showcase in your local environment.

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

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

### Complete PrimeVue CDN Example with DatePicker

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

A full HTML example demonstrating PrimeVue integration via CDN, including Vue, PrimeVue, a theme, and a DatePicker component. The example shows how to set up the app, use the plugin with theme configuration, and register components.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PrimeVue + CDN</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
    <script src="https://unpkg.com/@primeuix/themes/umd/aura.js"></script>

    <div id="app">
      <p-datepicker v-model="date"></p-datepicker>
      <br /><br />
      {{ date }}
    </div>

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

      const app = createApp({
        setup() {
          const date = ref();

          return {
            date
          };
        },
      });

      app.use(PrimeVue.Config, {
        theme: {
            preset: PrimeVue.Themes.Aura
        }
      });

      app.component('p-datepicker', PrimeVue.DatePicker);

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

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

### Install Auto Import Packages

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the necessary packages for automatic component import resolution as development dependencies.

```bash
npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D



```

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

### Install ConfirmationService

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the ConfirmationService as an application plugin to manage ConfirmDialog instances. This is required for the service to function.

```javascript
import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

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

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

### Basic ProgressSpinner Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Display a default ProgressSpinner with an infinite spin animation.

```html
<ProgressSpinner />
```

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

### DynamicDialog Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates how to show a dialog for product selection using DynamicDialog and a Button.

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

<DynamicDialog />
```

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

### Install PrimeIcons

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Download the PrimeIcons library using npm.

```bash
npm install primeicons
```

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

### Install PrimeVue Forms Add-on

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the PrimeVue Forms add-on using npm, yarn, or pnpm.

```bash
# Using npm
npm install @primevue/forms

# Using yarn
yarn add @primevue/forms

# Using pnpm
pnpm add @primevue/forms
```

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

### Install Tailwind CSS PrimeUI Plugin

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the official PrimeTek plugin for PrimeVue and Tailwind CSS integration.

```bash
npm i tailwindcss-primeui
```

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

### Configure Initial Theme with Preset

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Sets the initial theme for PrimeVue using a preset and custom options. Ensure PrimeVue is installed and imported.

```javascript
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    // Default theme configuration
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: 'system',
            cssLayer: false
        }
    }
 });

```

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

### Install Quill Dependency

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Installs Quill, the underlying rich text editor library, as a project dependency.

```bash
npm install quill
```

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

### Headless Drawer with Submenu Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

This example shows a headless Drawer with a collapsible submenu. It uses PrimeFlex classes for styling and v-styleclass to manage the visibility and animation of the submenu content. The main menu item includes an icon and text, with a nested list for submenu options.

```html
<ul class="list-none p-4 m-0">
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-chart-line mr-2"></i>
            <span class="font-medium">Revenue</span>
            <i class="pi pi-chevron-down ml-auto"></i>
        </a>
        <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
            <li>
                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                    <i class="pi pi-table mr-2"></i>
                    <span class="font-medium">View</span>
                </a>
            </li>
            <li>
                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                    <i class="pi pi-search mr-2"></i>
                    <span class="font-medium">Search</span>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-chart-line mr-2"></i>
            <span class="font-medium">Expenses</span>
        </a>
    </li>
</ul>
```

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

### Pie Chart Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Render a pie chart by setting the 'type' property to 'pie'. Includes CSS classes for sizing.

```html
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-[30rem]" />
```

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

### ConfirmDialog Headless Mode Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Implement a fully custom confirmation UI using the 'container' slot in headless mode. This example demonstrates a custom dialog with header, message, and action buttons.

```html
<ConfirmDialog group="headless">
    <template #container="{ message, acceptCallback, rejectCallback }">
        <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
            <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
                <i class="pi pi-question !text-4xl"></i>
            </div>
            <span class="font-bold text-2xl block mb-2 mt-6">{{ message.header }}</span>
            <p class="mb-0">{{ message.message }}</p>
            <div class="flex items-center gap-2 mt-6">
                <Button label="Save" @click="acceptCallback" class="w-32"></Button>
                <Button label="Cancel" outlined @click="rejectCallback" class="w-32"></Button>
            </div>
        </div>
    </template>
</ConfirmDialog>
<Button @click="requireConfirmation()" label="Save"></Button>

```

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

### Form State Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

An example JSON object representing the state of a form, showing its validity. This is typically displayed within a `<pre>` tag for readability.

```json
{
  "valid": true
}

```

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

### Basic Toolbar Usage

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates a basic Toolbar with content placed in the start, center, and end slots. The start slot contains buttons, the center slot includes a search input, and the end slot features a save button.

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

    <template #center>
        <IconField>
            <InputIcon>
                <i class="pi pi-search" />
            </InputIcon>
            <InputText placeholder="Search" />
        </IconField>
    </template>

    <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
</Toolbar>
```

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

### Vertical Splitter Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Create a vertical Splitter by setting the 'layout' property to 'vertical'. Panels will be stacked.

```html
<Splitter style="height: 300px" layout="vertical">
    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter>
```

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

### Headless Drawer Structure Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

This example demonstrates the basic HTML structure for a headless Drawer component. It utilizes PrimeVue's v-ripple and v-styleclass directives for interactive elements and dynamic class management. The structure includes nested lists for navigation items, with icons and text, and a badge for unread messages.

```html
<ul class="list-none p-4 m-0">
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-users mr-2"></i>
            <span class="font-medium">Team</span>
        </a>
    </li>
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-comments mr-2"></i>
            <span class="font-medium">Messages</span>
            <span class="inline-flex items-center justify-center ml-auto bg-primary text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
        </a>
    </li>
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-calendar mr-2"></i>
            <span class="font-medium">Calendar</span>
        </a>
    </li>
    <li>
        <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
            <i class="pi pi-cog mr-2"></i>
            <span class="font-medium">Settings</span>
        </a>
    </li>
</ul>
```

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

### Basic Animation Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates how to apply animations to an element using the 'animation' and 'animate-duration' classes. Requires a Select component and an array of animation options.

```vue
<Select v-model="animation" :options="animations" placeholder="Select One" class="w-full sm:w-44" />
<div class="py-8 overflow-hidden">
    <div :class="`rounded-border bg-primary w-16 h-16 mx-auto animate-${animation} animate-once animate-duration-1000`"></div>
</div>
```

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

### Initialize PrimeVue Plugin

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/configuration.md

Install PrimeVue as a Vue plugin during application initialization. This is the primary step to enable PrimeVue's features.

```typescript
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue';

const app = createApp(App);

app.use(PrimeVue, {
  // configuration options
});

app.mount('#app');
```

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

### Horizontal Splitter Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

A basic horizontal Splitter with two panels. Panels are displayed side-by-side by default.

```html
<Splitter style="height: 300px" class="mb-8">
    <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter>
```

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

### Line Chart Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Display a line chart by setting the 'type' property to 'line'. CSS class applied for height.

```html
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[30rem]" />
```

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

### DialogService Installation

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the DialogService as a Vue application plugin to enable dynamic dialog functionality. This is typically done during application setup.

```javascript
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';

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

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

### Set Up Python Virtual Environment

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/README.md

Create and activate a virtual environment to manage project dependencies.

```bash
python3 -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
```

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

### Customize PrimeVue Preset

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Use definePreset to customize an existing PrimeVue preset by overriding design tokens during application setup. This example shows how to import necessary modules and apply a custom preset.

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

const MyPreset = definePreset(Aura, {
    //Your customizations, see the following sections for examples
});

app.use(PrimeVue, {
    theme: {
        preset: MyPreset
    }
 });

```

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

### Basic TieredMenu Usage

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

A basic example of rendering a TieredMenu with a defined set of items. Ensure you have a Toast component available for potential feedback.

```html
<TieredMenu :model="items" />
<Toast />
```

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

### InputOtp Sample UI with Templating

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

A comprehensive example demonstrating InputOtp with a custom template, including length configuration, conditional elements within the template, and integrated buttons for actions like resending or submitting codes.

```html
<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>
```

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

### Install Chart.js Dependency

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

The Chart component requires Chart.js to be installed as a project dependency.

```bash
npm install chart.js
```

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

### Install Toast Service

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Install the ToastService as a Vue application plugin to enable toast message functionality.

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

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

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

### Create Vue App with CDN

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Set up a basic Vue application using Vue.js from a CDN and mount it to an HTML element. This example demonstrates the minimal structure for a CDN-based Vue app.

```html
<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>
```

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

### Using useConfirm for Dialog Logic

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

This script setup demonstrates how to use the useConfirm composable to programmatically open the ConfirmDialog, including handling show and hide events to manage component visibility.

```javascript
const confirm = useConfirm();
const isVisible = ref(false);

const openDialog = () => {
    confirm.require({
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        onShow: () => {
            isVisible.value = true;
        },
        onHide: () => {
            isVisible.value = false;
        }
    });
};
```

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

### Basic Select Usage

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/api-reference/select.md

Demonstrates the basic setup of the Select component with options and v-model binding. Ensure the 'ref' function is imported from 'vue' for reactive data.

```vue
<template>
  <Select 
    v-model="selectedCountry"
    :options="countries"
    optionLabel="name"
    optionValue="code"
    placeholder="Select a country"
  />
</template>

<script setup>
import { ref } from 'vue';
import Select from 'primevue/select';

const selectedCountry = ref(null);
const countries = ref([
  { name: 'Australia', code: 'AU' },
  { name: 'Brazil', code: 'BR' },
  { name: 'Canada', code: 'CA' }
]);
</script>
```

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

### Install unplugin-vue-components for Vite

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/configuration.md

Install the necessary plugin for Vite to enable component auto-import. This is a prerequisite for the Vite configuration.

```bash
npm install -D unplugin-vue-components
```

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

### ConfirmDialog Templating Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Customize the message content of the ConfirmDialog using the 'message' slot. This example shows how to display an icon and a message within the dialog.

```html
<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>
<Button @click="showTemplate()" label="Save"></Button>

```

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

### TypeScript Component Props Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/TECHNICAL_REFERENCE.md

PrimeVue components are fully typed with TypeScript. This example shows how to use component-specific props types for type-safe props.

```typescript
import Button, { type ButtonProps } from 'primevue/button';

// Type-safe props
const props: ButtonProps = {
  label: 'Click me',
  severity: 'success',
  disabled: false
};
```

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

### Basic ContextMenu Usage

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Implement a basic ContextMenu attached to an image. The menu is displayed by explicitly calling the 'show' method on a 'contextmenu' event.

```html
<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
```

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

### Drawer Accessibility Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Example demonstrating accessibility attributes for the Drawer component's trigger and root elements. Ensure 'aria-controls' and 'aria-expanded' are managed for the trigger, and 'role' and 'aria-modal' are set for the drawer.

```vue
<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>

<Drawer id="sbar" v-model:visible="visible" role="region" >
    <p>Content</p>
</Drawer>
```

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

### Basic DataView List Layout

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Displays a list of products using the DataView component. Requires a 'value' prop for data and a 'list' slot for item templating. The example shows how to render product images, names, prices, and action buttons.

```html
<DataView :value="products">
    <template #list="slotProps">
        <div class="flex flex-col">
            <div v-for="(item, index) in slotProps.items" :key="index">
                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                    <div class="md:w-40 relative">
                        <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                        </div>
                    </div>
                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                            <div>
                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                <div class="text-lg font-medium mt-2">{{ item.name }}</div>
                            </div>
                            <div class="bg-surface-100 p-1" style="border-radius: 30px">
                                <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col md:items-end gap-8">
                            <span class="text-xl font-semibold">$
                                {{ item.price }}
                            </span>
                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                <Button icon="pi pi-heart" outlined></Button>
                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</DataView>
```

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

### Accessible Dialog Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/api-reference/dialog.md

An example of an accessible Dialog component with proper ARIA attributes for screen readers and keyboard navigation. Ensure the `header` slot content includes an `id` that matches the `aria-labelledby` attribute.

```vue
<Dialog
  v-model:visible="visible"
  header="Accessible Dialog"
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
>
  <template #header>
    <h2 id="dialog-title">Dialog Title</h2>
  </template>
  
  Content here
</Dialog>
```

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

### Headless Drawer Implementation

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Example of enabling headless mode for the Drawer component by utilizing the 'container' slot to implement custom UI elements and interactions.

```html
<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="..." fill="var(--p-primary-color)" />
                        <path d="..." 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 outlined></Button>
                </span>
            </div>
            <div class="overflow-y-auto">
                <ul class="list-none p-4 m-0">
                    <li>
                        <div
                            v-ripple
                            v-styleclass="{
                                selector: '@next',
                                enterFromClass: 'hidden',
                                enterActiveClass: 'animate-slidedown',
                                leaveToClass: 'hidden',
                                leaveActiveClass: 'animate-slideup'
                            }"
                            class="p-4 flex items-center justify-between text-surface-500 dark:text-surface-400 cursor-pointer p-ripple"
                        >
                            <span class="font-medium">FAVORITES</span>
                            <i class="pi pi-chevron-down"></i>
                        </div>
                        <ul class="list-none p-0 m-0 overflow-hidden">
                            <li>
                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                    <i class="pi pi-home mr-2"></i>
                                    <span class="font-medium">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a v-ripple class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple">
                                    <i class="pi pi-bookmark mr-2"></i>
                                    <span class="font-medium">Bookmarks</span>
                                </a>
                            </li>
                            <li>
                                <a
                                    v-ripple
                                    v-styleclass="{
                                        selector: '@next',
                                        enterFromClass: 'hidden',
                                        enterActiveClass: 'animate-slidedown',
                                        leaveToClass: 'hidden',
                                        leaveActiveClass: 'animate-slideup'
                                    }"
                                    class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"
                                >
                                    <i class="pi pi-chart-line mr-2"></i>
                                    <span class="font-medium">Reports</span>
                                    <i class="pi pi-chevron-down ml-auto"></i>
                                </a>
                                <ul class="list-none py-0 pl-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
                                    <li>
                                        <a
                                            v-ripple
                                            v-styleclass="{
                                                selector: '@next',
                                                enterFromClass: 'hidden',
                                                enterActiveClass: 'animate-slidedown',
                                                leaveToClass: 'hidden',
                                                leaveActiveClass: 'animate-slideup'
                                            }"
                                            class="flex items-center cursor-pointer p-4 rounded text-surface-700 hover:bg-surface-100 dark:text-surface-0 dark:hover:bg-surface-800 duration-150 transition-colors p-ripple"

```

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

### Minimal PrimeVue Setup with Unstyled Mode CSS

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/configuration.md

Configure your Vue application for PrimeVue in unstyled mode, importing only the core CSS and icons. This setup requires enabling the 'unstyled' option in PrimeVue configuration.

```typescript
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue';

// Core CSS only
import 'primevue/resources/primevue.css';
import 'primevue/icons/primeicon.css';

const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
app.mount('#app');
```

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

### Dialog Positioning Examples

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/api-reference/dialog.md

Demonstrates how to control the initial position of the dialog on the screen using the 'position' prop. Requires buttons to trigger different positions.

```Vue
<template>
  <div class="space-y-2">
    <Button label="Center" @click="openDialog('center')" />
    <Button label="Top" @click="openDialog('top')" />
    <Button label="Bottom" @click="openDialog('bottom')" />
    <Button label="Top-Left" @click="openDialog('topleft')" />
    
    <Dialog 
      v-model:visible="visible"
      :position="position"
      header="Dialog"
    >
      Content
    </Dialog>
  </div>
</template>

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

const visible = ref(false);
const position = ref('center');

const openDialog = (pos) => {
  position.value = pos;
  visible.value = true;
};
</script>
```

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

### Basic InputGroup with Icons and Text

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates creating an InputGroup with an icon add-on, a text add-on, and an input field.

```vue
<InputGroup>
    <InputGroupAddon>
        <i class="pi pi-user"></i>
    </InputGroupAddon>
    <InputText v-model="text1" placeholder="Username" />
</InputGroup>

<InputGroup>
    <InputGroupAddon>$</InputGroupAddon>
    <InputNumber v-model="number" placeholder="Price" />
    <InputGroupAddon>.00</InputGroupAddon>
</InputGroup>

<InputGroup>
    <InputGroupAddon>www</InputGroupAddon>
    <InputText v-model="text2" placeholder="Website" />
</InputGroup>

<InputGroup>
    <InputGroupAddon>
        <i class="pi pi-map"></i>
    </InputGroupAddon>
    <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
</InputGroup>
```

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

### Custom Content in Paginator

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Add custom content to the start and end sections of the paginator using named templates. The 'start' template provides state information like current page, first index, and rows per page.

```vue
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
    <template #start="slotProps">
        Page: {{ slotProps.state.page }}
        First: {{ slotProps.state.first }}
        Rows: {{ slotProps.state.rows }}
    </template>
    <template #end>
        <Button type="button" icon="pi pi-search" />
    </template>
</Paginator>
```

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

### Splitter with Size and MinSize

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Configure the initial size and minimum size for Splitter panels using the 'size' and 'minSize' properties.

```html
<Splitter style="height: 300px">
    <SplitterPanel class="flex items-center justify-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex items-center justify-center" :size="75"> Panel 2 </SplitterPanel>
</Splitter>
```

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

### Stepper Template Example

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

This snippet shows a basic template for the PrimeVue Stepper component, including various ToggleButtons for step options and Buttons for navigation. It demonstrates how to use the activateCallback function to move between steps.

```html
<Stepper :activeStep="1">
    <StepPanels>
        <StepPanel v-slot="{ activateCallback }" :value="0">
            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
                <div class="text-center mt-4 mb-4 text-xl font-semibold">Select your interests</div>
                <div class="flex flex-wrap gap-2">
                    <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
                    <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
                    <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
                    <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
                    <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
                    <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
                    <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
                    <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
                    <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                </div>
            </div>
            <div class="flex pt-6 justify-between">
                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(1)" />
                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback(3)" />
            </div>
        </StepPanel>
        <StepPanel v-slot="{ activateCallback }" :value="3">
            <div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
                <div class="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                <div class="flex justify-center">
                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                </div>
            </div>
            <div class="flex pt-6 justify-start">
                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback(2)" />
            </div>
        </StepPanel>
    </StepPanels>
</Stepper>
```

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

### Importing PrimeVue Components and Composables

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/_autodocs/types.md

Demonstrates various ways to import PrimeVue components, their types, and composables like useToast. Includes an example of using ToastMessage with TypeScript.

```typescript
// Import component
import Button from 'primevue/button';

// Import with types
import Button, { type ButtonProps, type ButtonEmits } from 'primevue/button';

// Import composable
import { useToast } from 'primevue/usetoast';
import type { ToastMessage } from 'primevue/usetoast';

// Use with TypeScript
const message: ToastMessage = {
  severity: 'success',
  summary: 'Success',
  detail: 'Message'
};

const toast = useToast();
ttoast.add(message);
```

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

### Run pf2tw Migration Tool

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Executes the pf2tw command to migrate from PrimeFlex to Tailwind CSS within the current directory.

```bash
prime pf2tw

```

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

### Clone PrimeVue Repository

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Clone the PrimeVue repository from GitHub to start contributing.

```bash
git clone https://github.com/primefaces/primevue.git
cd primevue
```

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

### Basic HTML Structure with Divs

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

This example demonstrates a common layout structure using generic div elements, which lacks semantic meaning for screen readers.

```html
<div class="header">
    <div class="header-text">Header</div>
</div>

<div class="nav"></div>

<div class="main">
    <div class="content">
    </div>

    <div class="sidebar">
    </div>
</div>

<div class="footer">
</div>
```

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

### Image Filter with Sliders

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

An example of using multiple Sliders to control image filter properties.

```html
<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
```

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

### Basic Form Setup

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates a basic PrimeVue Form with input fields and a submit button. It uses the 'name' property to link fields to the form state and handles submission via the '@submit' event.

```vue
<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-1">
        <InputText name="username" type="text" placeholder="Username" fluid />
        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

```

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

### InputGroup with Buttons

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Illustrates integrating buttons at the start or end of an input field within an InputGroup.

```vue
<InputGroup>
    <Button label="Search" />
    <InputText placeholder="Keyword" />
</InputGroup>

<InputGroup>
    <InputText placeholder="Keyword" />
    <InputGroupAddon>
        <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
    </InputGroupAddon>
</InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />

<InputGroup>
    <InputGroupAddon>
        <Button icon="pi pi-check" severity="secondary" />
    </InputGroupAddon>
    <InputText placeholder="Vote" />
    <InputGroupAddon>
        <Button icon="pi pi-times" severity="secondary" />
    </InputGroupAddon>
</InputGroup>
```

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

### Configuring CSS Layers for Reset and PrimeVue

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Example demonstrating how to define cascade layer order for 'reset' and 'primevue' to manage CSS specificity and prevent conflicts, particularly with application-level reset styles.

```css
/* Order */
@layer reset, primevue;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}

```

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

### updatePreset

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Merges the provided tokens into the current preset. An example is changing the primary color palette dynamically.

```APIDOC
## updatePreset

### Description
Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically.

### Usage
```javascript
import { updatePreset } from '@primeuix/themes';

const changePrimaryColor() {
    updatePreset({
        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}'
            }
        }
    })
}
```
```

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

### Basic IconField Usage

Source: https://github.com/navidb/primevue-v4-markdown-docs/blob/main/primevue_v4_docs.md

Demonstrates basic IconField usage with InputIcon and InputText, showing an icon before and after the input.

```html
<IconField>
    <InputIcon class="pi pi-search" />
    <InputText v-model="value1" placeholder="Search" />
</IconField>

<IconField>
    <InputText v-model="value2" variant="filled" />
    <InputIcon class="pi pi-spin pi-spinner" />
</IconField>



```