# @nuxt-themes/elements

> [![Nuxt Elements](https://elements.nuxt.space/cover.png)](https://elements.nuxt.space)

Latest version **0.9.5** (published 2023-09-26) · 0 weekly downloads

## Install

```sh
npm install @nuxt-themes/elements
pnpm add @nuxt-themes/elements
yarn add @nuxt-themes/elements
bun add @nuxt-themes/elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.5 |
| Published | 2023-09-26 |
| First published | 2022-11-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 68.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | farnabaz, atinux, benjamincanac |

## Links

- npm: https://www.npmjs.com/package/@nuxt-themes/elements
- npm.io page: https://npm.io/package/@nuxt-themes/elements

## Dependencies (2)

- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.13.0
- [@nuxt-themes/tokens](https://npm.io/package/@nuxt-themes/tokens.md) ^1.9.1

## Recent versions

- 0.9.5 (latest) — 2023-09-26
- 1.0.0-beta.1 (beta) — 2023-05-25
- 1.0.6 — 2023-08-29
- 1.0.5 — 2023-08-08
- 1.0.4 — 2023-06-28
- 1.0.3 — 2023-06-27
- 1.0.2 — 2023-06-21
- 1.0.1 — 2023-06-21
- 1.0.0 — 2023-06-19
- 0.9.4 — 2023-04-07
- 0.8.2 — 2023-04-07
- 0.9.3 — 2023-03-13
- 0.9.2 — 2023-03-13
- 0.9.1 — 2023-03-13
- 0.9.0 — 2023-02-27
- … 27 more at https://npm.io/package/@nuxt-themes/elements/versions

## README

[![Nuxt Elements](https://elements.nuxt.space/cover.png)](https://elements.nuxt.space)

# Nuxt Elements

[![npm version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Nuxt][nuxt-src]][nuxt-href]
[![Nuxt Studio][nuxt-studio-src]][nuxt-studio-href]
[![Volta][volta-src]][volta-href]

A component library to compose websites powered by [design tokens](https://design-tokens.nuxtjs.org) and Markdown, editable in [Nuxt Studio](https://nuxt.studio).

- **Documentation:** [elements.nuxt.space](https://elements.nuxt.space)
- **Online playground:** [stackblitz.com/edit/nuxt-elements-play](https://stackblitz.com/edit/nuxt-elements-play?file=content%2Findex.md)

## Usage

In your Nuxt project, install the package:

```bash
pnpm add -D @nuxt-themes/elements
```

Then in your `nuxt.config.ts`, add it to the `extends` array:

```ts
export default defineNuxtConfig({
  extends: ['@nuxt-themes/elements']
})
```

Start using the elements to build your website, checkout the list of elements on [elements.nuxt.dev](https://elements.nuxt.dev).

# Elements

An element is **a Vue component** made to be used inside the `content/` directory with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).

The component can have:
- Props to receive data from the editor (generated form)
- Slots using the [`<ContentSlot>`](https://content.nuxtjs.org/api/components/content-slot) component to pass MDC to the component

**Example:**

```vue
<script setup lang="ts">
defineProps({
  image: {
    type: String,
    default: null
  }
})
</script>

<template>
  <section>
      <h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
        <ContentSlot :use="$slots.title" unwrap="p">Default title</ContentSlot>
      </h1>
      <!-- description slot is optional -->
      <p class="mt-3" v-if="$slots.description">
        <ContentSlot :use="$slots.description" unwrap="p" />
      </p>
      </div>
      <img v-if="image" :src="image" />
    </div>
  </section>
</template>
```

Note that the `<ContentSlot>` component cannot have `class` attribute because they are headless components.

## Development

Make sure to install the dependencies:

```bash
pnpm install
```

Start the playground:

```bash
pnpm dev
```

Start the documentation:

```bash
pnpm generate
```

Preview the built documentation:
```bash
pnpm preview
```

To use the elements in development in your project:

- Run the `pwd` command in the elements project and copy it, example: `/Users/atinux/Projects/nuxt-themes/elements`
- Add it to the `extends` of your `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  extends: '/Users/atinux/Projects/nuxt-themes/elements'
})
```

## License

[MIT License](./LICENSE)

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@nuxt-themes/elements/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxt-themes/elements

[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxt-themes/elements.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@nuxt-themes/elements

[license-src]: https://img.shields.io/github/license/nuxt-themes/elements.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt-themes/elements/blob/main/LICENSE

[nuxt-studio-src]: https://img.shields.io/badge/Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC
[nuxt-studio-href]: https://nuxt.studio/themes/elements

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?&logo=nuxt.js
[nuxt-href]: https://nuxt.com

[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
[volta-href]: https://volta.net/nuxt-themes/elements?utm_source=readme_elements

---
_Source: https://npm.io/package/@nuxt-themes/elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._