Create a component library, but TooltipProvider not found

[severe wedge]

Hi @earnest iron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error "Component must be used within TooltipProvider" occurs when a Nuxt UI component that relies on tooltips (like UTooltip) is rendered outside the context of the TooltipProvider. In Nuxt UI, the TooltipProvider is automatically included when you wrap your app with the <UApp> component, which is required for tooltips, toasts, and overlays to work properly.

Key points to check:

1. Wrap the consuming app with <UApp>
   In your second project (the consumer), ensure your root component is wrapped with <UApp>. For Vue Router, this typically looks like:

   <template>
     <UApp>
       <RouterView />
     </UApp>
   </template>
   

   This setup is required for tooltips and overlays to function, as <UApp> provides the necessary context via providers like TooltipProvider and ToastProvider Nuxt UI App Component Wrap your app with App component.

2. Component Library Usage
   If you are building a component library (first project) and then consuming those components in another app (second project), do not wrap your library components with <UApp>. The provider context must be established in the consuming app, not in the library. Your library components should assume the provider is present in the parent app.

3. Check for Multiple Vue Roots
   If your consuming app or library creates multiple Vue app roots (e.g., via multiple createApp() calls), only the subtree under <UApp> will have the provider context. All Nuxt UI components that use tooltips must be rendered within this subtree.

4. No Direct Use of TooltipProvider
   You do not need to manually use TooltipProvider—it is handled internally by <UApp>. If you see this error, it usually means the component is rendered outside <UApp>.

Summary of what to do:

• In your consuming app, ensure <UApp> is at the root.
• Do not wrap components in your library with <UApp>.
• All usage of Nuxt UI components that require tooltips must be within the <UApp> context.

If you follow these steps and still see the error, double-check that your component library does not instantiate its own Vue app or render outside the main app's <UApp> context.

For more details, see the official documentation:
Nuxt UI App Component
Wrap your app with App component

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@earnest iron Kapa.ai is still learning and improving, please let me know how I did by reacting below.