### Configure Buefy Plugin

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/configuration.md

Example of installing the Buefy plugin with custom global configuration options.

```javascript
import { createApp } from 'vue'
import Buefy from '@ntohq/buefy-next'

const app = createApp({})

app.use(Buefy, {
    defaultIconPack: 'fas',
    defaultToastPosition: 'is-bottom-right',
    defaultDatepickerMobileNative: false,
    defaultModalCanCancel: ['escape', 'x'],
    defaultLocale: 'en-US',
    customIconPacks: {
        custom: {
            sizes: { small: 'is-small', medium: 'is-medium' },
            iconPrefix: 'icon-'
        }
    }
})
```

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

### Install Buefy globally

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/plugin-and-programmatic-api.md

Installs all components and services at once with optional configuration.

```typescript
import { createApp } from 'vue'
import Buefy from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({})

app.use(Buefy)
// or with configuration
app.use(Buefy, {
    defaultToastPosition: 'is-bottom-right',
    defaultDatepickerMobileNative: false
})
```

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

### Implement BTabs with BTabItem

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

A complete example showing how to structure tabs with labels, icons, and closable items using Vue 3 script setup.

```vue
<template>
    <b-tabs v-model="activeTab" animated expanded>
        <b-tab-item label="Pictures" icon="images">
            <div class="content">
                <!-- Picture content -->
            </div>
        </b-tab-item>

        <b-tab-item label="Music" icon="music">
            <div class="content">
                <!-- Music content -->
            </div>
        </b-tab-item>

        <b-tab-item label="Videos" icon="video" closable>
            <div class="content">
                <!-- Video content -->
            </div>
        </b-tab-item>
    </b-tabs>
</template>

<script setup>
import { ref } from 'vue'
import { BTabs, BTabItem } from '@ntohq/buefy-next'

const activeTab = ref(0)
</script>
```

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

### Install individual components

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/OVERVIEW.md

Register specific components to reduce bundle size.

```javascript
import { createApp } from 'vue'
import { Field, Input, Button } from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({})
app.use(Field)
app.use(Input)
app.use(Button)
```

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

### Install Buefy-Next globally

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/OVERVIEW.md

Register the entire library with a Vue application instance.

```javascript
import { createApp } from 'vue'
import Buefy from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({})
app.use(Buefy)
```

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

### Install Developer Releases

Source: https://github.com/ntohq/buefy-next/blob/dev/README.md

Commands to install specific developer versions or the latest snapshot from the GitHub registry.

```bash
npm install buefy@npm:@ntohq/buefy-next@<package version>-<dev commit hash>
```

```bash
npm install buefy@npm:@ntohq/buefy-next@latest
```

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

### BSnackbar Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/modal-dialog-notice.md

Demonstrates opening a snackbar with an action callback.

```javascript
this.$buefy.snackbar.open({
    message: 'Item deleted',
    actionText: 'Undo',
    type: 'is-info',
    position: 'is-bottom-right',
    onAction: () => {
        console.log('Undoing...')
    }
})
```

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

### Implement BMenu Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

A complete example showing the structure of a menu with multiple lists and items using the Vue composition API.

```vue
<template>
    <aside class="menu">
        <b-menu accordion>
            <b-menu-list label="General" icon="information" :active="true">
                <b-menu-item tag="a" href="/dashboard" label="Dashboard" />
                <b-menu-item tag="a" href="/settings" label="Settings" />
            </b-menu-list>

            <b-menu-list label="Manage" icon="cog">
                <b-menu-item tag="a" href="/users" label="Users" />
                <b-menu-item tag="a" href="/permissions" label="Permissions" />
                <b-menu-item tag="a" href="/roles" label="Roles" />
            </b-menu-list>

            <b-menu-list label="Admin" icon="shield">
                <b-menu-item tag="a" href="/audit" label="Audit Log" />
                <b-menu-item tag="a" href="/system" label="System" />
            </b-menu-list>
        </b-menu>
    </aside>
</template>

<script setup>
import { BMenu, BMenuList, BMenuItem } from '@ntohq/buefy-next'
</script>
```

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

### Install and Initialize Buefy-next

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/README.md

Import the library and its CSS, then register the plugin with a Vue 3 application instance.

```typescript
import Buefy from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({})
app.use(Buefy)
```

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

### Install specific components

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/plugin-and-programmatic-api.md

Install only required components to reduce bundle size.

```typescript
import { createApp } from 'vue'
import { Button, Field, Input } from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({})

app.use(Button)
app.use(Field)
app.use(Input)
```

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

### Install Buefy-next via NPM

Source: https://github.com/ntohq/buefy-next/blob/dev/README.md

Use this command to install the Vue 3 compatible fork under the buefy alias.

```sh
npm install buefy@npm:@ntohq/buefy-next
```

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

### Install Buefy-Next plugin

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/EXPORTS.md

