Skip to content
Vue component design tool
TypeScript Vue JavaScript CSS
Branch: master
Clone or download
Latest commit 4186578 Dec 2, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: bump node version on ci Aug 17, 2018
.vscode chore: format on save Sep 10, 2018
tests fix: update matched styles when the server notified updating some doc… Dec 2, 2018
types chore: use @babel/parser Aug 25, 2018
.eslintrc.js chore: introduce eslint (#60) Aug 16, 2018
.gitignore output coverage report Feb 21, 2018
.prettierignore chore: introduce eslint (#60) Aug 16, 2018
.vscodeignore chore: update vscodeignore Mar 2, 2018 docs: changelog v0.7.1 Dec 2, 2018
LICENSE chore: add LICENSE Mar 16, 2018 chore: improve readme (#79) Dec 2, 2018
jest.config.js chore: introduce eslint (#60) Aug 16, 2018
package.json 0.7.1 Dec 2, 2018
prettier.config.js chore: introduce eslint (#60) Aug 16, 2018
tsconfig.json refactor: rewrite websocket module to new communication module (#69) Nov 7, 2018
tsconfig.main.json chore: introduce eslint (#60) Aug 16, 2018
tsconfig.test.json chore: bump deps Jul 22, 2018
tsconfig.view.json chore: introduce eslint (#60) Aug 16, 2018
vue.config.js chore: allow HMR in the vscode webview (#72) Nov 24, 2018
yarn.lock perf: only send updated or removed file on that case (#76) Dec 2, 2018

Vue Designer

Vue component design tool.

This extension is still work in progress. If you have some feedbacks for this extension, it would be really helpful!


Quick Start

  • Download VSCode Extension

  • Open the command pallete and select Open Vue Designer. Then you can see a preview pane of currently opened single file component (.vue).



An array of CSS paths which will be loaded in the preview. It is useful when your application has global CSS such as reset CSS.

  "vueDesigner.sharedStyles": ["reset.css"]

Note that it does not support @import in the loaded CSS yet. You need to specify all depending CSS files.

Supported Preprocessors

Vue Designer currently does not actively support preprocessors on <template>, <script> and <style> blocks. Languages not included in the following list may not work on Vue Designer.

  • HTML (<template>)
  • JavaScript (<script>)
  • TypeScript (<script lang="ts">)
  • CSS (<style>)


Vue designer is separated by two modules - server and client.

The server is executed by the editor process and responsible with parsing/analyzing component code and handling client requests. The client is for rendering compnent preview and handling the users' interaction. The server and client communicate by WebSocket to synchronize component data.

The server code is written in TypeScript and compiled to CommonJS format while the client code is in TypeScript too but bundled by webpack.

The codes only for client should be in src/view.

All codes should be formatted by Prettier.

For typings of external packages that does not exist should be in types/(package name).

Visual Studio Code Extension

To debug on VSCode, follow the below steps:

  1. Run yarn watch to start dev server.
  2. Open VSCode and show debug pane on the left side of the editor.
  3. Run Launch Extension so that it opens a new window with enabling local Vue Designer.
  4. Select Open Vue Designer on command pallete.

If you want to use dev tools for client code, add the following configuration in your keybindings.json.

  "key": "shift+cmd+i",
  "command": "workbench.action.webview.openDeveloperTools"


# build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# run test with watching
$ yarn test:watch

# run test with coverage report
$ yarn test:coverage

# format sources with prettier
$ yarn lint:fix


$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add
$ git commit -m "docs: changelog vXXX"

$ vsce publish
You can’t perform that action at this time.