Vue Design System

What Vue Design System is

Vue Design System is a free, open-source tool for building UI design systems with Vue.js. It brings together tools and practices for application development and is intended for designers and front-end developers familiar with component-based workflows, HTML, SCSS, and JavaScript. Global design tokens are stored in YAML for use in CSS and JavaScript. The tool generates editable living documentation with a customized version of Vue Styleguidist, plus an overview of design system progress and remaining work. A design system can be exported as an NPM dependency for Vue.js projects or elsewhere. Development features include live reloading, Autoprefixer, SCSS, helper functions, and defaults for SVG and webfont use. Documentation and app logic can be separated, so public documentation can coexist with a private app. Code formatting is configured to run on save and before Git commits. The project uses Vue.js, Vue Styleguidist, Webpack, and Theo, and is licensed under MIT. Its getting-started guide requires Node.js version 8.2.1 or later and describes setup steps for macOS and Windows. Documentation, an FAQ, and a GitHub issue link are listed for support.