The main entry point for installing the Buefy-Next plugin into a Vue application.

```typescript
export default Buefy = {
    install(Vue: App, options?: BuefyConfigOptions): void
}
```

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

### BSwitch Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates basic, colored, and disabled switch configurations using v-model for state management.

```vue
<template>
    <div>
        <!-- Basic switch -->
        <b-switch v-model="enabled">
            Enable feature
        </b-switch>

        <!-- Colored switches -->
        <b-switch v-model="notifications" type="is-success">
            Send notifications
        </b-switch>

        <b-switch v-model="darkMode" type="is-info">
            Dark mode
        </b-switch>

        <!-- Disabled -->
        <b-switch disabled>
            Locked setting
        </b-switch>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BSwitch } from '@ntohq/buefy-next'

const enabled = ref(false)
const notifications = ref(true)
const darkMode = ref(false)
</script>
```

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

### BSidebar Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

Demonstrates using BSidebar with menu items and a toggle button.

```vue
<template>
    <div>
        <b-sidebar v-model="sidebarOpen" type="is-light" position="is-left">
            <div class="sidebar-content">
                <b-menu>
                    <b-menu-list label="Navigation">
                        <b-menu-item tag="a" href="/" label="Home" />
                        <b-menu-item tag="a" href="/about" label="About" />
                    </b-menu-list>
                </b-menu>
            </div>
        </b-sidebar>

        <b-button @click="sidebarOpen = !sidebarOpen" label="Toggle Sidebar" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BSidebar, BButton, BMenu, BMenuList, BMenuItem } from '@ntohq/buefy-next'

const sidebarOpen = ref(false)
</script>
```

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

### Implement BNavbar in Vue

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

A complete example showing the structure of a navigation bar using slots for brand, start, and end sections.

```vue
<template>
    <b-navbar type="is-primary" spaced>
        <template #brand>
            <b-navbar-item tag="div" class="navbar-heading">
                <h1>My App</h1>
            </b-navbar-item>
            <b-navbar-burger @click="navbarOpen = !navbarOpen" :active="navbarOpen" />
        </template>

        <template #start>
            <b-navbar-item tag="div">
                <div class="buttons">
                    <b-button type="is-light" label="Sign up" />
                    <b-button type="is-primary" label="Log in" />
                </div>
            </b-navbar-item>
        </template>

        <template #end>
            <b-navbar-item active tag="a" href="/docs">
                Documentation
            </b-navbar-item>
            <b-navbar-item tag="a" href="/github">
                GitHub
            </b-navbar-item>

            <b-navbar-dropdown label="Account" right>
                <b-navbar-item tag="a" href="/profile">
                    Profile
                </b-navbar-item>
                <b-navbar-item tag="a" href="/logout">
                    Logout
                </b-navbar-item>
            </b-navbar-dropdown>
        </template>
    </b-navbar>
</template>

<script setup>
import { ref } from 'vue'
import { BNavbar, BNavbarItem, BNavbarBurger, BNavbarDropdown, BButton } from '@ntohq/buefy-next'

const navbarOpen = ref(false)
</script>
```

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

### Buefy.install

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/EXPORTS.md

Installs the Buefy plugin into a Vue application.

```APIDOC
## Buefy.install(Vue: App, options?: BuefyConfigOptions)

### Description
Installs the Buefy plugin into the specified Vue application instance with optional configuration.

### Parameters
- **Vue** (App) - Required - The Vue application instance.
- **options** (BuefyConfigOptions) - Optional - Configuration options for the plugin.
```

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

### BNotification Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/modal-dialog-notice.md

Demonstrates both declarative component usage and programmatic triggering.

```vue
<template>
    <b-notification
        type="is-info"
        has-icon
        icon="information"
    >
        This is an informational notification
    </b-notification>
</template>

<script setup>
import { BNotification } from '@ntohq/buefy-next'

// Programmatic
const notify = () => {
    this.$buefy.notification.open({
        message: 'New message received',
        type: 'is-primary',
        duration: 5000
    })
}
</script>
```

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

### Implement component usage patterns

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/EXPORTS.md

Common patterns for importing and installing components or the main plugin.

```typescript
// Pattern 1: Import and install
import Button from '@ntohq/buefy-next'
app.use(Button)

// Pattern 2: Direct component import
import { BButton } from '@ntohq/buefy-next'

// Pattern 3: Main plugin
import Buefy from '@ntohq/buefy-next'
app.use(Buefy)
```

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

### BButton Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/button-icon-image.md

Demonstrates various button configurations including icons, loading states, full-width styling, and custom tags.

