Nuxt

Install CLI

Install the Elements CLI to your system. This will add the nve command to your path and provide several helpful commands for working with Elements.

Create a New Project

Use the Elements CLI to quickly bootstrap a new nuxt project with the necessary dependencies:

Setup an Existing Project

Setup an existing project to use Elements you can use the setup command to add the necessary dependencies and configure the MCP server.

If not yet done, install NodeJS. NodeJS is a JavaScript runtime that has a large ecosystem of tooling and packages for Web Development. Once installed the Node Package Manager (NPM) will be available for use.

Manual Integration

If installing to an existing project, install the core dependencies:

Once installed import and use Elements within Nuxt Vue SFC files. Since Nuxt builds on top of Vue, the same Vue template syntax applies.

TypeScript types

To get type checking and autocomplete for Elements in templates (and to have invalid props reported by the IDE and build), add a reference to the custom-elements Vue types.

Create or update env.d.ts in your project root:

Nuxt includes this file when running nuxi typecheck. To fail the build on type errors, run type checking before the build:

Configuration

Configure nuxt.config.ts to recognize Elements as custom elements and set up the global theme attributes.

Styles

Import the Elements theme and utility styles in your app.vue file. This ensures styles are available globally throughout your application.

Usage

Import element definitions in the <script setup> block of your Vue SFC files.

Properties and events then work via the standard Vue template syntax.

Layouts

Use Elements within Nuxt layouts to create consistent page structures.

Routing

Elements work seamlessly with Nuxt's built-in routing. Use NuxtLink within Elements components for client-side navigation.