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

Overview

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.

Comments
  • Is Vue Design System Nuxt.js compatible?

    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.

    enhancement help wanted roadmap 
    opened by jackbarham 21
  • ERROR in system/system.js from UglifyJs Unexpected token: punc (() [system/system.js:50506,9]

    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.

    bug roadmap 
    opened by michaelpumo 20
  • Help in the Getting Started

    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.

    question 
    opened by angeliski 11
  • Import system not working

    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.

    enhancement help wanted roadmap 
    opened by dracon 11
  • Show both VUE and HTML markup

    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.

    enhancement roadmap work-in-progress 
    opened by timhartmann 10
  • Separate pages & URLs for all nav items to allow richer documentation of components

    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.

    enhancement roadmap work-in-progress 
    opened by viljamis 10
  • Code blocks in Markdown get actually rendered when wrapping them using ```html ... ```

    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 bug roadmap work-in-progress 
    opened by sdellis 9
  • Autoprefixer does not seem to work

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

    bug roadmap 
    opened by benjixx 7
  • Guidance for using customized Design System as an npm module from a private git repository

    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?

    enhancement roadmap 
    opened by ryanberg 7
  • Cannot find image src path?

    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

    opened by andywd7 7
  • Start Script not working

    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]~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 ]
    
    
    work-in-progress 
    opened by derekbtw 7
  • Module not found: Can't resolve 'react'

    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'
    
    opened by smth 2
  • Problems with mini-css-extract-plugin

    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 ?

    opened by yannviroulaud 0
  • Unknown custom element: <color> at living documentation

    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

    opened by ManuLG 1
  • Vue3 support

    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.

    ✌️

    opened by dionysiusmarquis 2
  • module

    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

    opened by Happy-Child 0