```vue
<template>
    <div>
        <!-- Basic button -->
        <b-button>Click me</b-button>

        <!-- Styled button with icon -->
        <b-button type="is-primary" icon-left="check" label="Save" />

        <!-- Loading state -->
        <b-button loading label="Processing..." />

        <!-- Full width, outlined -->
        <b-button type="is-danger" outlined expanded label="Delete" />

        <!-- As link using tag prop -->
        <b-button tag="a" href="/dashboard" label="Go to Dashboard" />

        <!-- With slot -->
        <b-button type="is-success">
            <b-icon pack="mdi" icon="plus" />
            <span>Add Item</span>
        </b-button>
    </div>
</template>

<script setup>
import { BButton, BIcon } from '@ntohq/buefy-next'
</script>
```

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

### BImage Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/button-icon-image.md

Demonstrates various configurations including aspect ratios, lazy loading, responsive behavior, WebP fallbacks, and custom srcset formatting.

```vue
<template>
    <div>
        <!-- Basic image -->
        <b-image src="/photo.jpg" alt="My photo" />

        <!-- With aspect ratio -->
        <b-image src="/video-thumbnail.jpg" ratio="16/9" />

        <!-- Custom lazy loading and responsive -->
        <b-image 
            src="/hero-image.jpg"
            lazy
            responsive
            alt="Hero banner"
        />

        <!-- With WebP fallback -->
        <b-image 
            src="/image.webp"
            webp-fallback=".jpg"
            alt="Optimized image"
        />

        <!-- Custom srcset formatter -->
        <b-image 
            src="/image.jpg"
            :srcset-formatter="customFormatter"
        />
    </div>
</template>

<script setup>
import { BImage } from '@ntohq/buefy-next'

const customFormatter = (src, size) => {
    return src.replace(/\.\w+$/, `@${size}w.jpg`)
}
</script>
```

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

### BInput Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/form-controls.md

Demonstrates various configurations including basic inputs, email/password types, icons, character counters, read-only states, and custom slots.

```vue
<template>
    <div>
        <!-- Basic input -->
        <b-input v-model="text" placeholder="Type here..." />

        <!-- Email with validation -->
        <b-input 
            v-model="email"
            type="email"
            placeholder="your@email.com"
        />

        <!-- Password input -->
        <b-input 
            v-model="password"
            type="password"
            placeholder="Enter password"
        />

        <!-- With icon and character counter -->
        <b-input
            v-model="search"
            type="search"
            icon="magnify"
            maxlength="100"
            clearable
            placeholder="Search items..."
        />

        <!-- Read-only with status -->
        <b-input
            :model-value="computedValue"
            readonly
            status-icon
        />

        <!-- Custom left/right slots -->
        <b-input v-model="amount">
            <template #left>
                <span class="is-size-6">$</span>
            </template>
            <template #right>
                <span class="is-size-6">.00</span>
            </template>
        </b-input>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BInput } from '@ntohq/buefy-next'

const text = ref('')
const email = ref('')
const password = ref('')
const search = ref('')
const amount = ref('0')
const computedValue = ref('readonly value')
</script>
```

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

### BIcon Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/button-icon-image.md

Demonstrates various ways to implement icons, including different packs, sizes, custom classes, and integration within a button.

```vue
<template>
    <div>
        <!-- Material Design Icon (default) -->
        <b-icon icon="check" />

        <!-- FontAwesome icon -->
        <b-icon pack="fas" icon="check" />

        <!-- Custom icon pack -->
        <b-icon pack="custom-pack" icon="my-icon" />

        <!-- Sized icon -->
        <b-icon icon="star" size="is-large" />

        <!-- With additional classes -->
        <b-icon icon="loading" class="is-spinning" />

        <!-- Inside button -->
        <b-button icon-left="arrow-left" type="is-primary" />
    </div>
</template>

<script setup>
import { BIcon } from '@ntohq/buefy-next'
</script>
```

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

### Initialize with type-safe configuration

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/configuration.md

Apply configuration during application setup using the BuefyConfigOptions type for type safety.

```typescript
import type { BuefyConfigOptions } from '@ntohq/buefy-next'

const config: BuefyConfigOptions = {
    defaultToastDuration: 5000,
    defaultToastPosition: 'is-bottom'
}

app.use(Buefy, config)
```

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

### Implement BDatepicker Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/date-time-color.md

Demonstrates various BDatepicker configurations including single date, range selection, multiple date selection, and inline display.

```vue
<template>
    <div>
        <!-- Single date -->
        <b-field label="Birth Date">
            <b-datepicker 
                v-model="birthDate"
                placeholder="Click to select a date"
                icon="calendar"
            />
        </b-field>

        <!-- Date range -->
        <b-field label="Stay Duration">
            <b-datepicker
                v-model="dateRange"
                range
                placeholder="Select range"
            />
        </b-field>

        <!-- Multiple dates -->
        <b-field label="Available Dates">
            <b-datepicker
                v-model="selectedDates"
                multiple
                placeholder="Select dates"
            />
        </b-field>

        <!-- Inline calendar -->
        <b-datepicker
            v-model="inlineDate"
            inline
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BDatepicker, BField } from '@ntohq/buefy-next'

const birthDate = ref(null)
const dateRange = ref([])
const selectedDates = ref([])
const inlineDate = ref(new Date())
</script>
```

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

