ContentSearchButtonPRO

ButtonGitHub
A pre-styled Button to open the ContentSearch modal.
This component is only available when the @nuxt/content module is installed.

Usage

The ContentSearchButton component is used to open the ContentSearch modal.

<template>
  <UContentSearchButton />
</template>

It extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <UContentSearchButton variant="subtle" />
</template>
The button defaults to color="neutral" and variant="outline" when not collapsed, variant="ghost" when collapsed.

Collapsed

Use the collapsed prop to show the button's label and kbds. Defaults to true.

<template>
  <UContentSearchButton />
</template>

Kbds

Use the kbds prop to display keyboard keys in the button. Defaults to ['meta', 'K'] to match the default shortcut of the ContentSearch component.

<template>
  <UContentSearchButton :kbds="['alt', 'O']" />
</template>

API

Props

Prop Default Type
as

'button'

any

The element or component this component should render as when not a link.

icon

appConfig.ui.icons.search

string

The icon displayed in the button.

label

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'ghost'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

size

'md'

"md" | "xs" | "sm" | "lg" | "xl"

disabled

boolean

ui

PartialString<{ base: string[]; label: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailingIcon: string; }>

Slots

Slot Type
leading

{}

default

{}

trailing

{}

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    contentSearchButton: {
      base: ''
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        contentSearchButton: {
          base: ''
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        contentSearchButton: {
          base: ''
        }
      }
    })
  ]
})

ContentSearch

A ready to use CommandPalette to add to your documentation.

ContentSurround

A pair of prev and next links to navigate between pages.