skills.rest
Dyrean
DyreanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nuxt-ui

Implement Nuxt UI v4 components and theming in Vue 3 and Nuxt 4+ projects.

Updated Jun 22, 2024
Search Tags:#theming#ui#documentation#vue#nuxt#component-library
One-click install
npx skills add https://github.com/Dyrean/dotfiles --skill nuxt-ui-dyrean
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/Dyrean/dotfiles/tree/main/opencode/.config/opencode/skills/nuxt-ui
Command: npx skills add https://github.com/Dyrean/dotfiles --skill nuxt-ui-dyrean

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Provides a ready-made UI component library and theming workflow for Vue 3/Nuxt 4+ apps to accelerate UI development.

Core Features & Use Cases

  • Ready-to-use components and theming built on Reka UI with Tailwind Variants for rapid UI construction.
  • Guidance for installing, using, and theming Nuxt UI in Nuxt 4+ projects, including examples for common UI patterns.
  • Use case: scaffold dashboards, forms, modals, and navigation with a consistent look across a Nuxt app.

Quick Start

Install Nuxt UI v4 in your Nuxt project, enable the UApp wrapper, and start using components and theming immediately.

Frequently Asked Questions about nuxt-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to add a consistent UI component library to a Vue 3 or Nuxt 4 project?▼

The best way to build a consistent UI in Vue 3 or Nuxt 4 is using Nuxt UI v4, which provides ready-to-use components built on Reka UI with Tailwind Variants for rapid construction and reliable theming.

How do I theme Nuxt UI components using Tailwind Variants and app config?▼

To theme Nuxt UI components, configure theming through the Nuxt app config and apply Tailwind Variants. This workflow enforces a clean integration, allowing you to modify headless primitives and ensure visual consistency across your application.

Can I use Nuxt UI v4 to scaffold forms and dashboards in Nuxt 4?▼

Yes, you can use Nuxt UI v4 in Nuxt 4 to scaffold dashboards, forms, modals, and navigation. By enabling the UApp wrapper, you integrate components immediately to ensure a consistent look across your app.

Does Nuxt UI v4 work with headless primitives and Tailwind Variants?▼

Yes, Nuxt UI v4 works with headless primitives and Tailwind Variants. It is built on Reka UI to provide a ready-made component library and theming workflow that accelerates UI development without locking you into rigid styles.

Why do I need a UApp wrapper when installing Nuxt UI v4?▼

You need the UApp wrapper during installation to provide the necessary application context for overlays and headless primitives. Enabling it ensures that components like modals and forms function correctly within your Vue 3 application.

Related Skills

Explore More Software Engineering Skills→
jd-solankijd-solanki

nuxt-ui

Guide Nuxt UI component usage and theming for Vue 3 and Nuxt 4 projects.

Community
Advanced
ChenyCHENYUChenyCHENYU
1.0k

page-codegen

Generate Vue 3 page components from JSON or natural language descriptions.

Community
Advanced
onmaxonmax
697

reka-ui

Build Vue 3 components with Reka UI headless primitives and WAI-ARIA compliance.

Community
Intermediate
a35506322a35506322

primevue

Standardize PrimeVue component implementation and form validation for Vue 3 projects.

Community
Basic