### BColorpicker Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/date-time-color.md

Demonstrates various configurations including inline pickers, input-based pickers, and different representation styles.

```vue
<template>
    <div>
        <!-- HEX color input -->
        <b-field label="Brand Color">
            <b-colorpicker
                v-model="hexColor"
                inline
                representation="triangle"
            />
        </b-field>

        <!-- With input field -->
        <b-field label="Theme Color">
            <b-colorpicker
                v-model="themeColor"
                placeholder="Select a color"
                icon="palette"
            />
        </b-field>

        <!-- Square representation -->
        <b-field label="Accent Color">
            <b-colorpicker
                v-model="accentColor"
                representation="square"
                horizontal-color-picker
            />
        </b-field>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BColorpicker, BField } from '@ntohq/buefy-next'

const hexColor = ref('#FF0000')
const themeColor = ref('#0066FF')
const accentColor = ref('#00AA00')
</script>
```

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

### BTaginput Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates various configurations including basic tags, autocomplete suggestions, tag limits with counters, and custom tag formatting.

```vue
<template>
    <div>
        <!-- Basic tags -->
        <b-field label="Skills">
            <b-taginput
                v-model="skills"
                placeholder="Add a skill..."
                icon="label"
                allow-new
            />
        </b-field>

        <!-- With autocomplete suggestions -->
        <b-field label="Technologies">
            <b-taginput
                v-model="selectedTechs"
                :data="filteredTechs"
                autocomplete
                open-on-focus
                placeholder="Type to search..."
                @typing="searchTechs"
            />
        </b-field>

        <!-- Limited tags with counter -->
        <b-field label="Select genres (max 5)">
            <b-taginput
                v-model="genres"
                :data="availableGenres"
                maxtags="5"
                has-counter
                placeholder="Select genres..."
            />
        </b-field>

        <!-- Custom tag styling -->
        <b-field label="Important contacts">
            <b-taginput
                v-model="contacts"
                :data="contactSuggestions"
                field="email"
                type="is-success"
                :custom-formatter="(contact) => contact.name + ' (' + contact.email + ')'"
            />
        </b-field>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { BTaginput, BField } from '@ntohq/buefy-next'

const skills = ref(['Vue', 'TypeScript'])
const selectedTechs = ref([])

const allTechs = ref([
    'Vue.js', 'React', 'Angular', 'Svelte',
    'Node.js', 'Python', 'Go', 'Rust'
])

const filteredTechs = computed(() =>
    allTechs.value.filter(t =>
        !selectedTechs.value.includes(t)
    )
)

const searchTechs = (query) => {
    // Filter logic handled by computed property
}

const genres = ref([])
const availableGenres = ref(['Action', 'Comedy', 'Drama', 'Horror', 'Romance'])

const contacts = ref([])
const contactSuggestions = ref([
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' }
])
</script>
```

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

### BAutocomplete Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates basic usage, custom formatting with grouping, and asynchronous data fetching with custom slot rendering.

```vue
<template>
    <div>
        <!-- Basic autocomplete -->
        <b-field label="Search users">
            <b-autocomplete
                v-model="selectedUser"
                :data="filteredUsers"
                field="name"
                placeholder="Type name..."
                clearable
                @typing="searchUsers"
            />
        </b-field>

        <!-- With custom formatter and grouping -->
        <b-field label="Select category">
            <b-autocomplete
                v-model="selectedCategory"
                :data="categories"
                field="name"
                group-field="type"
                group-options="items"
                :custom-formatter="(item) => item.icon + ' ' + item.name"
                open-on-focus
            />
        </b-field>

        <!-- Async loading -->
        <b-field label="Search books">
            <b-autocomplete
                v-model="selectedBook"
                :data="searchResults"
                field="title"
                placeholder="Search..."
                :loading="isLoading"
                @typing="fetchBooks"
            >
                <template v-slot="props">
                    <div class="autocomplete-item">
                        <strong>{{ props.option.title }}</strong>
                        <br>
                        <small>{{ props.option.author }}</small>
                    </div>
                </template>
            </b-autocomplete>
        </b-field>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { BAutocomplete, BField } from '@ntohq/buefy-next'

const selectedUser = ref(null)
const users = ref([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Alice Anderson' },
    { id: 3, name: 'Bob' }
])

const filteredUsers = ref([])

const searchUsers = (query) => {
    filteredUsers.value = users.value.filter(u =>
        u.name.toLowerCase().includes(query.toLowerCase())
    )
}

const selectedCategory = ref(null)
const categories = ref([])

const selectedBook = ref(null)
const searchResults = ref([])
const isLoading = ref(false)

const fetchBooks = async (query) => {
    isLoading.value = true
    try {
        const response = await fetch(`/api/books?q=${query}`)
        searchResults.value = await response.json()
    } finally {
        isLoading.value = false
    }
}
</script>
```

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

