Nuxt Paper Docs

https://paper-docs.nuxt.space/docs
Admin
Nuxt Paper Docs is a documentation site built with Nuxt, featuring a clean design and interactive...
Tokens:43,355
Snippets:204
Trust Score:4.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### PUGrid Basic Usage Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Demonstrates the basic usage of the PUGrid component to create a simple layout with three items. This serves as a starting point for understanding grid structure.

```Vue
<template>
  <PUGrid>
    <PUGridItem>Item 1</PUGridItem>
    <PUGridItem>Item 2</PUGridItem>
    <PUGridItem>Item 3</PUGridItem>
  </PUGrid>
</template>
```

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

### Start Nuxt Development Server

Source: https://paper-docs.nuxt.space/docs/getting-started

Starts the Nuxt development server using npm, yarn, or pnpm. This command allows you to view your Nuxt application in the browser during development.

```bash
npm run dev
# yarn dev
# pnpm dev
```

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

### PUTabs Advanced Customization Example

Source: https://paper-docs.nuxt.space/docs/components/pu-tabs

Provides an example of advanced customization for both tab headers and content, demonstrating fine-grained control over styling and behavior.

```html
<template>
  <PUTabs :tabs="tabs">
    <template #tab="{ tab, isActive }">
      <div class="flex items-center gap-2 p-2 rounded-lg transition-all"
           :class="{ 'bg-blue-50 text-blue-700': isActive, 'text-gray-500 hover:bg-gray-50': !isActive }">
        <PUIcon :name="tab.icon" class="w-5 h-5" />
        <span class="text-sm font-medium">{{ tab.label }}</span>
      </div>
    </template>
    
    <template #content="{ tab }">
      <div class="p-6 bg-white rounded-lg shadow animate-fade-in">
        <h3 class="text-xl font-bold mb-4">{{ tab.label }}</h3>
        <div class="prose">
          {{ tab.content }}
        </div>
      </div>
    </template>
  </PUTabs>
</template>
```

```vue
<script setup lang="ts">
// Assuming 'tabs' is defined as in the basic example
const tabs = [
  { label: 'Overview', content: 'General product information', icon: 'info' },
  { label: 'Features', content: 'Key product features', icon: 'list' },
  { label: 'Pricing', content: 'Subscription plans', icon: 'tag' }
]
</script>
```

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

### PUGrid Responsive Grid Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Illustrates how to create a responsive grid layout using the PUGrid component. This example shows how items adapt to different screen sizes automatically.

```Vue
<template>
  <PUGrid>
    <PUGridItem>Item 1</PUGridItem>
    <PUGridItem>Item 2</PUGridItem>
    <PUGridItem>Item 3</PUGridItem>
    <PUGridItem>Item 4</PUGridItem>
  </PUGrid>
</template>
```

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

### Install Paper UI Nuxt Module

Source: https://paper-docs.nuxt.space/docs/getting-started

Installs the paper-ui Nuxt module using npm, pnpm, or yarn. This is the first step to integrate Paper UI components into your Nuxt 3 project.

```bash
npm install @paper-ui/nuxt

# pnpm install @paper-ui/nuxt

# yarn add @paper-ui/nuxt
```

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

### PUToast Basic Usage Example

Source: https://paper-docs.nuxt.space/docs/components/pu-toast

Demonstrates the basic usage of the PUToast component, showing how to trigger a default toast notification.

```html
<button @click="toastStore.add({ severity: 'success', summary: 'Default Toast', detail: 'This is a success message.' })">Show Default Toast</button>
```

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

### Basic PUTabs Implementation

Source: https://paper-docs.nuxt.space/docs/components/pu-tabs

Demonstrates the minimal setup for the PUTabs component using default styling. It shows how to define tabs with labels, content, and icons.

```html
<template>
  <PUTabs :tabs="tabs" />
</template>
```

```vue
<script setup lang="ts">
const tabs = [
  { label: 'Overview', content: 'General product information', icon: 'info' },
  { label: 'Features', content: 'Key product features', icon: 'list' },
  { label: 'Pricing', content: 'Subscription plans', icon: 'tag' }
]
</script>
```

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

### PU-Badge Styling Example

Source: https://paper-docs.nuxt.space/docs/components/pu-badge

Provides an example of advanced customization for the PU-Badge component using CSS. This demonstrates how to apply custom styles and Tailwind CSS utilities.

