Vue Design System gives us organized tools, and patterns for building UI Design Systems with Vue.js.

The tool is built on top of Vue.js, Vue Styleguidist, Vue Webpack Template & Theo.

vueds

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 project.

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.

Demo

vue dds

Documentation

https://github.com/viljamis/vue-design-system/wiki

Intro page

https://vueds.com/