Setup

Installing ElevenLabs UI Vue components is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn-vue CLI if you've already adopted shadcn-vue's workflow.

Prerequisites

Before installing ElevenLabs UI Vue, make sure your environment meets the following requirements:

• Node.js version 18 or later
• A Vue.js or Nuxt.js project
• shadcn-vue setup in your project. If you don't have it setup, running any install command will set it up for you.

Installing components

You can install ElevenLabs UI Vue components using either the elevenlabs-ui-vue CLI or the shadcn-vue CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.

pnpmnpmyarnbun
pnpm dlx elevenlabs-ui-vue@latest add orb
Copy

The CLI will download the component's code and integrate it into your project's directory (usually under your components folder).

After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.

Configure Nuxt Shadcn Module

To ensure that ElevenLabs UI Vue components are properly registered and avoid console warnings from Nuxt's auto-import feature, you need to modify your nuxt.config.ts to add the ElevenLabs UI components directory to the shadcn module configuration.

Copyexport default defineNuxtConfig({
  // ...
  modules: ['shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component.
     * @default "Ui"
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * Will respect the Nuxt aliases.
     * @link https://nuxt.com/docs/api/nuxt-config#alias
     * @default "@/components/ui"
     */
    componentDir: [
      '@/components/ui',
      // Elevenlabs UI
      {
        path: '@/components/elevenlabs-ui',
        prefix: '',
      },
    ],
  }
})