nuxt-component-meta

Nuxt components metadata

Usage no npm install needed!

<script type="module">
  import nuxtComponentMeta from 'https://cdn.skypack.dev/nuxt-component-meta';
</script>

README

Nuxt Component Meta

Gather components metadata on build time and make them available on production

💡 This module depends on @nuxt/bridge

Quick Setup

  1. Add nuxt-component-meta dependency to your project:
# Using Yarn
yarn add --dev nuxt-component-meta
# Using NPM
npm install --save-dev nuxt-component-meta
  1. Add nuxt-component-meta/module to the buildModules section of your nuxt.config.js
{
  buildModules: ['nuxt-component-meta/module']
}

Usage

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

<script>
import { getComponent } from 'nuxt-component-meta'

export default {
  data() {
    return {
      meta: getComponent('my-component')
    }
  }
}
</script>

Options

You can configure how component's meta is parsed by giving custom parser options:

{
  buildModules: ['nuxt-component-meta/module'],
  componentMeta: {
    parserOptions: {
      // See https://vue-styleguidist.github.io/docs/Docgen.html#options-docgenoptions
    }
  }
}

Development

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