nuxtlabs / nuxt-component-meta

Gather Nuxt components metadata on build time and make them available on production.
72 stars 8 forks source link

Nuxt Component Meta

npm version npm downloads

Gather components metadata on build time and make them available on production. This module is developed to give a visual Markdown Editor with Vue Components in it for Nuxt Studio.

Quick Setup

  1. Add nuxt-component-meta dependency to your project:
# Using PNPM
pnpm add nuxt-component-meta

# Using NPM
npm install nuxt-component-meta
  1. Add nuxt-component-meta to the modules section of your nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-component-meta']
})

Usage

<template>
  <div>
    <h2>`MyComponent` metadata</h2>
    <pre>
      {{ meta }}
    </pre>
  </div>
</template>

<script script>
const { data: meta } = await useAsyncData('my-component', () => $fetch('/api/component-meta/my-component'))
</script>

Nightly Builds

You can install the latest nightly build of the Studio module by running:

npm i nuxt-component-meta@nightly

Development

  1. Clone this repository
  2. Install dependencies using pnpm install
  3. Start dev server using pnpm dev