Nuxt Elements

A component library to compose websites powered by design tokens and Markdown, editable in Nuxt Studio.

• Documentation: elements.nuxt.space
• Online playground: stackblitz.com/edit/nuxt-elements-play

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