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.

Features

• A set of interconnected patterns & practices for you and your team.
• A well thought-out terminology, naming conventions, and hierarchy.
• Get an automated overview of how your design system progresses over time.
• Global design tokens in YAML format that you can use inside any component.
• Automatic generation of living, user editable documentation.
• Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.
• Create a token, an element, or a pattern, and it’s immediately available across all components.
• Pre-configured Prettier setup for auto-formatting code on both save and before commit.
• Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
• Documentation and the app logic are separated, so you can have public docs while the app itself stays private.

Getting Started

Get started by cloning the repo and installing dependencies:

git clone https://github.com/viljamis/vue-design-system.git
cd vue-design-system
npm install