```css
.pu-badge--default {
  @apply w-fit text-xs p-1 rounded-lg flex justify-between gap-2 items-center border-2;
}

```

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

### Install Paper-UI Nuxt Module

Source: https://paper-docs.nuxt.space/docs/components/pu-tabs

Instructions for adding the Paper-UI module to your Nuxt project configuration. This is the initial step for integrating Paper UI components.

```typescript
export default defineNuxtConfig({
  modules: ['@paper-ui/nuxt']
})
```

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

### PUToast Outlined Usage Example

Source: https://paper-docs.nuxt.space/docs/components/pu-toast

Illustrates how to use the PUToast component with outlined styling, triggering an outlined toast notification.

```html
<button @click="toastStore.add({ severity: 'info', summary: 'Outlined Toast', detail: 'This is an informational message.' })">Show Outlined Toast</button>
```

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

### PU-Badge Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-badge

Demonstrates the basic implementation of the PU-Badge component. This example shows how to render a simple badge with text.

```javascript
<template>
  <PU-Badge label="New Feature" />
</template>
```

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

### PUSwitch Basic Usage Example

Source: https://paper-docs.nuxt.space/docs/components/pu-switch

Demonstrates the basic implementation of the PUSwitch component, allowing users to toggle a value. This is the default state of the switch.

```html
<template>
  <PUSwitch v-model="toggle" />
</template>

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

const toggle = ref(false);
</script>
```

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

### PUGrid Fixed Size Columns Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Demonstrates creating a grid with fixed-size columns and flexible columns using the `cols` prop. This example sets two 200px columns and one flexible column in between.

```Vue
<template>
  <PUGrid cols="200px 1fr 200px" gap="large">
    <PUGridItem>Left sidebar</PUGridItem>
    <PUGridItem>Content</PUGridItem>
    <PUGridItem>Right sidebar</PUGridItem>
  </PUGrid>
</template>
```

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

### PUGrid Complex Grid Layout Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Provides an example of a complex grid layout, potentially used for structuring a page with distinct sections like header, content, sidebar, and footer.

```Vue
<template>
  <PUGrid cols="repeat(4, 1fr)" rows="auto 1fr auto" gap="medium">
    <PUGridItem :col-span="4">Header</PUGridItem>
    <PUGridItem>Menu</PUGridItem>
    <PUGridItem :col-span="3">Content</PUGridItem>
    <PUGridItem>Sidebar</PUGridItem>
    <PUGridItem :col-span="4">Footer</PUGridItem>
  </PUGrid>
</template>
```

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

### PUGrid 12-Column Grid Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Shows how to implement a 12-column grid system using the `cols` prop of PUGrid, allowing for precise layout control. This example divides content into main and sidebar sections.

```Vue
<template>
  <PUGrid cols="repeat(12, 1fr)" gap="medium">
    <PUGridItem :col-span="8">Main content</PUGridItem>
    <PUGridItem :col-span="4">Sidebar</PUGridItem>
  </PUGrid>
</template>
```

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

### PUCompare Component Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-compare

Demonstrates the fundamental implementation of the PU-Compare component, allowing users to visualize differences between two states with an interactive slider. This basic setup requires 'Before' and 'After' content slots.

```html
<PUCompare>
  <template #before>
    <!-- Content for the 'before' state -->
  </template>
  <template #after>
    <!-- Content for the 'after' state -->
  </template>
</PUCompare>
```

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

### PUSwitch Different Widths Example

Source: https://paper-docs.nuxt.space/docs/components/pu-switch

Demonstrates how to apply different width variants to the PUSwitch component, such as 'full' or 'mid'. This allows for responsive design adjustments.

```html
<template>
  <PUSwitch v-model="toggle" width="full" />
  <PUSwitch v-model="toggle" width="mid" />
</template>

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

const toggle = ref(false);
</script>
```

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

### PU-Tag Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-tag

Demonstrates the default usage of the PU-Tag component without any additional props or icons. This serves as a foundational example for integrating the tag into your application.

```vue
<template>
  <PU-Tag label="Default Tag" />
</template>

<script setup>
import PU-Tag from './PU-Tag.vue'; // Assuming PU-Tag is in the same directory
</script>
```

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

### PUSwitch Mid Variant Example

Source: https://paper-docs.nuxt.space/docs/components/pu-switch