### BModal Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/modal-dialog-notice.md

Demonstrates using BModal with v-model and as a structured modal card.

```vue
<template>
    <div>
        <!-- Modal with v-model -->
        <b-modal v-model:active="isModalOpen" title="Welcome">
            <p>This is the modal content</p>
        </b-modal>

        <!-- Modal card (structured) -->
        <b-modal
            v-model:active="showForm"
            has-modal-card
            title="User Form"
            @close="onFormClose"
        >
            <template #default>
                <b-field label="Name">
                    <b-input v-model="form.name" />
                </b-field>
                <b-field label="Email">
                    <b-input v-model="form.email" type="email" />
                </b-field>
            </template>
            <template #footer>
                <b-button type="is-light" @click="showForm = false">
                    Cancel
                </b-button>
                <b-button type="is-primary" @click="submitForm">
                    Submit
                </b-button>
            </template>
        </b-modal>

        <b-button @click="isModalOpen = true" label="Open Modal" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BModal, BButton, BField, BInput } from '@ntohq/buefy-next'

const isModalOpen = ref(false)
const showForm = ref(false)
const form = ref({ name: '', email: '' })

const onFormClose = () => {
    console.log('Form modal closed')
}

const submitForm = () => {
    console.log('Submitted:', form.value)
    showForm.value = false
}
</script>
```

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

### BClockpicker Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/date-time-color.md

Implementation of a clock picker component with auto-switch enabled.

```vue
<template>
    <b-field label="Select Time">
        <b-clockpicker
            v-model="selectedTime"
            auto-switch
            hour-format="12"
        />
    </b-field>
</template>

<script setup>
import { ref } from 'vue'
import { BClockpicker, BField } from '@ntohq/buefy-next'

const selectedTime = ref(new Date())
</script>
```

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

### Implement BRate Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates standard star rating implementation and custom text feedback using the BRate component.

```vue
<template>
    <div>
        <!-- Star rating -->
        <b-field label="Rate this product">
            <b-rate
                v-model="rating"
                max="5"
                icon="star"
                type="is-warning"
            />
        </b-field>

        <!-- Custom text feedback -->
        <b-field label="How satisfied are you?">
            <b-rate
                v-model="satisfaction"
                max="5"
                :custom-text="(value) => ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'][value - 1]"
                type="is-success"
            />
        </b-field>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BRate, BField } from '@ntohq/buefy-next'

const rating = ref(0)
const satisfaction = ref(0)
</script>
```

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

### BSelect Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/form-controls.md

Demonstrates basic selection, multiple selection, and data-bound options using the BSelect component.

```vue
<template>
    <div>
        <!-- Simple select -->
        <b-select v-model="selected" placeholder="Choose one">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </b-select>

        <!-- Multiple selection -->
        <b-select 
            v-model="selectedMultiple"
            multiple
            placeholder="Select items..."
        >
            <option value="a">Item A</option>
            <option value="b">Item B</option>
            <option value="c">Item C</option>
        </b-select>

        <!-- With data binding -->
        <b-select
            v-model="selectedUser"
            :options="users"
            option-label="name"
            option-value="id"
            placeholder="Select user..."
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BSelect } from '@ntohq/buefy-next'

const selected = ref('')
const selectedMultiple = ref([])
const selectedUser = ref(null)
const users = ref([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
])
</script>
```

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

### BCheckbox Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/form-controls.md

Demonstrates single checkbox, checkbox group, and indeterminate state implementation.

```vue
<template>
    <div>
        <!-- Single checkbox -->
        <b-checkbox v-model="agreed">
            I agree to terms
        </b-checkbox>

        <!-- Checkbox group -->
        <b-checkbox 
            v-model="selectedItems"
            native-value="item1"
        >
            Item 1
        </b-checkbox>
        <b-checkbox 
            v-model="selectedItems"
            native-value="item2"
        >
            Item 2
        </b-checkbox>

        <!-- Indeterminate state -->
        <b-checkbox
            :model-value="isIndeterminate"
            :indeterminate="true"
            @click="toggleIndeterminate"
        >
            Select all (partial)
        </b-checkbox>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BCheckbox } from '@ntohq/buefy-next'

const agreed = ref(false)
const selectedItems = ref([])
const isIndeterminate = ref(false)

const toggleIndeterminate = () => {
    isIndeterminate.value = !isIndeterminate.value
}
</script>
```

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

### Install Buefy as a Plugin

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/INDEX.md

Registers the entire Buefy library with the Vue application instance using the provided configuration.

