{"id":21701492,"url":"https://github.com/ktsn/vue-designer","last_synced_at":"2025-04-06T06:09:51.082Z","repository":{"id":66221650,"uuid":"114651875","full_name":"ktsn/vue-designer","owner":"ktsn","description":"Vue component design tool","archived":false,"fork":false,"pushed_at":"2023-12-30T10:44:48.000Z","size":1971,"stargazers_count":375,"open_issues_count":2,"forks_count":24,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-03-30T04:10:13.502Z","etag":null,"topics":["component","design-tools","editor","extension","single-file-component","vue"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=ktsn.vue-designer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ktsn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-18T14:41:40.000Z","updated_at":"2025-03-24T17:56:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"9fd50f5e-e2a5-40d2-9d2d-e3c6074923d0","html_url":"https://github.com/ktsn/vue-designer","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktsn","download_url":"https://codeload.github.com/ktsn/vue-designer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441052,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","design-tools","editor","extension","single-file-component","vue"],"created_at":"2024-11-25T20:20:11.051Z","updated_at":"2025-04-06T06:09:51.063Z","avatar_url":"https://github.com/ktsn.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003ch1 align=\"center\"\u003eVue Designer\u003c/h1\u003e\n\u003c/p\u003e\n\nVue component design tool.\n\n\u003e This extension is still work in progress. If you have some feedbacks for this extension, it would be really helpful!\n\n![demo](https://user-images.githubusercontent.com/5158436/49339360-c26e8780-f645-11e8-8115-3784eff63814.gif)\n\n## Quick Start\n\n- Download [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=ktsn.vue-designer)\n\n- Open the command pallete and select `Open Vue Designer`. Then you can see a preview pane of currently opened single file component (`.vue`).\n\n## Settings\n\n### `vueDesigner.sharedStyles`\n\nAn array of CSS paths which will be loaded in the preview. It is useful when your application has global CSS such as reset CSS.\n\n```json\n{\n  \"vueDesigner.sharedStyles\": [\"reset.css\"]\n}\n```\n\nNote that it does not support `@import` in the loaded CSS yet. You need to specify all depending CSS files.\n\n## Supported Preprocessors\n\nVue Designer currently does not actively support preprocessors on `\u003ctemplate\u003e`, `\u003cscript\u003e` and `\u003cstyle\u003e` blocks. Languages not included in the following list may not work on Vue Designer.\n\n- HTML (`\u003ctemplate\u003e`)\n- JavaScript (`\u003cscript\u003e`)\n- TypeScript (`\u003cscript lang=\"ts\"\u003e`)\n- CSS (`\u003cstyle\u003e`)\n\n## Development\n\nVue designer is separated by two modules - server and client.\n\nThe 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.\n\nThe server code is written in TypeScript and compiled to CommonJS format while the client code is in TypeScript too but bundled by Vite.\n\nThe codes only for client should be in `src/view`.\n\nAll codes should be formatted by [Prettier](https://prettier.io/).\n\nFor typings of external packages that does not exist should be in `types/(package name)`.\n\n### Visual Studio Code Extension\n\nTo debug on VSCode, follow the below steps:\n\n1.  Run `yarn watch` to start dev server.\n2.  Open VSCode and show debug pane on the left side of the editor.\n3.  Run `Launch Extension` so that it opens a new window with enabling local Vue Designer.\n4.  Select `Open Vue Designer` on command pallete.\n\nIf you want to use dev tools for client code, use **Developer: Toggle Developer Tools** command on the command pallete.\n\n### Commands\n\n```sh\n# build sources\n$ yarn build\n\n# build and watch sources\n$ yarn watch\n\n# run test\n$ yarn test\n\n# format sources with prettier\n$ yarn format\n```\n\n### Release\n\n```sh\n$ npm version XXX # -\u003e update version \u0026 generate changelog\n\n# after edit changelog if needed\n$ git add CHANGELOG.md\n$ git commit -m \"docs: changelog vXXX\"\n\n$ vsce publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktsn%2Fvue-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-designer/lists"}