Showcases the 'mid' variant of the PUSwitch component, which likely affects its size or visual style. This variant is presented for alternative styling options.

```html
<template>
  <PUSwitch v-model="toggle" flavor="mid" />
</template>

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

const toggle = ref(false);
</script>
```

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

### PUGrid Grid with Alignment Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Demonstrates how to align grid items vertically and horizontally within the grid using the `alignment` and `justify` props of PUGrid and PUGridItem.

```Vue
<template>
  <PUGrid alignment="center" justify="space-between">
    <PUGridItem>Top aligned</PUGridItem>
    <PUGridItem>Centered</PUGridItem>
    <PUGridItem>Bottom aligned</PUGridItem>
  </PUGrid>
</template>
```

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

### PUGrid Masonry Grid Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Illustrates how to create a masonry-style grid layout, where items are arranged in columns of equal width but varying heights. This is achieved using `repeat(auto-fill, minmax(250px, 1fr))` for columns.

```Vue
<template>
  <PUGrid cols="repeat(auto-fill, minmax(250px, 1fr))" gap="medium">
    <PUGridItem v-for="i in 6" :key="i" :row-span="i % 2 === 0 ? 2 : 1">
      Item {{ i }}
    </PUGridItem>
  </PUGrid>
</template>
```

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

### PUCopyToClipboard with Custom Text

Source: https://paper-docs.nuxt.space/docs/components/pu-copy

Illustrates how to customize the text displayed on the PUToCopyClipboard button and the text that gets copied. This allows for more specific user interactions.

```html
<template>
  <PUCopyToClipboard text="Click to Copy" value="Custom text to copy" />
</template>
```

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

### PU-Modal Component - Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-modal

Demonstrates the basic implementation of the PU-Modal component. This snippet shows how to render a simple modal dialog.

```html
<template>
  <PUModal>
    <template #header>Default Title text</template>
    <template #content>Default content text</template>
    <template #footer>
      <button>Close</button>
    </template>
  </PUModal>
</template>
```

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

### PU-Video Component Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-video

Demonstrates the fundamental implementation of the PU-Video component. This snippet shows how to integrate the video player into an application, likely requiring a video source URL.

```html
<PU-Video src="/path/to/your/video.mp4" />
```

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

### PUSwitch Disabled State Example

Source: https://paper-docs.nuxt.space/docs/components/pu-switch

Illustrates how to disable the PUSwitch component, preventing user interaction. This is useful for states where the switch should not be changed.

```html
<template>
  <PUSwitch v-model="toggle" disabled />
</template>

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

const toggle = ref(false);
</script>
```

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

### PUTable Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-table

Demonstrates the basic implementation of the PUTable component for displaying tabular data. It shows how to define headers and rows for the table.

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>
```

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

### Basic Usage of PUCopyToClipboard

Source: https://paper-docs.nuxt.space/docs/components/pu-copy

Demonstrates the basic implementation of the PUCopyToClipboard component. This snippet shows how to integrate the component into a Vue application for copying default text.

```html
<template>
  <PUCopyToClipboard />
</template>
```

```javascript
import { defineComponent } from 'vue';
import PUCopyToClipboard from './components/PUCopyToClipboard.vue';

export default defineComponent({
  components: {
    PUCopyToClipboard
  }
});
```

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

### PUCopyToClipboard with Different Sizes

Source: https://paper-docs.nuxt.space/docs/components/pu-copy

Shows how to use the PUToCopyClipboard component in different sizes (small, medium, large) to fit various UI requirements and design contexts.

```html
<template>
  <PUCopyToClipboard size="small" />
  <PUCopyToClipboard size="medium" />
  <PUCopyToClipboard size="large" />
</template>
```

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

### Basic Usage of Paper UI Dropdown

Source: https://paper-docs.nuxt.space/docs/components/pu-dropdown

Demonstrates the basic implementation of the Paper UI Dropdown component. It requires a placeholder and allows users to select an option.

```Vue
<template>
  <PUDropdown v-model="selectedOption" placeholder="Choose an option" :options="dropdownOptions" />
  <p>Selected: {{ selectedOption }}</p>
</template>

<script setup>
import { ref } from 'vue';
import PUDropdown from './PUDropdown.vue'; // Assuming PUDropdown is in the same directory

