[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8923":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},8923,"PreVue","open-source-labs\u002FPreVue","open-source-labs","🎨 All in One Prototyping Tool For Vue Developers.","",null,"Vue",1398,134,37,10,0,51.39,false,"master",true,[22,23,24,25,26,27,28,29,30,31,32,33,34],"application","express","front-end-development","javascript","mongodb","mongoose","react","vite","vue","vue-cli","vuejs","vuex","vuex4","2026-06-12 04:00:41","\u003Cp align=\"center\">\n  \u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fnew-banner.png?raw=true\">\n\u003C\u002Fp>\n\n---\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"250\" src=\"src\u002Fassets\u002Fprevue-large-green-bottom.png\">\n  \u003Ch1 align=\"center\">PreVue \u003C\u002Fh1>\n\u003C\u002Fp>\n\n\u003Ch3 align=\"center\">\nAll-in-One Prototyping Tool \nFor Vue Developers\n\u003C\u002Fh3>\n\n\u003Ch4 align=\"center\">\nFrom Component Architecture to Code Exporting\n\u003C\u002Fh4>\n\n\u003C!-- \u003Ch4 align='center'>\n  https:\u002F\u002Fwww.prevue.live\n\u003C\u002Fh4> -->\n\nPreVue allows users to conceptualize and visualize component architecture by making it possible to :\n\n- Build components, visualize UI and preview the associated code\n- Set up different routes and views for each project\n- Establish parent-child component relationships\n- View application hierarchy in tree format\n- Save and open projects that are currently in progress, ensuring that completed work is not lost and can be revisited at any time\n- Export component architecture as a Vue application created with default Vite settings\n\nUse PreVue to create projects in single sessions or sign in with GitHub to save projects and update them at your convenience!\n\n\u003C!-- \u003Cp align=\"center\">\n  \u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fpvv.png?raw=true\">\n\u003C\u002Fp> -->\n\n## Getting Started\n\n---\n\n### Adding Views\n\n- Select an existing view from the View Creator dropdown, or enter a new view name, then select your custom view from the View Creator dropdown\n- Any components created on a given view will be automatically saved to that specific view\n- See your application’s hierarchy by clicking the ‘Tree’ icon in the navigation bar\n\n\u003Cp align=\"center\">\n\u003Cimg width =\"300\" src=\"src\u002Fassets\u002Fviewcreator.png?raw=true\">\n\u003C\u002Fp>\n\n\u003Ch5 align=\"center\">Tree View of Application Architecture\u003C\u002Fh5>\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"300\" src=\"src\u002Fassets\u002Ftreeview.png?raw=true\">\n\u003C\u002Fp>\n\n### Adding Components\n\n- Enter a component name in the Component Creator field and select HTML elements\n- Clicked elements will be shown in the right sidebar -- drag elements to change their order\n- Once you're satisfied, click ‘add component’ button and it will show up in the working area -- resize and move components to fit the design you have in mind\n\n\u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fprevue-recording.gif\">\n\n### Editing Components\n\n- Double click elements to bring up the modal view\n- Add additional elements to a component with a live preview of the component code\n- Drag selected elements to the right to nest elements\n- Establish parent-child component relationships via the dropdown menu when creating or editing components\n\n\u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fmodal-image.png?raw=true\">\n\n### Saving \u002F Opening \u002F Exporting Projects\n\n- If you're signed in with GitHub, click the ‘Save Project’ icon to save it to PreVue’s database\n- Click ‘Open Project’ to retrieve past projects\n- Once you're satisfied, click the export project icon to export your awesome project as new Vue application\n- Other users can use PreVue's playground to create and export projects in single sessions without signing in\n\n\u003C!-- \u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fexport.gif\">\n\u003Cimg width=\"1000\" src=\"src\u002Fassets\u002Fexport.png\"> -->\n\n### Code Exporting\n\nBelow is the generated directory structure of the Vue application that is created when you export your design.\n\n```\nsrc\u002F\n  assets\u002F\n  App.vue\n  components\u002F\n    UserCreatedComponent1.vue\n    UserCreatedComponent2.vue\n    ...\n  views\u002F\n    HomeView.vue\n    UserCreatedRouteComponent1.vue\n    UserCreatedRouteComponent2.vue\n    ...\n```\n\n\u003C!-- ## Running your own local version\n\n### Setup\n\nComing soon! -->\n\n## Built With\n\n---\n\n- [Express](https:\u002F\u002Fexpressjs.com\u002F)\n- [Jest](https:\u002F\u002Fjestjs.io\u002F)\n- [MongoDB](https:\u002F\u002Fwww.mongodb.com\u002F)\n- [Mongoose](https:\u002F\u002Fmongoosejs.com\u002F)\n- [Node.js](https:\u002F\u002Fnodejs.org\u002Fen)\n- [SuperTest](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fsupertest)\n- [Vite](https:\u002F\u002Fvitejs.dev\u002F)\n- [Vue Router](https:\u002F\u002Frouter.vuejs.org\u002Fguide\u002F#html)\n- [Vue Test Utils](https:\u002F\u002Ftest-utils.vuejs.org\u002F)\n- [Vue.js](https:\u002F\u002Fvuejs.org\u002F)\n- [Vuex](https:\u002F\u002Fvuex.vuejs.org\u002F)\n- [Vuetify](https:\u002F\u002Fvuetifyjs.com\u002F)\n\n## Changelog\n\n---\n\nPreVue 3.0 Updates:\n\n- OAuth integration with GitHub for secure authentication\n- Full CRUD functionality for prototype creation\n- Implementation of appropriate hierarchical relationships reflected in UI\n- Website and Homepage redesign for seamless user experience\n- Realistic rendering of elements to Component Display\n- Delete and Undo functionality for individual Components\n- Project saving, loading & export ability\n\nPreVue 2.0 Updates:\n\n- Implementation of PreVue as a web application\n- TypeScript integration\n- Backend infrastructure built with Node\u002FExpress\n- General UI\u002FUX enhancements\n- Testing with Vitest and Supertest (and Jest)\n\n## Contributing to PreVue\n\n---\n\nWe encourage you to submit issues for any bugs or ideas for enhancements. Please feel free to fork this repo and submit pull requests to contribute as well. Follow PreVue on [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fprevue-live\u002F) for more updates.\n\nIdeas for additional features include:\n\n- Project livesharing for collaborative sessions (via Websockets)\n- Migrate state management from Vuex to Pinia\n- More thorough testing with Jest\n- Ability to rename and add styling to individual components\n- Containerization of PreVue App\n- User Authentication updates via OAuth\n\n## Authors\n\nPrevue 3.0\n\n- **April Sanders** [@algorithmrhythm](https:\u002F\u002Fgithub.com\u002Falgorithmrhythm)\n- **Cole Jaeger** [@colejaeger0](https:\u002F\u002Fgithub.com\u002Fcolejaeger0)\n- **Ilay Eskinazi** [@Pixolino](https:\u002F\u002Fgithub.com\u002FPixolino)\n- **Nathan Bornstein** [@greenteaisgreat](https:\u002F\u002Fgithub.com\u002Fgreenteaisgreat)\n\nPreVue 2.0\n\n- **Jason Boo** [@jasonboo123](https:\u002F\u002Fgithub.com\u002Fjasonboo123)\n- **Robert Drake** [@rmdrake8](https:\u002F\u002Fgithub.com\u002Frmdrake8)\n- **Sean Flynn** [@seanflynn5](http:\u002F\u002Fgithub.com\u002Fseanflynn5)\n- **Zach Pestaina** [@zachpestaina](https:\u002F\u002Fgithub.com\u002Fzachpestaina)\n\nPreVue 1.0\n\n- **Hubert Lin** [@hubelin](https:\u002F\u002Fgithub.com\u002Fhubelin)\n- **Franklin Pinnock** [@pinnockf](https:\u002F\u002Fgithub.com\u002Fpinnockf)\n- **Annette Lin** [@al2613](https:\u002F\u002Fgithub.com\u002Fal2613)\n- **Daniel Shu** [@danshuu](https:\u002F\u002Fgithub.com\u002Fdanshuu)\n\n## License\n\n---\n\n\u003Cp>This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\u003C\u002Fp>\n\n[![PRs Welcome](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg)](https:\u002F\u002Fgithub.com\u002Fteamprevue\u002FPreVue\u002Fpulls)\n![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)\n","PreVue 是一款专为 Vue 开发者设计的一体化原型工具。它支持构建组件、可视化用户界面并预览相关代码，同时允许用户设置不同的路由和视图，建立父子组件关系，并以树形格式查看应用层次结构。此外，PreVue 还提供了保存和打开项目的功能，确保已完成的工作不会丢失，并可以随时回访。最终，用户能够将组件架构导出为使用默认 Vite 设置创建的 Vue 应用程序。该工具适用于需要快速原型设计和可视化组件架构的前端开发场景，无论是单次会话还是通过 GitHub 登录保存项目长期维护都非常方便。",2,"2026-06-11 03:20:19","top_language"]