Releases(3.5.7)
  • 3.5.7(Nov 28, 2018)

  • 3.5.6(Oct 25, 2018)

  • 3.5.5(Oct 9, 2018)

  • 3.5.4(Oct 7, 2018)

    • Adds system version to documentation sidebar.
    • Makes it easier to copy variable names from documentation.
    • Adds better build instructions into console.
    • Fixes a bug with active nav items.
    • Added example on how to use vueds on a static website: https://github.com/viljamis/vue-design-system-example-website
    • Makes it easier to remove all existing tokens and start defining your own.
    • Makes it easier to style the documentation.
    • Provides SCSS defaults for Icon element since it’s used in docs.
    • Provides default JSON tokens for docs so that the components listing won’t break as easily.

    Example of the new version badge:

    screenshot 2018-10-07 11 15 05 Source code(tar.gz)
    Source code(zip)
  • 3.5.3(Oct 5, 2018)

  • 3.5.2(Oct 1, 2018)

    • Makes Vue Design System compatible with Vue.js 2.5.17
    • Design System build optimization: The default library build went down from 106kb to 16.1kb
    • Adds Nuxt.js support, see a simplified demo: https://github.com/viljamis/nuxt-design-system
    • Adds a demo and instructions for NPM usage: https://github.com/viljamis/vue-design-system-example
    • Fixes #90, #92, #69, #94

    Migration guide

    • Vue Design System is now using simpler and shorter naming conventions. This means that most of the token and component names have been updated. See updated instructions: https://github.com/viljamis/vue-design-system/wiki/naming-of-Things

    • Importing the system via NPM has changed slightly (see the updated CSS path):

      import DesignSystem from 'vue-design-system'
      import 'vue-design-system/dist/system/system.css'
      
      Vue.use(DesignSystem)
      
    • All styles for the documentation have been updated. To apply these changes, you’ll have to manually pull changes from docs.tokens.scss because of the new naming format.

    Source code(tar.gz)
    Source code(zip)
  • 3.5.1(Sep 30, 2018)

    • Fixes bugs with NPM library build
    • Make libraryTarget and perf hints configurable options in config/index.js
    • Opens documentation by default instead of the Vue.js app
    Source code(tar.gz)
    Source code(zip)
  • 3.5.0(Sep 28, 2018)

    • Breaking change: New simpler naming conventions for sizes (docs updated too)
    • Adds support for Sass Indented syntax
    • Improves all existing demo components
    • Adds new button, textarea, and paragraph examples
    • Improves overall styles of docs
    Source code(tar.gz)
    Source code(zip)
  • 3.2.0(Sep 27, 2018)

    • Vue Design System now shows both Vue.js and HTML markup. Preview: https://vueds.com/example/#/Elements/FormInput
    • Define and work with Vue.js components as usual. The tool will automatically convert them to HTML and show both in the documentation.
    • This change will make it much easier to understand what is being rendered in addition to making it possible to copy and paste the markup and use it in any context.
    • See example screenshots:
    screenshot 2018-09-27 13 04 02 screenshot 2018-09-27 13 04 11 Source code(tar.gz)
    Source code(zip)
  • 3.1.0(Sep 24, 2018)

    • Upgraded to Babel 7 (Please note that this is a breaking change, see migration guide: https://babeljs.io/docs/en/v7-migration)
    • Fixes IE11 support and errors
    • Updates all dependencies to latest
    • Adds simpler and better supported SVG example component
    Source code(tar.gz)
    Source code(zip)
  • 3.0.2(Sep 7, 2018)

    • Updates all dependencies to the latest
    • Brings latest features from Vue-Styleguidist to Vue Design System
    • Enables anyone to use Vue Design System as a module without having to clone and build locally.
    Source code(tar.gz)
    Source code(zip)
  • 3.0.1(Jul 15, 2018)

    • Fixes yarn install
    • Adds Vue-Styleguidist fix for IE support when navigation options is enabled
    • Updates all dependencies
    • Updates getting started docs
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(May 31, 2018)

    Website: https://vueds.com

    Live example: https://vueds.com/example/

    Release notes:

    • Using Webpack 4 now!
    • Faster performance & updated Webpack configs.
    • Separate views for all components.
    • Adds auto collapsing navigation groups for cleaner sidebar.
    • Tone & Voice section added.
    • Copies static assets on library build as well now.
    • Improved system overviews.
    • Switches to using official Vue Styleguidist dependency.
    • Adds support for Safari 10.
    screenshot 2018-05-31 17 07 53 screenshot 2018-05-31 17 08 13 Source code(tar.gz)
    Source code(zip)
  • 2.1.4(May 28, 2018)

  • 2.1.3(Apr 15, 2018)

    • This release adds local Sass !defaults for global design tokens (for the docs). Makes it easier to prototype things quickly without breaking the docs when renaming global design tokens.
    • Adds tiny fixes to style guide’s styles.
    • Also fixes issue with Prettier and generated token files.
    • Updates all NPM dependiencies to latest.
    Source code(tar.gz)
    Source code(zip)
  • 2.1.2(Apr 7, 2018)

  • 2.1.0(Apr 6, 2018)

    • Updates Travis config to run new Lint and Integration tests
    • Fixes all ESLint warnings
    • Git doesn’t warn about changed tokens anymore
    • Docs now build under dist directory as well
    • Not importing the whole lodash library anymore since using just one util
    • Adds ESLint config and relevant dependencies
    • Moves docs config from root to config dir
    • Unifies terms being used more
    Source code(tar.gz)
    Source code(zip)
  • 2.0.1(Mar 29, 2018)

  • 2.0.0(Mar 29, 2018)

    • New documentation layout (live example).
    • New color swatches/palette layout (live example)
    • Improved documentation styles (live example).
    • Listing all tokens in documentation (live example).
    • Separated sections in documentation (live example).
    • Better support for large design systems.
    • Everything works now on Windows with the same Getting Started instructions (as for macOS).
    • Removed shell scripts.
    • Updates all NPM dependencies to latest and cleans unused ones.
    • Adds an example on how to show different component states.
    • Improves all component examples (live example).
    • Better overall documentation integrated into styleguide.
    • Better documentation inside JS partials.
    • Styleguide CSS cleaned up and now using Sass tokens from the system.
    • Removes some redundant and unused things.
    • Adds “getting started, downloads and FAQ” to documentation (live example).
    • The active section is now highlighted in the sidebar (live example).
    • Fixes component label logic to not create duplicates.
    • Unify build commands. Now: npm run build:system, npm run build:docs & npm run build:app.
    • Private components are now hidden with CSS only, so no need for the JavaScript helper. This is more reliable as well.
    • Building for NPM also now copies over Sass utilities.
    • Fixes static assets handling

    Screenshots:

    screenshot 2018-03-29 20 03 38 screenshot 2018-03-27 08 37 33 screenshot 2018-03-27 08 37 03 screenshot 2018-03-27 08 38 02 screenshot 2018-03-27 08 38 15 Source code(tar.gz)
    Source code(zip)
  • 1.3.4(Mar 23, 2018)

  • 1.3.3(Mar 21, 2018)

  • 1.3.2(Mar 20, 2018)

  • 1.3.1(Mar 16, 2018)

  • 1.3.0(Mar 8, 2018)

  • 1.2.1(Mar 4, 2018)

  • 1.2.0(Mar 1, 2018)

    • Makes it possible to add a “release” tag to components in addition to “version”.
    • Adds Component Status overview to documentation.
    • Cleans up documentation templates.
    Source code(tar.gz)
    Source code(zip)
  • 1.11.2(Feb 25, 2018)

  • 1.11.0(Feb 23, 2018)

    • Completely reworked more robust status tagging for components.
    • Adds prop validators and examples on how to use them.
    • Run hidePrivate functionality in docs only once.
    • Moves documentation utils inside docs/utils.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Feb 22, 2018)

    • Complete rewrite of Webpack configs
    • Simplifies npm start
    • Simplifies package.json and makes it ready for NPM usage
    • Adds pre-commit hook for Prettier
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Feb 22, 2018)

    The biggest release so far, making Vue Design System ready for production use. Includes the following changes:

    • Importing of components is fully automated now, nothing manual is required. Create an element or a pattern and it’s immediately available across your app.
    • Makes it possible to add head meta info to templates (title, description etc., see Index.vue for an example)
    • Adds a simple example component with documentation.
    • Refactors component status logic to be more performant.
    • Design System can be used as an NPM dependency in another project now.
    • Cleans/removes static html from styleguide template to make it production ready.
    • Updates all NPM dependencies and Styleguidist to latest.
    • Adds fixes to spacing component in docs.
    • Moves Babel config to package.json
    Source code(tar.gz)
    Source code(zip)
Owner
Viljami Salminen
Head of Design and Design Systems at TPG. Lead Architect of Duet Design System. Author of various popular open source tools.
Viljami Salminen
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

Luis Cabrera Benito 4 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

Pierre Dahmani 18 Sep 28, 2022
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

Abdulrahman 1 Aug 26, 2022
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

Jörg Bayreuther 140 Oct 20, 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

Nordhealth 4 Nov 9, 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

Oka R. Abdillah 35 Nov 30, 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

Bek Brace 19 Nov 11, 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

GitHub 31 Nov 8, 2022
🌐 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

Gifaldy Azka 7 Nov 5, 2022
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.

Jeff McMorris 72 Mar 24, 2021
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

好多大米 109 Jul 28, 2020
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

刘剑 367 Oct 31, 2022
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.

Akiho Nagao 95 Nov 16, 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

Rokas Kupstys 330 Oct 6, 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

Jiajian Chan 163 Nov 14, 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

Hoony Chang 25 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

Captain Pangyo 23 Jul 28, 2020
基于 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)

葡萄干@吐鲁番 382 Nov 3, 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

Jacob Sarnowski 40 Nov 21, 2022