const selectedOption = ref('');
const dropdownOptions = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];
</script>
```

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

### PU-Video Component with Poster Image

Source: https://paper-docs.nuxt.space/docs/components/pu-video

Illustrates how to use the PU-Video component with a custom poster image displayed before playback begins. This enhances the user experience by providing a visual preview.

```html
<PU-Video src="/path/to/your/video.mp4" poster="/path/to/your/poster.jpg" />
```

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

### PUDatePicker Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-datepicker

Demonstrates the basic implementation of the PUDatePicker component. This snippet shows how to integrate the date picker into an application, allowing users to select dates.

```html
<template>
  <PUDatePicker v-model="selectedDate" />
</template>

<script setup>
import { ref } from 'vue';
import PUDatePicker from './PUDatePicker.vue'; // Assuming the component is in the same directory

const selectedDate = ref(null);
</script>
```

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

### PUGrid Grid with Span Example

Source: https://paper-docs.nuxt.space/docs/components/pu-grid

Shows how to control the span of grid items using PUGridItem's `col-span` prop. This allows for creating layouts where some items occupy more columns than others.

```Vue
<template>
  <PUGrid>
    <PUGridItem :col-span="2">Large item (2 columns)</PUGridItem>
    <PUGridItem>Small item</PUGridItem>
    <PUGridItem>Small item</PUGridItem>
    <PUGridItem>Full width item (4 columns)</PUGridItem>
  </PUGrid>
</template>
```

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

### Basic PUIcon Usage

Source: https://paper-docs.nuxt.space/docs/icons

Demonstrates the basic usage of the PUIcon component by displaying an icon with a given name. This is the simplest way to integrate an icon into your application.

```vue
<template>
  <PUIcon name="home" />
</template>

```

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

### PUDatePicker With Date Range Restriction

Source: https://paper-docs.nuxt.space/docs/components/pu-datepicker

Demonstrates how to restrict date selection within a specific range using the `disabledRange` prop. This prop accepts an object with `start` and `end` date properties.

```html
<template>
  <PUDatePicker v-model="selectedDate" :disabledRange="{ start: '2023-10-20', end: '2023-10-25' }" />
</template>

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

const selectedDate = ref(null);
</script>
```

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

### Customize Icon Color with Tailwind CSS

Source: https://paper-docs.nuxt.space/docs/icons

Shows how to change the color of an icon component by applying Tailwind CSS color utility classes. Examples include using predefined color shades like 'text-red-500' or 'text-yellow-400'.

```vue
<PUIcon name="heart" class="text-red-500" />
<PUIcon name="sun" class="text-yellow-400" />
<PUIcon name="cloud" class="text-blue-300" />
```

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

### PUButton Variants and Sizes

Source: https://paper-docs.nuxt.space/docs/components/pu-button

Illustrates the different flavor, size, and shape variants available for the PUButton component.

```html
<!-- Flavor Variants -->
<button class="pu-button">Normal</button>
<button class="pu-button pu-button--outlined">Outlined</button>
<button class="pu-button pu-button--ghost">Ghost</button>

<!-- Size Variants -->
<button class="pu-button pu-button--small">Small</button>
<button class="pu-button">Medium</button>
<button class="pu-button pu-button--large">Large</button>

<!-- Shape Variants -->
<button class="pu-button pu-button--rounded">Rounded</button>
<button class="pu-button pu-button--circle">Circle</button>
```

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

### PU-Audio Component Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-audio

Demonstrates the basic usage of the PU-Audio component, a customizable audio player with playback controls and volume management. It requires the 'src' prop for the audio file URL and depends on PUIcon, Tailwind CSS, and Vue 3 Composition API.

```html
<template>
  <PUAudio src="/path/to/your/audio.mp3" />
</template>

<script setup>
import PUAudio from './components/PUAudio.vue'; // Adjust path as needed
</script>
```

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

### PUButton Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-button

Demonstrates the basic usage of the PUButton component. This is the default appearance of the button.

```html
<button class="pu-button">Click me</button>
```

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

### Use PUTabs Component in Nuxt

Source: https://paper-docs.nuxt.space/docs/getting-started

Demonstrates how to use the PUTabs component in a Nuxt 3 application. It includes importing and using the component with custom tab content and labels.

```vue
<template>
  <div>
    <PUTabs :tabs="tabs">
      <template #tab="{ tab, isActive }">
        <span :class="{ 'font-bold': isActive }">
          {{ tab.label }}
        </span>
      </template>

      <template #content="{ tab }">
        <p>{{ tab.content }}</p>
      </template>
    </PUTabs>
  </div>
