nuxt-x-app

Settings

Reusable building blocks for settings pages — toggle preference rows and security feature items.

Settings

The Settings category provides two layout-aware row components designed for settings and account pages. They follow a consistent two-column layout (text on the left, control on the right) and are intended to be composed inside UCard containers or plain div wrappers.

Components

`<XASettingsPreference />`

A horizontal row that pairs a label and optional description on the left with a USwitch toggle on the right. Supports v-model for the boolean value, disabled, and loading states. Extra classes can be injected via containerClass, labelClass, and descriptionClass.

<UCard>
  <template #header>Notification Preferences</template>
  <div class="divide-y divide-neutral-200 dark:divide-neutral-800">
    <XASettingsPreference
      v-model="prefs.emailNotifications"
      label="Email Notifications"
      description="Receive email updates about your account activity."
      class="py-4"
    />
    <XASettingsPreference
      v-model="prefs.marketingEmails"
      label="Marketing Emails"
      description="Tips, product updates, and offers."
      class="py-4"
      :loading="saving"
    />
    <XASettingsPreference
      v-model="prefs.smsAlerts"
      label="SMS Alerts"
      description="Critical alerts sent via text message."
      class="py-4"
      :disabled="!prefs.phoneVerified"
    />
  </div>
</UCard>

Props

Prop	Type	Default	Description
`modelValue`	`Boolean`	`false`	`v-model` for the toggle state
`label`	`String`	required	Preference label text
`description`	`String`	`''`	Description text shown below the label
`disabled`	`Boolean`	`false`	Disable the toggle
`loading`	`Boolean`	`false`	Show loading state on the toggle
`containerClass`	`String`	`''`	Additional classes for the root element
`labelClass`	`String`	`''`	Additional classes for the label
`descriptionClass`	`String`	`''`	Additional classes for the description

Events

Event	Payload	Description
`update:modelValue`	`boolean`	Toggle state changed

`<XASettingsSecurityItem />`

A security feature row with an icon badge on the left, a title and description in the center, and an action button on the right. When active is true, the icon changes to a checkmark, the background highlights in primary color, and the icon container turns green — providing clear visual confirmation that the feature is enabled. A badge prop (e.g., "Enabled", "Recommended") can be displayed inline with the title.

<UCard>
  <template #header>Security</template>
  <div class="space-y-3 p-4">
    <!-- Feature enabled -->
    <XASettingsSecurityItem
      icon="i-lucide-shield-check"
      label="Two-Factor Authentication"
      description="Enabled via authenticator app"
      badge="Enabled"
      badge-color="success"
      action-label="Manage"
      active
      @click="manage2FA"
    />

    <!-- Feature not yet configured -->
    <XASettingsSecurityItem
      icon="i-lucide-key"
      label="Passkey"
      description="Sign in without a password using biometrics."
      action-label="Set up"
      :loading="settingUpPasskey"
      @click="setupPasskey"
    />

    <!-- Custom action slot -->
    <XASettingsSecurityItem
      label="Active Sessions"
      description="You have 3 active sessions across 2 devices."
    >
      <template #action>
        <UButton size="sm" variant="ghost" @click="viewSessions">View</UButton>
        <UButton size="sm" color="error" variant="ghost" @click="revokeAll">Revoke All</UButton>
      </template>
    </XASettingsSecurityItem>
  </div>
</UCard>

Props

Prop	Type	Default	Description
`label`	`String`	required	Security feature label
`description`	`String`	`''`	Description text
`icon`	`String`	`''`	Lucide icon name for the left icon badge
`badge`	`String`	`''`	Badge text (e.g., `'Enabled'`, `'Recommended'`)
`badgeColor`	`String`	`'neutral'`	Badge color
`actionLabel`	`String`	`'Configure'`	Action button label
`buttonVariant`	`String`	`'outline'`	Action button variant
`buttonColor`	`String`	`'neutral'`	Action button color
`active`	`Boolean`	`false`	Whether this security feature is currently active
`loading`	`Boolean`	`false`	Loading state on the action button
`disabled`	`Boolean`	`false`	Disable the action button
`containerClass`	`String`	`''`	Additional classes for the root element
`iconContainerClass`	`String`	`'bg-neutral-200 dark:bg-neutral-700'`	Icon container background when not active
`iconClass`	`String`	—	Additional classes for the icon

Slots

Slot	Description
`action`	Replace the default action button with custom controls

Events

Event	Payload	Description
`click`	—	Emitted when the action button is clicked

AI Context

category: Settings
package: "@xenterprises/nuxt-x-app"
use-when: >
  Use XASettingsPreference for any boolean toggle on settings pages —
  notifications, feature flags, privacy options, or app preferences.
  Use XASettingsSecurityItem for security-related features that require
  a setup or management action, such as 2FA, passkeys, connected apps,
  or session management. Both components are designed to be stacked inside
  a UCard with a divide-y or space-y layout.

Edit this pageorReport an issue

Permission

Renderless gate component for role-based conditional rendering.

Slide

Slideover panel components for off-canvas drawers and overlay panels from any side of the screen.