An open source tool for building UI Design Systems with Vue.js

Last update: Aug 3, 2022

Build status Dependencies status MIT License Gitter

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.

Screenshot

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.
  • And more…

Documentation

Examples

Roadmap

Changelog

  • 3.5.7 is the latest release.
  • See Releases page for the full changelog.

Need more help?

About to get started with a new design system? I’m an independent designer and developer, specialized in helping companies to build design systems. I also conduct design system workshops and do consulting. Let’s talk!

Authors and License

Viljami Salminen, Artem Sapegin, Rafael Escala, react-styleguidist contributors, vue-styleguidist contributors, Vue.js contributors, vue-webpack-boilerplate contributors, Theo contributors, and Polaris contributors.

Licensed under the MIT license.

GitHub

https://github.com/viljamis/vue-design-system
Comments
  • 1. Is Vue Design System Nuxt.js compatible?

    Hello.

    I'd like to use VDS with a Nuxt.js SSR build, but I can't get it to work. Is this package able work in SSR as there's no documentation regarding it. I'd prefer not spend more time trying to figure it out if it's not compatible in the first place.

    Thanks.

    Reviewed by jackbarham at 2018-07-02 15:11
  • 2. ERROR in system/system.js from UglifyJs Unexpected token: punc (() [system/system.js:50506,9]

    Hi

    I upgraded to and am running latest VDS 3.5.2 and when I run npm run build:system I get the stated error.

    ERROR in system/system.js from UglifyJs Unexpected token: punc (() [system/system.js:50506,9]

    Stopping me dead in my tracks.

    Thanks.

    Reviewed by michaelpumo at 2018-10-05 09:48
  • 3. Help in the Getting Started

    Hey @viljamis Really great job. The vue-design-system is amazing! I would like some help in the getting started... I have in my stack a project who have my components (e.g: erp-components) and I would like to create the design system using that lib.

    How I can do that?

    I need put my project erp-components inside the vue-design-system (I would like to avoid that) or I can create a new project using the vue-design-system and import the components... I Read the Getting Started but not is clearly to me. You can provide some example external the vue-design-system

    Anyway, thanks for share the project.

    Reviewed by angeliski at 2018-07-11 16:05
  • 4. Import system not working

    Thanks for vue-design-system. It's amazing.

    I tried to import system in a existing Vue-project as mentioned on "getting startet" as local npm package But I get this error: 13:8-14 "export 'default' (imported as 'system') was not found in 'wb-design-system'

    I'm using @vue/cli 3.* and if I take a look inside system.js I can see there are exports,system ...

    I'm really confused.

    I hope to get help here because I didn't find help anywhere else.

    Reviewed by dracon at 2018-06-21 14:33
  • 5. Show both VUE and HTML markup

    I love your tool a lot to create a solid design system. I like the concept, but I have a huge problem. So I would use your tool to create a design system for a leading news platform in germany. Finally my team will use for the website something more static instead of vue. So I need a static documentation in your tool - the compiled html like in Pattern Lab.

    In Pattern Lab I write my component in mustache, but I can take a look at the compiled html in the frontend too. This is a must have for my team. Does it possible to get the compiled html in the frontend?

    I do not want to do it like this example here: bildschirmfoto 2018-05-04 um 17 45 31

    I would like it more like this here: bildschirmfoto 2018-05-04 um 17 50 47

    bildschirmfoto 2018-05-04 um 17 50 17

    It is so important. Without this feature I can not use it for my team and the design system.

    Reviewed by timhartmann at 2018-05-04 15:54
  • 6. Separate pages & URLs for all nav items to allow richer documentation of components

    “One component per page” functionality is now supported in Vue Styleguidist and I want to bring it into Vue Design System rather soon as well. It does require a couple of things:

    • Updating Vue Styleguidist NPM dependency
    • Changing the formatting of the Vue Styleguidist config (mostly template option)
    • Edits to the way sidenav highlights items (has to support highlighting of sub items as well)
    • Edits to the overall styles of docs (they need to better support separate pages)
    • Reordering sections/components.
    • Richer example content that better supports separate pages and one component per page. Could include things like:
      • Best practices
      • Content guidelines
      • Usage do’s & don’ts

    Looking for input from the community at the moment. Seem my second comment below.

    Reviewed by viljamis at 2018-04-02 17:21
  • 7. Code blocks in Markdown get actually rendered when wrapping them using ```html ... ```

    In the /config/docs.config.js file, when exampleMode and usageMode are set to "collapse" the "Vue|HTML" toggle should not display. Here is an example of a custom .md file that I've added.

    ...
        {
          name: "How to Install",
          content: "../docs/how-to-install.md",
          exampleMode: "collapse",
          usageMode: "collapse",
          sectionDepth: 1,
        },
    ...
    
    screen shot 2018-10-31 at 2 22 59 pm
    Reviewed by sdellis at 2018-10-31 18:27
  • 8. Autoprefixer does not seem to work

    Environment

    vue-design-system v3.5.5

    How to reproduce

    In a style block of a vue file add the following CSS rule:

    .autoprefixertest {
      user-select: none;
    }
    

    Run dev mode via e.g. yarn run start.

    Actual output

    The generated CSS that can be inspected in the browser is the same as provided.

    Expected output

    The generated CSS should look like:

    .autoprefixertest {
        -ms-user-select: none;
            user-select: none;
    }
    

    when using the browserslist that comes by default with vue-design-system as in package.json:

    ...
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not Explorer > 0",
        "IE 11",
        "not ExplorerMobile > 0",
        "not BlackBerry > 0",
        "not OperaMini all",
        "not OperaMobile > 0"
      ]
    

    I double checked that the expected output is correct by using https://autoprefixer.github.io/, using filter "IE 11" there (which is also present in the default provided browserslist).

    Reviewed by benjixx at 2018-10-19 12:46
  • 9. Guidance for using customized Design System as an npm module from a private git repository

    We're intending to use Vue Design System as the starting point for our internal design system.
    As recommended in the Getting Started wiki, we'll be publishing our customized version as a new package that our main website will import.

    I'm struggling to arrive at the "right" approach to accomplish the following:

    • Start with a clone of vue-design-system or checkout of master
    • Begin working in a repository connected to our company's internal GitLab
    • Customize existing settings/files, and build out the rest of our system
    • Retain the ability to pull down updates made to the master branch of the original project, which seem to be happening at a rapid pace, and merge into our customized version

    Is there a specific approach you're intending teams building on a foundation of vue-design-system to use?

    Reviewed by ryanberg at 2018-04-09 18:10
  • 10. Cannot find image src path?

    Hi,

    I may be missing something but I can't work out the path for an image stored in assets folder? I have added an imgs folder to the assets folder so it's path is src/assets/imgs/logo.png and am trying to use it in an <img src="src/assets/imgs/logo.png" /> in an element component but no matter what path I try it cannot be found.

    Is there something I am doing wrong or need to do?

    Thank you

    Reviewed by andywd7 at 2018-03-28 15:36
  • 11. Start Script not working

    C:\Users\btw\Dev\vue\vue-design-system>npm start
    
    > [email protected] start C:\Users\btw\Dev\vue\vue-design-system
    > bash start.sh
    
    npm ERR! code ELIFECYCLE
    npm ERR! errno 3221225775
    npm ERR! [email protected] start: `bash start.sh`
    npm ERR! Exit status 3221225775
    npm ERR!
    npm ERR! Failed at the [email protected] start script.
    

    2018-03-19T22_54_56_380Z-debug.log

    0 info it worked if it ends with ok
    1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
    1 verbose cli   'C:\\Users\\btw\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
    1 verbose cli   'start' ]
    2 info using [email protected]
    3 info using [email protected]
    4 verbose run-script [ 'prestart', 'start', 'poststart' ]
    5 info lifecycle [email protected]~prestart: [email protected]
    6 info lifecycle [email protected]~start: [email protected]
    7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
    8 verbose lifecycle [email protected]~start: PATH: C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\btw\Dev\vue\vue-design-system\node_modules\.bin;C:\Python27\;C:\Python27\Scripts;C:\Users\btw\AppData\Local\Programs\Python\Python36-32\;C:\Program Files\Ruby24-x64\bin;C:\Program Files (x86)\Razer Chroma SDK\bin;C:\Program Files\Razer Chroma SDK\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Users\btw\AppData\Local\Microsoft\WindowsApps;C:\cygwin64\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Users\btw\apps;C:\ProgramData\chocolatey\bin;C:\Program Files (x86)\Yarn\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\System32\OpenSSH\;C:\WINDOWS\System32\LibreSSL\;C:\Users\btw\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\btw\AppData\Local\atom\bin;C:\Users\btw\AppData\Local\GitHubDesktop\bin;C:\Users\btw\AppData\Local\Yarn\bin;C:\Users\btw\AppData\Roaming\npm
    9 verbose lifecycle [email protected]1.3.1~start: CWD: C:\Users\btw\Dev\vue\vue-design-system
    10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'bash start.sh' ]
    11 silly lifecycle [email protected]~start: Returned: code: 3221225775  signal: null
    12 info lifecycle [email protected]~start: Failed to exec start script
    13 verbose stack Error: [email protected] start: `bash start.sh`
    13 verbose stack Exit status 3221225775
    13 verbose stack     at EventEmitter.<anonymous> (C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
    13 verbose stack     at emitTwo (events.js:126:13)
    13 verbose stack     at EventEmitter.emit (events.js:214:7)
    13 verbose stack     at ChildProcess.<anonymous> (C:\Users\btw\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
    13 verbose stack     at emitTwo (events.js:126:13)
    13 verbose stack     at ChildProcess.emit (events.js:214:7)
    13 verbose stack     at maybeClose (internal/child_process.js:925:16)
    13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
    14 verbose pkgid [email protected]
    15 verbose cwd C:\Users\btw\Dev\vue\vue-design-system
    16 verbose Windows_NT 10.0.17115
    17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\btw\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
    18 verbose node v8.9.3
    19 verbose npm  v5.7.1
    20 error code ELIFECYCLE
    21 error errno 3221225775
    22 error [email protected] start: `bash start.sh`
    22 error Exit status 3221225775
    23 error Failed at the [email protected] start script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 3221225775, true ]
    
    
    Reviewed by derekbtw at 2018-03-19 23:00
  • 12. Module not found: Can't resolve 'react'

    Hi

    Following the Getting Started instructions results in an error when loading http://localhost:6060/

    Failed to compile
    ./docs/components/Editor.js
    Module not found: Can't resolve 'react' in '/path/to/docs/components'
    
    Reviewed by smth at 2021-05-25 07:54
  • 13. Problems with mini-css-extract-plugin

    After a first npm install I got some errors (like Npm login needed) or some fail on some packages. Have to install them 1 by 1 (like optimist)

    webpack 5.21.2 webpack-cli 4.5.0 webpack-dev-server 3.11.2

    When i'm trying to npm start I got this message => [webpack-cli] Error: Cannot find module 'mini-css-extract-plugin'

    Anyone can help me ?

    Reviewed by yannviroulaud at 2021-02-12 17:30
  • 14. Unknown custom element: at living documentation

    System info

    • Windows 10 (tried on Mac too)
    • Node version: 12.18.2

    Steps to reproduce

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

    Then, when I go to http://localhost:6060/#/Design%20Tokens I see this: image

    I have "solved" the issue adding this to docs/doc.helper.js:

    const contexts = [
      require.context("./components/status", true, /\.vue$/),
      require.context("./components/tokens", true, /\.vue$/),
      require.context("../src/elements/", true, /\.vue$/),
    ]
    
    // Define components
    const components = []
    contexts.forEach(context => {
      context.keys().forEach(key => components.push(context(key).default))
    })
    
    components.forEach(component => Vue.component(component.name, component))
    

    But, even with that "fix", I can't see any elements in the sidebar either: image

    Reviewed by ManuLG at 2021-01-16 16:22
  • 15. Vue3 support

    Hey!

    Are there plans for a Vue3 compatible version? I didn't try it. But as far as I can tell, I would have to change some bits of the vue-design-system to build Vue3 components in this system.

    ✌️

    Reviewed by dionysiusmarquis at 2020-11-09 15:34
  • 16. module "optimst" not found on command "start"

    internal/modules/cjs/loader.js:797
        throw err;
        ^
    
    Error: Cannot find module 'optimist'
    Require stack:
    - E:\Work\Projects\vue-design-system\node_modules\theo\bin\theo.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
        at Function.Module._load (internal/modules/cjs/loader.js:687:27)
        at Module.require (internal/modules/cjs/loader.js:849:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (E:\Work\Projects\vue-design-system\node_modules\theo\bin\theo.js:5:14)
        at Module._compile (internal/modules/cjs/loader.js:956:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) {
      code: 'MODULE_NOT_FOUND',
      requireStack: [
        'E:\\Work\\Projects\\vue-design-system\\node_modules\\theo\\bin\\theo.js'
      ]
    }
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    ERROR: "theo" exited with 1.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    

    Decision - yarn add optimist/npm i optimist

    Reviewed by Happy-Child at 2020-08-02 23:07
Software open source y gratuito para control de parqueadero y estacionamiento
Software open source y gratuito para control de parqueadero y estacionamiento

control-estacionamiento Software open source y gratuito para control de parqueadero y estacionamiento Tutorial, presentación y descargas En mi blog: h

Jul 23, 2021
Libre Weather is an open source, privacy respecting, self hostable progressive web app. Can be downloaded for iOS and Android.

Libre Weather Libre Weather is an open source weather pwa(progressive web app). You can either use the publicly hosted instance on here or simply host

Jun 21, 2022
Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Frontend Mentor - Space tourism website Welcome! ?? Frontend Mentor challenges help you improve your coding skills by building realistic projects. Our

Jun 19, 2022
CION - Design system boilerplate for Vue.js
CION - Design system boilerplate for Vue.js

CION - Design system boilerplate for Vue.js CION is a design system build primarily for Vue.js applications. You can use it as a starting point for bu

Aug 10, 2022
An example of consuming Nord Design System in a Vue.js project.

vue-example-project This repo is an example of using Vue 3 / Vite along with Nord Design System's components. Typescript is used, but this is not a ne

Jul 27, 2022
Chat App - Project slicing design UI to real interface uisng Vue JS and Tailwind
 Chat App - Project slicing design UI to real interface uisng Vue JS and Tailwind

Chat App - Project slicing design UI to real interface uisng Vue JS and Tailwind

Aug 12, 2022
Website for upcoming Global Source Maintainer Summit · June 8-9 2021.

Global Maintainers Summit ??️ Add new speakers Step 1 - ?? Content Go to content/{year}/shared/maintainers folder. For example, for year 2021 the full

Jul 31, 2022
this is a game library full-stack web app using VueJs for Frontend design and Flask for backend server

VueJS-Flask-Full-Stack-Application This is a game library full-stack web app using VueJs for Frontend design and Flask for backend server Vue is a pro

Jul 12, 2022
🌐 Source code of falcxxdev.ml
🌐 Source code of falcxxdev.ml

➡️ Developing ??️ Requirements A node.js >= 16.12.0 setup with pnpm is recommended. ?? Install dependencies $ pnpm install ?? Serve and Start Developm

Aug 7, 2022
Example app for using Feathers with Vue 2.0. It includes authentication, vue-router, vue-infinite-loading and roles.
Example app for using Feathers with Vue 2.0.  It includes authentication, vue-router, vue-infinite-loading and roles.

Feathers and Vue 2.0 Blog Admin Demo This demo app shows how to use Feathers.js with Vue 2.0. It includes using authentication, vue-router and roles.

Mar 24, 2021
Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering
Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering

vue-zhihudaily-2.0 Zhihudaily demo built with Vue 2.0 + vue-router + vuex, with server-side rendering. 主要参考 vue-hackernews-2.0 . Live Demo Features Se

Jul 28, 2020
SPA about vue-cli+adminLte+vue-router
SPA about vue-cli+adminLte+vue-router

vue-adminLte-vue-router by liujians http://liujians.me 最近在整合的vue+vue-router+adminLte,用来做响应式的比较美观的SPA管理系统 项目路径:https://github.com/liujians/vue-adminLte

Aug 3, 2022
Using Vue.js for memo web App. webpack, vuex, vue-router, Firebase.
Using Vue.js for memo web App. webpack, vuex, vue-router, Firebase.

Dependencies Vue.js(>2.x.) vue-router(>2.x.) vuex(>2.x.) vuex-router-sync(>3.x.) @next Firebase(>3.6.x) marked(>0.3.x) webpack(>1.13.x) babel-core(>6.

Jun 29, 2022
vuejs and Django integration with hot code reload. Dont use this, use https://github.com/NdagiStanley/vue-django or https://github.com/gtalarico/django-vue-template

hello-vue + Django This is a boilerplate project for using vuejs with Django. Features Django backend in ./backend vuejs (v2) frontend in ./frontend H

Jul 21, 2022
⚡ Vue - Laravel - Example is a simple example to set Vue with Laravel.

创造不息,交付不止 Vue - Laravel - Example Vue - Laravel - Example is a simple example to set Vue 2.0 with Laravel 5.1. Install Clone the project to local git

Jun 11, 2022
A Vue.js 2.x Boilerplate with Vuex, vue-router AND Bulma

Vue 2.x Boilerplate A Vue.js project with Vuex, vue-router AND Bulma Build Setup # install dependencies yarn # serve with hot reload at localhost:808

Jul 7, 2021
Simple chart page that uses Element UI, Vue Router and Vue Chart

vue-chart-starter-kit Simple chart page that uses Element UI, Vue Router and Vue Chart Demo Build Setup # install dependencies npm install # serve wi

Jul 28, 2020
基于 Vue & Koa 的 WebDesktop 视窗系统 The WebDesktop system based on Vue
基于 Vue & Koa 的 WebDesktop 视窗系统   The WebDesktop system based on Vue

X-WebDesktop-Vue 基于 Vue 的 WebDesktop 系统 Version FrontEnd API Electron 3.x 3.x 3.x 2.0.0 2.0.0 2.0.0 1.0.1 1.0.1 - 1.0.0 - - Documentation 中文文档 (2.0.0)

Jun 20, 2022
Vue.js + Vue Router + Vuex in a simple Stock Trading game

Vue.js Stock Trader Game A simple game created for learning the Vue.js ecosystem. This project makes use of following: Modules: Vue.js - Framework Vue

Jul 10, 2022