</template>

<script setup lang="ts">
const tabs = [
  { label: 'Tab 1', content: 'This is the content for Tab 1.' },
  { label: 'Tab 2', content: 'This is the content for Tab 2.' },
  { label: 'Tab 3', content: 'This is the content for Tab 3.' }
]
</script>
```

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

### PULoading Component - Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-loading

Demonstrates the basic usage of the PULoading component, a hand-drawn style loading indicator. It requires Tailwind CSS and Vue 3 Composition API.

```Vue
<template>
  <PULoading />
</template>

<script setup>
import PULoading from '@components/PULoading.vue'
</script>
```

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

### Paper UI Tooltip: Top Positions

Source: https://paper-docs.nuxt.space/docs/components/pu-tooltip

Demonstrates the usage of the Paper UI Tooltip component with different top-aligned positions. This includes standard top, top-left, and top-right placements.

```html
<div>
  Top 
  Top 
  Top 
</div>
```

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

### PUSearch Component Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-search

Demonstrates the basic implementation of the PUSearch component. It shows how to bind the input value and handle search events.

```vue
<template>
  <PUSearch v-model="searchValue" @search="handleSearch" />
</template>

<script setup>
import { ref } from 'vue';
import PUSearch from './PUSearch.vue'; // Assuming PUSearch is in the same directory

const searchValue = ref('');

const handleSearch = (query) => {
  console.log('Search query:', query);
};
</script>
```

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

### PUTable with Pagination

Source: https://paper-docs.nuxt.space/docs/components/pu-table

Demonstrates the integration of pagination controls with the PUTable component. This allows for managing large datasets by displaying them across multiple pages.

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>
<div class="pagination">
  <span>Previous Page</span>
  <span>1 of 2</span>
  <span>Next</span>
</div>
```

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

### PU-TextArea Component - Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-textarea

Demonstrates the basic usage of the PU-TextArea component, showing how to integrate it into a Vue.js application with v-model support.

```html
<template>
  <PUTextArea v-model="text" placeholder="Enter text here..."></PUTextArea>
</template>

<script setup>
import { ref } from 'vue';
import PUTextArea from './PUTextArea.vue'; // Assuming PUTextArea is in the same directory

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

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

### PU-Audio Component Styling - Core Structure

Source: https://paper-docs.nuxt.space/docs/components/pu-audio

Provides the core structure styling for the PU-Audio component using Tailwind CSS. This includes styling for the main container and the control elements, ensuring a responsive and visually appealing audio player.

```css
.audio-container {
  @apply relative w-full max-w-lg border-2 border-primary-light-500 
        rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white;
}

.controls {
  @apply flex items-center gap-3;
}
```

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

### Paper UI Tooltip Core Styles

Source: https://paper-docs.nuxt.space/docs/components/pu-tooltip

Provides the base CSS styling for the Paper UI Tooltip component, including general appearance, borders, padding, and shadow effects using Tailwind CSS.

```css
.pu-tooltip {
  @apply relative border-2 border-primary-light-500 bg-white 
        rounded-lg text-center p-4 shadow-lg shadow-primary-light-500/20;
}

.tooltip-arrow {
  @apply absolute w-6 h-6 bg-white transform z-10 rounded-sm;
  border: 2px solid inherit;
}
```

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

### PUIcon in PUButton

Source: https://paper-docs.nuxt.space/docs/icons

Illustrates how to embed the PUIcon component within a PUButton to create buttons with icons. This enhances user interface elements by providing visual cues.

```vue
<template>
  <PUButton>
    <PUIcon name="download" />
    Download
  </PUButton>
</template>

```

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

### PUGrid Component

Source: https://paper-docs.nuxt.space/docs/index

The PUGrid component is used for layout and structure, allowing for the arrangement of other components in a grid format. It's a foundational element for building responsive layouts.

```vue
<template>
  <PUGrid>
    <!-- Grid items -->
  </PUGrid>
</template>
```

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

### PUTooltip Component

Source: https://paper-docs.nuxt.space/docs/index

The PUTooltip component displays a small informational pop-up when a user hovers over or focuses on an element. It provides additional context or labels.

```vue
<template>
  <div>
    <PUTooltip text="This is a tooltip!">
      <span>Hover over me</span>
    </PUTooltip>
  </div>