```typescript
import Buefy from '@ntohq/buefy-next'
app.use(Buefy, config)
```

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

### BUpload Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates basic file upload with drag-and-drop and multiple file selection using BUpload, BField, and BIcon components.

```vue
<template>
    <div>
        <!-- Basic upload -->
        <b-field label="Profile Picture">
            <b-upload
                v-model="profileImage"
                accept="image/*"
                drag-drop
            >
                <div class="content has-text-centered">
                    <p>
                        <b-icon icon="cloud-upload" />
                    </p>
                    <p>Drop images here or click to upload</p>
                </div>
            </b-upload>
        </b-field>

        <!-- Multiple files -->
        <b-field label="Documents">
            <b-upload
                v-model="documents"
                multiple
                accept=".pdf,.doc,.docx"
            >
                <span class="file-cta">
                    <b-icon icon="upload" />
                    <span>Click to upload files</span>
                </span>
            </b-upload>
        </b-field>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BUpload, BField, BIcon } from '@ntohq/buefy-next'

const profileImage = ref(null)
const documents = ref([])
</script>
```

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

### BTimepicker Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/date-time-color.md

Demonstrates standard timepicker usage with 24-hour and 12-hour formats, as well as an inline configuration.

```vue
<template>
    <div>
        <!-- 24-hour format -->
        <b-field label="Appointment Time">
            <b-timepicker
                v-model="appointmentTime"
                icon="clock"
                placeholder="Select time"
            />
        </b-field>

        <!-- 12-hour format -->
        <b-field label="Meeting Time">
            <b-timepicker
                v-model="meetingTime"
                hour-format="12"
            />
        </b-field>

        <!-- Inline time picker -->
        <b-timepicker
            v-model="inlineTime"
            inline
            hour-format="12"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BTimepicker, BField } from '@ntohq/buefy-next'

const appointmentTime = ref(null)
const meetingTime = ref(null)
const inlineTime = ref(new Date())
</script>
```

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

### Implement BBreadcrumb usage

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

Example showing the structure of a breadcrumb navigation with nested items and active state.

```vue
<template>
    <b-breadcrumb align="is-left" separator="/">
        <b-breadcrumb-item tag="a" href="/">
            <b-icon icon="home" />
        </b-breadcrumb-item>
        <b-breadcrumb-item tag="a" href="/products">
            Products
        </b-breadcrumb-item>
        <b-breadcrumb-item tag="a" href="/products/electronics">
            Electronics
        </b-breadcrumb-item>
        <b-breadcrumb-item active>
            Laptop
        </b-breadcrumb-item>
    </b-breadcrumb>
</template>

<script setup>
import { BBreadcrumb, BBreadcrumbItem, BIcon } from '@ntohq/buefy-next'
</script>
```

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

### Toast Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/modal-dialog-notice.md

Various configurations for toasts, including simple messages, options with callbacks, and infinite duration.

```javascript
// Simple message
this.$buefy.toast.open('Your changes have been saved')

// With options
this.$buefy.toast.open({
    message: 'Operation completed!',
    type: 'is-success',
    duration: 3000,
    position: 'is-bottom-right',
    actionText: 'Undo',
    onAction: () => console.log('Undo clicked'),
    onClose: () => console.log('Toast closed')
})

// Infinite duration (no auto-close)
this.$buefy.toast.open({
    message: 'Important notice - close manually',
    duration: 0,
    type: 'is-warning'
})
```

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

### Implement BRadio Group

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/form-controls.md

Example showing how to group multiple BRadio components using the same v-model and name attribute.

```vue
<template>
    <div>
        <!-- Radio group -->
        <b-radio
            v-model="selected"
            native-value="option1"
            name="myOption"
        >
            Option 1
        </b-radio>

        <b-radio
            v-model="selected"
            native-value="option2"
            name="myOption"
        >
            Option 2
        </b-radio>

        <b-radio
            v-model="selected"
            native-value="option3"
            name="myOption"
        >
            Option 3
        </b-radio>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BRadio } from '@ntohq/buefy-next'

const selected = ref('option1')
</script>
```

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

### BCollapse Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

Demonstrates using BCollapse with a trigger slot and v-model binding.

```vue
<template>
    <b-collapse v-model="isOpen" animation="slide">
        <template #trigger="props">
            <b-button
                :active="props.open"
                type="is-info"
                label="Click to toggle"
                icon-right="chevron-down"
            />
        </template>

        <div class="content">
            This content is hidden by default.
        </div>
    </b-collapse>
</template>

<script setup>
import { ref } from 'vue'
import { BCollapse, BButton } from '@ntohq/buefy-next'

const isOpen = ref(false)
</script>
```

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

### BProgress Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/table-tags-message.md

Demonstrates basic, colored, animated, and stacked progress bars using BProgress and BProgressBar components.

