Vue component design tool.
Open the command pallete and select
Open Vue Designer. Then you can see a preview pane of currently opened single file component (
This extension is still work in progress. If you have some feedbacks for this extension, it would be really helpful!
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.
Note that it does not support
@import in the loaded CSS yet. You need to specify all depending CSS files.
Vue Designer currently does not actively support preprocessors on
<style> blocks. Languages not included in the following list may not work on Vue Designer.
- HTML (
- TypeScript (
- CSS (
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
All codes should be formatted by Prettier.
For typings of external packages that does not exist should be in
Visual Studio Code Extension
To debug on VSCode, follow the below steps:
yarn watch to start dev server.
- Open VSCode and show debug pane on the left side of the editor.
Launch Extension so that it opens a new window with enabling local Vue Designer.
Open Vue Designer on command pallete.
If you want to use dev tools for client code, add the following configuration in your
# 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 CHANGELOG.md
$ git commit -m "docs: changelog vXXX"
$ vsce publish