</template>
```

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

### PURadio Component Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-radio

Demonstrates the basic and multi-option usage of the PURadio component. It shows how to implement single radio buttons and groups of radio options for user selection.

```vue
<template>
  <div>
    <h6>Option 1</h6>
    <p>Option 1</p>
    <p>Option 1</p>
  </div>
</template>
```

```vue
<template>
  <div>
    <h6>With Multiple Options</h6>
    <p>Option 1</p>
    <p>Option 2</p>
    <p>Option 3</p>
  </div>
</template>
```

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

### PUCopyToClipboard Component

Source: https://paper-docs.nuxt.space/docs/index

The PUCopyToClipboard component allows users to easily copy text to their clipboard with a single click. It's useful for sharing code snippets or important information.

```vue
<template>
  <div>
    <PUCopyToClipboard text="Text to copy" />
  </div>
</template>
```

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

### PUTable with Filtering

Source: https://paper-docs.nuxt.space/docs/components/pu-table

Shows how to implement global filtering for the PUTable component, enabling users to search and filter rows based on input. This typically relies on the PUInput component.

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>
```

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

### Configure Paper UI in Nuxt

Source: https://paper-docs.nuxt.space/docs/getting-started

Configures the Paper UI module by adding 'paper-ui' to the modules array in your nuxt.config.ts file. This makes Paper UI components globally available.

```typescript
export default defineNuxtConfig({
  modules: ['paper-ui']
})
```

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

### PUTabs Component

Source: https://paper-docs.nuxt.space/docs/index

The PUTabs component enables users to switch between different content panels using tabs. It's effective for organizing related content.

```vue
<template>
  <div>
    <PUTabs>
      <template #tab1>Tab 1</template>
      <template #tab2>Tab 2</template>
      <template #tab3>Tab 3</template>
      
      <template #content1>Content for Tab 1</template>
      <template #content2>Content for Tab 2</template>
      <template #content3>Content for Tab 3</template>
    </PUTabs>
  </div>
</template>
```

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

### PUButton with Icons

Source: https://paper-docs.nuxt.space/docs/components/pu-button

Shows how to use the PUButton component with icons placed on the left or right.

```html
<button class="pu-button" icon-left="navigation">
  Navigation
</button>
<button class="pu-button" icon-right="navigation">
  Navigation
</button>
```

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

### PU-Avatar: Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-avatar

Demonstrates the basic usage of the PU-Avatar component. This component supports images, fallback content, and various styling options for customization.

```html
<template>
  <PUAvatar src="/path/to/image.jpg" />
</template>
```

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

### PUToast Base Styling

Source: https://paper-docs.nuxt.space/docs/components/pu-toast

Provides the core CSS structure for the PUToast component using Tailwind CSS, defining its layout and general appearance.

```css
.pu-toast {
  @apply flex items-center justify-between p-4 gap-2;
  @apply rounded-lg shadow-md transition-all duration-300;
  @apply ease-in-out border opacity-100 transform scale-100;
}
```

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

### PUButton Base Styles

Source: https://paper-docs.nuxt.space/docs/components/pu-button

Defines the base CSS styles for the PUButton component, including padding, shadow, transition, and layout.

```css
.pu-button {
  @apply py-2 shadow-md transition duration-200 ease-in-out flex justify-center gap-1;
}
.pu-button:not(:disabled):hover {
  @apply shadow-primary-light-500/50 font-bold;
}
```

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

### Paper UI Tooltip: Bottom Positions

Source: https://paper-docs.nuxt.space/docs/components/pu-tooltip

Illustrates the Paper UI Tooltip component's bottom positioning options. This covers bottom, bottom-left, and bottom-right placements for tooltips.

```html
<div>
  Bottom 
  Bottom 
  Bottom 
</div>
```

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

### Counter Component - Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-counter

Demonstrates the basic usage of the Paper UI Counter component. It displays a counter with default settings and increment/decrement controls.

```vue
<template>
  <PUCounter v-model="count" />
</template>

<script setup>
import { ref } from 'vue';
import PUCounter from './PUCounter.vue'; // Assuming PUCounter is in the same directory

const count = ref(5);
</script>
```

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

### PUInput Component with Label

Source: https://paper-docs.nuxt.space/docs/components/pu-input

