Vue Component Library

Appearance

Altersquare Vue Component Library ​

Welcome to the Altersquare Vue Component Library - a comprehensive collection of copy-paste Vue 3 components designed to accelerate your development workflow.

What is This Library? ​

This is a copy-paste component library for Vue 3, which means:

  • 🎯 No package dependencies - Copy components directly into your project
  • ✏️ Full customization - Modify components to match your design system
  • 🚀 Production-ready - Battle-tested components used in real projects
  • 📦 Vue 3 compatible - Built with Composition API and modern Vue 3 features
  • 🔧 Composable utilities - Includes helpful composables for common patterns

Get Started ​

Ready to start using components in your project? Follow these quick steps:

Quick Start ​

  1. Browse Components - Find the component you need in the Components section
  2. Copy the Code - Copy the component code from the documentation
  3. Paste into Your Project - Add it to your src/components/ folder
  4. Customize - Adjust styles and props to match your design system
  5. Use It - Import and use the component in your Vue files

Prerequisites ​

Before you begin, make sure you have:

  • ✅ Node.js 18.x or higher (22.x recommended)
  • ✅ Vue 3 project set up
  • ✅ Basic Vue 3 knowledge (Composition API, props, events)

Detailed Setup Guide ​

For comprehensive setup instructions, including:

  • Prerequisites installation
  • Project configuration
  • Component integration patterns
  • Best practices

👉 Read the Complete Getting Started Guide →

Where to Find Everything ​

This documentation is organized into four main sections. Here's what you'll find in each:

📦 Components - Component Library ​

What's here: All available Vue 3 components you can copy and use in your project.

What you'll find:

  • Form Components - Input, TextArea, Checkbox, Radio, DatePicker, Dropdown, FileInput, Switch, Slider, Range, Autocomplete, ComboBox
  • UI Components - Accordion, Tabs, BreadCrumb, Snackbar, Pagination, Chip
  • Progress Components - Loader, LinearProgress, CircularProgress
  • Navigation Components - HorizontalAppBar, VerticalAppBar
  • Base Components - Menu, Table, Toast, PopOver, Tooltip, ScrollObserver, ColorPicker

Each component page includes:

  • Overview and description
  • API documentation (props, events, slots)
  • Full source code ready to copy
  • Live demos and examples

When to visit: When you need to find a specific component, see its API, or copy its code.

Go to Components →

📚 Guides - How-to Guides ​

What's here: Step-by-step guides for common tasks and workflows.

What you'll find:

  • Building Forms - Complete guide on creating forms with form components
  • Using Toast and Snackbar - When and how to display notifications
  • Using Popup Composable - Creating modals, confirmations, and custom popups
  • Using Spotlight Overlay - Creating guided tours and feature highlights
  • Using Rem to Pixel - Converting rem values to pixels
  • Uploading Assets to CDN - Deployment and CDN integration workflows

When to visit: When you need help with a specific task or want to learn best practices.

Go to Guides →

⚙️ Setup - Setup and Configuration ​

What's here: Everything you need to get started and configure your development environment.

What you'll find:

  • Getting Started - Complete setup guide with prerequisites, installation, and first steps
  • Project Structure - Understanding the boilerplate architecture and folder organization
  • Using Component Library - How to integrate components into your project, copy-paste workflow, and customization patterns

When to visit:

  • First time setting up your project
  • Need to understand project structure
  • Want to learn how to integrate components

Go to Setup →

🛠️ Tools - Utility Tools ​

What's here: Interactive utility tools and calculators.

What you'll find:

  • Color Name Finder - Find color names from hex codes

When to visit: When you need a quick utility tool for development tasks.

Go to Tools →

Key Features ​

Copy-Paste Approach ​

Unlike traditional npm packages, our components are designed to be copied directly into your project. This gives you:

  • Zero dependencies - No external package version conflicts
  • Full source control - You own and control the code
  • Easy customization - Modify components to fit your exact needs
  • No build complexity - Components work immediately after copying

Vue 3 Modern Stack ​

All components are built with:

  • Composition API - Modern Vue 3 patterns
  • TypeScript-ready - Easy to add types if needed
  • SCSS styling - Flexible and customizable styles
  • Accessibility - ARIA attributes and keyboard navigation where applicable

Production Ready ​

  • Battle-tested - Used in production applications
  • Well-documented - Comprehensive API docs and examples
  • Consistent patterns - Follows Vue 3 best practices
  • Performance optimized - Efficient rendering and updates

How to Navigate This Documentation ​

New to this library? Start here:

  1. Read the Getting Started Guide → to set up your environment
  2. Learn How to Use the Component Library → to understand the copy-paste workflow
  3. Browse Components → to find what you need
  4. Check Guides → when you need help with specific tasks

Looking for something specific?

  • Need a component? → Go to Components
  • Need help with a task? → Go to Guides
  • Setting up your project? → Go to Setup
  • Need a utility tool? → Go to Tools

Ready to get started? Begin with the Getting Started Guide →