DOCSEARCHbyAlgolia
Submit Docs

Vuestic UI Documentation

repository·develop·Indexed 26 days ago

https://github.com/epicmaxco/vuestic-ui

A Vue.js 3.0 UI library for building modern web applications and the foundation for Vuestic Admin. The ecosystem includes a core UI component library, a Nuxt 3 integration module (@vuestic/nuxt), a Vite compiler plugin (@vuestic/compiler) with built-in Devtools, a project scaffolding CLI (create-vuestic), and specialized themes such as @vuestic/ag-grid-theme. It also provides an official integration with FormKit via @vuestic/formkit.

Tokens
69.8K
Snippets
99
Records
603
Agent score
84%

What's inside Vuestic UI

  1. Overview of Vuestic-UI monorepo packages

    develop

    The Vuestic-UI repository is organized into several packages that provide different ways to use, extend, and deploy the UI library:

    • ui: The core source code for Vuestic-UI components.
    • create-vuestic: A CLI tool used for scaffolding new projects.
    • vue-cli-plugin: A plugin for Vue CLI designed to simplify the installation of Vuestic-UI.
    • tailwind: Integration for using Vuestic-UI with Tailwind CSS.
    • sandbox: A package used for testing Vuestic-UI across different environments including Vite (Rollup), Vue CLI (Webpack), and Nuxt.
    • docs: The official documentation for Vuestic-UI.
    • extensions: A collection of extras to expand the main capabilities of Vuestic-UI.
    • deploy: Contains build scripts for deployment.

  2. Overview of Vuestic UI

    develop
    Vuestic UI is a feature-rich UI library for Vue.js 3.0. It provides over 52 customizable components, cross-browser responsiveness, and is i18n-ready. The library supports both local component-level configuration and global framework-level configuration, and includes two built-in color scheme presets.

  3. Overview of Vuestic Devtools

    develop

    Vuestic Devtools is a development utility suite consisting of three main parts:

    • Client: A UI injected into your application during DEV mode only. It provides utilities to visually interact with and work with Vuestic components.
    • Server: A utility used to update user files via the client.
    • Plugin: The mechanism that adds the Vuestic Devtools Vue plugin to your development bundle and starts the server.

  8. Understand Dropdown Positioning Blocks

    develop

    The Dropdown component uses several conceptual blocks to calculate positioning:

    • browser window: The edge from which getBoundingClientRect returns .left.
    • viewport: The container with overflow: hidden. Content should not be visible outside this area. Used in auto-placement to trigger flipping if content overflows.
    • root: The container relative to which content is positioned. The content's position is calculated relative to root.left.
    • anchor: The element the content must be placed near. Offsets can be applied relative to this anchor.
    • content: The actual block being positioned.

  9. Choose a project template with create-vuestic

    develop

    When running the create-vuestic CLI, you can select from three primary templates:

    • create-vue: Scaffolds a standard Single Page Application (SPA) using the recommended Vite-powered Vue project structure.
    • nuxt: Scaffolds a Nuxt.js project.
    • Vuestic Admin: Scaffolds a Vue/Vite application pre-loaded with the Vuestic Admin template, which includes over 44 custom UI components.

  10. Run Sandbox development and build commands

    develop

    The Sandbox package allows you to test vuestic-ui across different bundlers and frameworks (Vite/Rollup, Vue-CLI/Webpack, and Nuxt). Use the following commands to manage the environment:

    Installation

    • yarn: Install dependencies. vuestic-ui should be installed from the packages/vuestic-ui folder.

    Building

    • yarn build: Create bundles using vue-cli, vite, and nuxt.
    • yarn build:vite: Build using Vite.
    • yarn build:vue-cli: Build using Vue-CLI (Webpack).
    • yarn build:nuxt: Build using Nuxt.
    • yarn build:vuestic: Builds the vuestic dist used by the other bundlers.
    • yarn build:vuestic-nuxt: Builds the @vuestic/nuxt package.

    Development Mode

    • yarn dev:vite: Run the ./src project in dev mode using Vite.
    • yarn dev:vue-cli: Run the ./src project in dev mode using Vue-CLI (Webpack).
    • yarn dev:nuxt: Run the ./src project in dev mode using Nuxt.

    Production Serving

    • yarn serve:vite: Serve the built ./dist/vite project in production mode using Vite.
    • yarn serve:vue-cli: Serve the built ./dist/vue-cli project in production mode using Vue-CLI (Webpack).
    • yarn serve:nuxt: Serve the built ./dist/nuxt project in production mode using Nuxt.
    yarn build

  11. Use @vuestic/nuxt for Nuxt 3 integration

    develop
    The @vuestic/nuxt package provides integration for Nuxt 3 projects. In the Vuestic UI documentation implementation, paths are resolved to the packages/ui directory within the monorepo. For specific alias configurations used in the documentation project, refer to ~/modules/vuestic.ts.

  12. Check accessibility with Lighthouse and manual testing

    develop

    Use the following methods to verify the accessibility of your implementation:

    1. Lighthouse (Automated)

    Use the Lighthouse tab in Chrome DevTools to generate an accessibility report. Review the report to identify and fix listed issues. You can also use the Accessibility tab in DevTools to investigate how a screen reader will parse specific elements.

    2. Manual Testing

    Perform manual checks to ensure:

    • All interactive elements are accessible via the Tab key.
    • Every focused element has a visible focus style.
    • Elements respond correctly to the keyboard keys required by their specific ARIA role.