Component Playground

This project is a Vue 3 component playground that dynamically pulls in Vue components from the /components directory and displays them in a playground environment.

Features

• Dynamically loads Vue components from the /components directory.
• Displays components in a grid layout for easy selection.
• Allows live editing of component props.
• Displays component documentation extracted from docblocks.
• Toggle between overflow-auto and text-wrap for the documentation area.
• Smooth scroll to the selected component.

Project Setup

Install Dependencies npm install

Compile and Hot-Reload for Development npm run dev

Compile and Minify for Production npm run build

Usage

• Place your Vue components in the /components directory.
• Run the development server using npm run dev.
• Open the application in your browser.
• Select a component from the grid to view and interact with it.
• Edit the component props live and see the changes in real-time.

Component Structure

Each component should be a well-structured Vue 3 component with the following structure:

• A docblock at the top of the component file with information about the component.
• defineProps() for defining the component props with default values.