```vue
<template>
    <div>
        <!-- Basic progress bar -->
        <b-progress value="60" />

        <!-- Colored progress bar -->
        <b-progress
            value="45"
            type="is-warning"
            show-value
        />

        <!-- Animated progress -->
        <b-progress
            :value="uploadProgress"
            type="is-info"
            show-value
        />

        <!-- Multiple progress bars (stacked) -->
        <b-progress>
            <b-progress-bar type="is-success" :value="35" />
            <b-progress-bar type="is-warning" :value="25" />
            <b-progress-bar type="is-danger" :value="40" />
        </b-progress>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BProgress, BProgressBar } from '@ntohq/buefy-next'

const uploadProgress = ref(65)
</script>
```

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

### Usage of helper utilities in Vue components

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/helpers.md

Demonstrates usage of data manipulation and environment detection helpers within a script setup block.

```vue
<script setup>
import { 
    getValueByPath, 
    bound, 
    multiColumnSort,
    isMobile
} from '@ntohq/buefy-next'

const data = [/* ... */]
const sortedData = multiColumnSort(data, [
    { field: 'name', order: 'asc' }
])

const width = bound(userInput, 100, 1000)
const nested = getValueByPath(obj, 'deep.nested.property')

if (isMobile.any()) {
    // Mobile-specific logic
}
</script>
```

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

### Install Selective Components

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/INDEX.md

Registers individual components to reduce bundle size by only including necessary parts of the library.

```typescript
import { Button, Input, Select } from '@ntohq/buefy-next'
app.use(Button)
app.use(Input)
app.use(Select)
```

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

### BMessage Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/table-tags-message.md

Demonstrates various message types including success, warning, error, and info with custom icons and event handling.

```vue
<template>
    <div>
        <!-- Success message -->
        <b-message type="is-success" has-icon icon="check">
            <strong>Success!</strong> Your changes have been saved.
        </b-message>

        <!-- Warning message -->
        <b-message
            type="is-warning"
            title="Warning"
            has-icon
            icon="alert"
            closable
            @close="hideWarning"
        >
            This action cannot be undone.
        </b-message>

        <!-- Error message -->
        <b-message
            v-if="error"
            type="is-danger"
            title="Error"
            has-icon
            icon="alert-circle"
        >
            {{ error.message }}
        </b-message>

        <!-- Info message -->
        <b-message type="is-info" title="Information">
            Please review the requirements before proceeding.
        </b-message>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BMessage } from '@ntohq/buefy-next'

const error = ref(null)

const hideWarning = () => {
    // Warning dismissed
}
</script>
```

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

### Update runtime configuration

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/configuration.md

Use setOptions to modify global configuration settings after the library has been installed.

```typescript
import { setOptions } from '@ntohq/buefy-next'

setOptions({
    defaultToastDuration: 5000,
    defaultToastPosition: 'is-bottom'
})
```

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

### Programmatic Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/plugin-and-programmatic-api.md

Demonstrates integrating Buefy into a Vue application, including component usage and runtime configuration updates.

```typescript
import { createApp } from 'vue'
import Buefy from '@ntohq/buefy-next'
import { setOptions } from '@ntohq/buefy-next'
import '@ntohq/buefy-next/dist/buefy.css'

const app = createApp({
    setup() {
        return {
            async deleteItem(id) {
                // Show confirmation dialog
                this.$buefy.dialog.confirm({
                    message: 'Delete this item permanently?',
                    type: 'is-danger',
                    confirmText: 'Delete',
                    onConfirm: async () => {
                        // Show loading
                        const loading = this.$buefy.loading.open({ fullPage: true })
                        
                        try {
                            // Delete API call
                            await fetch(`/api/items/${id}`, { method: 'DELETE' })
                            
                            // Success notification
                            this.$buefy.toast.open({
                                message: 'Item deleted successfully',
                                type: 'is-success'
                            })
                        } catch (error) {
                            // Error notification
                            this.$buefy.notification.open({
                                message: 'Failed to delete item',
                                type: 'is-danger',
                                position: 'is-top'
                            })
                        } finally {
                            loading.close()
                        }
                    }
                })
            }
        }
    }
})

app.use(Buefy, {
    defaultToastPosition: 'is-bottom-right',
    defaultToastDuration: 2000,
    defaultNotificationPosition: 'is-top',
    defaultModalCanCancel: ['escape', 'x']
})

// Update config at runtime if needed
setOptions({
    defaultToastDuration: 3000
})

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

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

### BTag Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/table-tags-message.md

Demonstrates basic usage, closable tags with event handling, size variants, rounded corners, and light styling.

```vue
<template>
    <div>
        <!-- Basic tag -->
        <b-tag type="is-primary">Primary</b-tag>

        <!-- With close button -->
        <b-tag
            v-for="(tag, i) in tags"
            :key="i"
            type="is-info"
            closable
            @close="removeTag(i)"
        >
            {{ tag }}
        </b-tag>

        <!-- Size variants -->
        <b-tag size="is-small">Small</b-tag>
        <b-tag size="is-medium">Medium</b-tag>
        <b-tag size="is-large">Large</b-tag>

        <!-- Rounded tags -->
        <b-tag type="is-success" rounded>Success</b-tag>

        <!-- Light variant -->
        <b-tag type="is-warning" light>Warning</b-tag>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BTag } from '@ntohq/buefy-next'