Illustrates the PUInput component when used with a label. Labels provide context and improve accessibility.

```html
<PUInput label="Your Name" v-model="inputValue" />
```

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

### PU-Avatar: Fallback Content

Source: https://paper-docs.nuxt.space/docs/components/pu-avatar

Demonstrates how to configure fallback content for the PU-Avatar component when an image source is not provided or fails to load.

```html
<template>
  <PUAvatar :src="null"> 
    Fallback Text
  </PUAvatar>
</template>
```

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

### PUInput Component Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-input

Demonstrates the basic usage of the PUInput component. This component is a customizable input field designed for web applications.

```html
<PUInput v-model="inputValue" />
```

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

### PUSearch Component Loading State

Source: https://paper-docs.nuxt.space/docs/components/pu-search

Shows how to activate the loading state for the PUSearch component, typically used while fetching search results.

```vue
<template>
  <PUSearch
    v-model="searchValue"
    :loading="isLoading"
    :suggestions="searchSuggestions"
    @search="fetchResults"
  />
</template>

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

const searchValue = ref('');
const isLoading = ref(false);
const searchSuggestions = ref([]);

const fetchResults = async (query) => {
  isLoading.value = true;
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  searchSuggestions.value = [
    { text: `Result for ${query} 1`, value: `${query}-1` },
    { text: `Result for ${query} 2`, value: `${query}-2` },
  ];
  isLoading.value = false;
};
</script>
```

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

### PU-Select Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-select

Demonstrates the fundamental usage of the PU-Select component, allowing users to select an option from a predefined list. It supports v-model for data binding.

```html
<template>
  <PUSelect :options="options" v-model="selectedOption" />
</template>

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

const options = ref([
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
]);

const selectedOption = ref(null);
</script>
```

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

### PUToast Transition Effects Styling

Source: https://paper-docs.nuxt.space/docs/components/pu-toast

Specifies CSS for smooth enter and leave animations of the PUToast component using Tailwind CSS transitions.

```css
.toast-transition-enter-active,
.toast-transition-leave-active {
  @apply transition-all duration-300;
}

.toast-transition-enter-from {
  @apply opacity-0 transform translate-y-4;
}

.toast-transition-leave-to {
  @apply opacity-0 transform translate-y-4;
}
```

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

### PUSlider Basic Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-slider

Demonstrates the basic implementation of the PUSlider component. It shows how to bind a value to the slider and display it.

```html
<template>
  <PUSlider v-model="value" />
  <p>Value: {{ value }}</p>
</template>

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

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

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

### PUSearch Component with Suggestions

Source: https://paper-docs.nuxt.space/docs/components/pu-search

Illustrates how to use the PUSearch component with a list of suggestions. This includes defining the suggestion data and handling suggestion selection.

```vue
<template>
  <PUSearch
    v-model="searchValue"
    :suggestions="searchSuggestions"
    @suggestion-select="handleSuggestionSelect"
  />
</template>

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

const searchValue = ref('');
const searchSuggestions = ref([
  { text: 'Vue.js', value: 'vue' },
  { text: 'Nuxt.js', value: 'nuxt' },
  { text: 'Paper UI', value: 'paperui' },
]);

const handleSuggestionSelect = (suggestion) => {
  console.log('Selected suggestion:', suggestion);
  searchValue.value = suggestion.text;
};
</script>
```

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

### Basic PUDivider Usage

Source: https://paper-docs.nuxt.space/docs/components/pu-divider

Demonstrates the basic implementation of the PUDivider component for creating a simple horizontal visual separation.

```vue
<template>
  <div>
    Content above
    <pudivider></pudivider>
    Content below
  </div>
</template>
```

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

### PUButton Component

Source: https://paper-docs.nuxt.space/docs/index

The PUButton component is a standard button element used for triggering actions. It provides customizable styling and click event handling.

```vue
<template>
  <div>
    <PUButton @click="handleClick">Click me!</PUButton>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>
```

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

### PULoading Component - Skeleton Loading

Source: https://paper-docs.nuxt.space/docs/components/pu-loading

Illustrates the skeleton loading effect using the PULoading component. This component is built with Vue 3 Composition API and styled with Tailwind CSS.

```Vue
<template>
  <PULoading type="skeleton" />
</template>

<script setup>
import PULoading from '@components/PULoading.vue'
</script>
```
Tokens:
Raw