Vue Design System

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Made by @viljamis and other contributors. See also the official website of Vue Design System and read my article on the processes and workflow I use to get started with a new design system project.

Documentation

• Getting Started: How to install and run Vue Design System.
• Terminology: Introduction to the system concepts and its hierarchy.
• Naming of Things: Naming is hard, so it’s good to have clear guidelines.
• Directory Structure: What goes where and why.
• Working with the System: Concrete examples on how to work with Tokens, Elements , Patterns and Templates.
• Editing Living Documentation: How to customize the living system documentation.
• Spacing: A framework for creating a predictable and harmonious spacing.
• Component Status: Clear labels that reflect the state of completion.
• Component QA: How to review new components and keep the quality high.
• Contributing: A set of guidelines for contributing to the system.
• Code of Conduct: By participating you agree to abide by its terms.
• Frequently Asked Questions: How to use icons, how to use font-face, etc.

Examples

• Official example
• Using Vue Design System as NPM dependency on Vue.js project
• Using Vue Design System as NPM Dependency on Nuxt.js project
• Using Vue Design System as NPM Dependency on a static website