![Nuxt Elements](https://elements.nuxt.space/cover.png)
Nuxt Elements
![Volta](https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg)
A component library to compose websites powered by design tokens and Markdown, editable in Nuxt Studio.
Usage
In your Nuxt project, install the package:
pnpm add -D @nuxt-themes/elements
Then in your nuxt.config.ts
, add it to the extends
array:
export default defineNuxtConfig({
extends: ['@nuxt-themes/elements']
})
Start using the elements to build your website, checkout the list of elements on elements.nuxt.dev.
Elements
An element is a Vue component made to be used inside the content/
directory with the MDC syntax.
The component can have:
- Props to receive data from the editor (generated form)
- Slots using the
<ContentSlot>
component to pass MDC to the component
Example:
<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:
pnpm install
Start the playground:
pnpm dev
Start the documentation:
pnpm generate
Preview the built documentation:
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
:
export default defineNuxtConfig({
extends: '/Users/atinux/Projects/nuxt-themes/elements'
})
License
MIT License