Vue Atomic Docs

Vue Atomic Docs transforms your Vue components into a living, interactive documentation library that runs alongside your application without bloating your production bundle. It automatically extracts component props and provides an intuitive interface for showcasing real-world usage examples—keeping your component documentation always in sync with your actual code while events and slots can be easily defined through a simple API.

• ⚡ Automatic Prop & Type Tables - Extracts and displays component props with types
• 🛠️ Interactive Component Playground - Test components with different prop values
• 🗂️ Source Code Viewer (<template>, <script>, <style>) - View component source code
• 🎨 Design System Color Palette - Display and document your brand colors
• 🔍 Component Search - Quickly find components in your documentation
• 🌙 Light/Dark Mode - Toggle between light and dark themes
• 📝 Typography Documentation - Document and display your typography styles
• 🔌 Custom Documentation Pages - Add custom routes and pages to your docs
• 📄 Markdown Support - Write documentation using Markdown

Documentation and demo site Vue Atomic Docs.

Check out the source code on GitHub.