Nuxt Component Exporter

npm version npm downloads License Nuxt

A simple Nuxt module to export components as images.

⚠️ This is an experimental module.

• ✨  Release Notes

Features

• 🌇 Export any Vue component as PNG, JPEG, Webp or PDF
• 🌎 Works in serverless functions
• ⚙️ useComponentExporter composable
• 🚀 No configuration needed

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @yassidev/nuxt-component-exporter

That's it! You can now use Nuxt Component Exporter in your Nuxt app ✨

Example

You first need to make sure that your component is globally registered.

// @/components/foo.global.vue
<script setup lang="ts">
defineProps<{
  message: string
}>()
</script>

<template>
  <div class="text-3xl">{{ message }}</div>
</template>

And that's it, you should be able to export your component as desiered (with auto-completion!)

<script setup lang="ts">
const { download, loading } = useComponentExporter()
</script>

<template>
  <button
    :disabled="loading"
    @click="download('Foo', { message: 'bar' })"
  >
    Download PNG
  </button>
</template>

Contribution

  # Install dependencies
  npm install
  
  # Generate type stubs
  npm run dev:prepare
  
  # Develop with the playground
  npm run dev
  
  # Build the playground
  npm run dev:build
  
  # Run ESLint
  npm run lint
  
  # Run Vitest
  npm run test
  npm run test:watch
  
  # Release new version
  npm run release