const tags = ref(['Vue', 'JavaScript', 'TypeScript'])

const removeTag = (index) => {
    tags.value.splice(index, 1)
}
</script>
```

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

### Declarative BLoading Usage

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/modal-dialog-notice.md

Example of using BLoading within a Vue template with v-model binding for state management.

```vue
<template>
    <div>
        <b-loading v-model:active="isLoading" fullPage />
        <b-button @click="loadData" label="Load Data" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BLoading, BButton } from '@ntohq/buefy-next'

const isLoading = ref(false)

const loadData = async () => {
    isLoading.value = true
    try {
        await fetch('/api/data')
    } finally {
        isLoading.value = false
    }
}
</script>
```

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

### BDatetimepicker Usage Example

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/date-time-color.md

Implementation of a datetime picker field using v-model for data binding.

```vue
<template>
    <b-field label="Event Date & Time">
        <b-datetimepicker
            v-model="eventDateTime"
            placeholder="Select date and time"
            icon="calendar-clock"
            hour-format="12"
        />
    </b-field>
</template>

<script setup>
import { ref } from 'vue'
import { BDatetimepicker, BField } from '@ntohq/buefy-next'

const eventDateTime = ref(null)
</script>
```

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

### BSlider Usage Examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/advanced-form-inputs.md

Demonstrates implementation of single sliders, range sliders, and sliders with tick marks using BSlider and BField.

```vue
<template>
    <div>
        <!-- Single slider -->
        <b-field label="Volume">
            <b-slider
                v-model="volume"
                min="0"
                max="100"
                step="1"
                type="is-info"
            />
        </b-field>

        <!-- Range slider -->
        <b-field label="Price Range">
            <b-slider
                v-model="priceRange"
                range
                min="0"
                max="1000"
                step="10"
                tooltip-type="is-warning"
            />
        </b-field>

        <!-- With ticks -->
        <b-field label="Quality">
            <b-slider
                v-model="quality"
                min="0"
                max="10"
                step="1"
                ticks
                type="is-success"
            />
        </b-field>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BSlider, BField } from '@ntohq/buefy-next'

const volume = ref(50)
const priceRange = ref([100, 500])
const quality = ref(5)
</script>
```

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

### BField usage examples

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/form-controls.md

Demonstrates various configurations for BField, including labels, help messages, grouped controls, horizontal layouts, and custom label positioning.

```vue
<template>
    <div>
        <!-- Basic field with label -->
        <b-field label="Username">
            <b-input v-model="username" />
        </b-field>

        <!-- With help message -->
        <b-field 
            label="Email"
            message="Please enter a valid email"
        >
            <b-input v-model="email" type="email" />
        </b-field>

        <!-- Grouped/addons -->
        <b-field grouped>
            <b-control expanded>
                <b-input 
                    v-model="url"
                    type="url"
                    placeholder="Enter URL"
                />
            </b-control>
            <b-control>
                <b-button type="is-info" label="Submit" />
            </b-control>
        </b-field>

        <!-- Horizontal layout -->
        <b-field label="Options" horizontal>
            <b-switch v-model="enabled">
                Enable feature
            </b-switch>
        </b-field>

        <!-- Label position -->
        <b-field 
            label="Name"
            label-position="on-border"
        >
            <b-input v-model="name" />
        </b-field>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { BField, BInput, BButton, BSwitch, BControl } from '@ntohq/buefy-next'

const username = ref('')
const email = ref('')
const url = ref('')
const name = ref('')
const enabled = ref(false)
</script>
```

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

### Implement BPagination with BTable

Source: https://github.com/ntohq/buefy-next/blob/dev/_autodocs/api-reference/layout-components.md

Example demonstrating how to bind BPagination to a BTable component using v-model and computed properties for data slicing.

```vue
<template>
    <div>
        <!-- Items list -->
        <b-table :data="paginatedItems" />

        <!-- Pagination controls -->
        <b-pagination
            v-model="currentPage"
            :total="totalItems"
            per-page="10"
            page-range="3"
            order="is-centered"
            simple
        />
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { BPagination, BTable } from '@ntohq/buefy-next'

const currentPage = ref(1)
const totalItems = ref(150)
const allItems = ref([/* ... */])

const paginatedItems = computed(() => {
    const start = (currentPage.value - 1) * 10
    return allItems.value.slice(start, start + 10)
})
</script>
```