{"id":18020037,"url":"https://github.com/polygonjs/polygonjs-vue2","last_synced_at":"2026-04-26T23:31:43.797Z","repository":{"id":109051199,"uuid":"484025998","full_name":"polygonjs/polygonjs-vue2","owner":"polygonjs","description":"Vuejs 2 component to easily load Polygonjs WebGL scenes","archived":false,"fork":false,"pushed_at":"2022-05-09T17:32:54.000Z","size":316,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-14T20:16:52.121Z","etag":null,"topics":["3d","animation","creative-coding","glsl","particles","procedural","procedural-generation","threejs","visual-editor","visualization","vue","vuejs2","webgl"],"latest_commit_sha":null,"homepage":"https://polygonjs.com","language":"Vue","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/polygonjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-04-21T11:35:03.000Z","updated_at":"2022-04-21T12:49:47.000Z","dependencies_parsed_at":"2023-03-10T14:30:33.788Z","dependency_job_id":null,"html_url":"https://github.com/polygonjs/polygonjs-vue2","commit_stats":{"total_commits":17,"total_committers":1,"mean_commits":17.0,"dds":0.0,"last_synced_commit":"da915e852b8ef6c1d960f83ea9cdda23bd564a75"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/polygonjs/polygonjs-vue2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-vue2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-vue2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-vue2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-vue2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polygonjs","download_url":"https://codeload.github.com/polygonjs/polygonjs-vue2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-vue2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32317163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"ssl_error","status_checked_at":"2026-04-26T23:26:25.802Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["3d","animation","creative-coding","glsl","particles","procedural","procedural-generation","threejs","visual-editor","visualization","vue","vuejs2","webgl"],"created_at":"2024-10-30T05:13:22.964Z","updated_at":"2026-04-26T23:31:43.780Z","avatar_url":"https://github.com/polygonjs.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/vue/logos.png?raw=true\" alt=\"Vuejs + Polygonjs\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://polygonjs.com/vue2\"\u003eLive Demo\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com\"\u003ePolygonjs\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com/forum\"\u003eForum\u003c/a\u003e |\n\u003ca href=\"https://polygonjs.com/discord\"\u003eDiscord\u003c/a\u003e\n\u003c/p\u003e\n\n\n# Vue 2 Component for Polygonjs\n\nThis is a vuejs component to easily import WebGL scenes created with the node-based editor [Polygonjs](https://polygonjs.com).\n\nPolygonjs allows you to create complex and procedural scenes with a visual editor, and you can import them with vuejs, and benefit from its reactive states. You can then update the 3D scene from anything in your vuejs setup.\n\n\u003ctable style=\"margin:0px;padding:0px\"\u003e\n\t\u003ctr style=\"margin:0px;padding:0px\"\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/vue/scene_01.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/vue/scene_02.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr style=\"margin:0px;padding:0px\"\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/vue/scene_03.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\t\u003ctd style=\"margin:0px;padding:0px\"\u003e\u003cimg src=\"https://github.com/polygonjs/polygonjs-assets/blob/master/tutorials/vue/vue_example.gif?raw=true\"\u003e\u003c/img\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n[Live Demo \u003e\u003e](https://polygonjs.com/vue2)\n\nThere is also a [component for vue 3](https://github.com/polygonjs/polygonjs-vue3).\n\n# Install\n\n``` bash\nyarn add @polygonjs/vue2\n```\n\nor\n\n``` bash\nnpm install @polygonjs/vue2\n```\n\n# How to use\n\nThe only required prop to pass to the component is `loadFunction`, which is the function that loads your 3D scene. That function is autogenerated by [polygonjs visual editor](https://polygonjs.com/docs/getting_started).\n\n``` vue\n\u003cPolygonjsScene :loadFunction=\"loadFunction\"\u003e\n```\n\nOnce you've saved a scene, you will have a .js file created with a path like `./src/polygonjs/scenes/\u003csceneName\u003e/autogenerated/loadSceneAndMountAsync.js` inside your project, which exports a function called `loadSceneAndMountAsync_\u003csceneName\u003e`.\n\nSo assuming you have already created a scene called `scene_01` in your project, the file will be `./src/polygonjs/scenes/scene_01/autogenerated/loadSceneAndMountAsync.js` and the exported function will be called `loadSceneAndMountAsync_scene_01`.\n\nWith that in mind, a minimal component to load a scene will look like this:\n\n``` vue\n\u003ctemplate\u003e\n  \u003cPolygonjsScene :loadFunction=\"loadFunction\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport Vue from 'vue';\nimport {PolygonjsScene} from '@polygonjs/vue2';\nimport {loadSceneAndMountAsync_scene_01} from '@/polygonjs/scenes/scene_01/autogenerated/loadSceneAndMountAsync';\n\nexport default Vue.extend({\n  name: 'scene-01',\n  components: {\n    PolygonjsScene,\n  },\n  computed: {\n    loadFunction: ()=\u003eloadSceneAndMountAsync_scene_01,\n  },\n});\n\u003c/script\u003e\n```\n\nThis will load your scene asynchronously. This means that the rest of the page will load first, and then the 3D scene will be loaded.\n\n# Other props \u0026 events\n\n## Props\n| name | type | description |\n|---|----|----|\n| **displayLoadingProgressBar** | *boolean* | While the scene is being loaded, a progress bar is updated to reflect the progress. This can be turned off by passing `false` (default: `true`) |\n\n## Events\n\n| name | args | description |\n|---|----|----|\n| **progress** | *progressAmount* | This gives you the progress so that you can display your own progress bar or custom loading component if you want to use another than the one provided. |\n| **sceneready** | *scene* | Once the scene is being loaded, you may want to have access to it, so that you can update it when a component prop or state changes. See how the components for the [live demo](https://polygonjs.com/vue2): [scene 01](https://github.com/polygonjs/polygonjs-vue2-example/blob/main/src/views/Scene01.vue) and [scene 02](https://github.com/polygonjs/polygonjs-vue2-example/blob/main/src/views/Scene02.vue) |\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-vue2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolygonjs%2Fpolygonjs-vue2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-vue2/lists"}