{"id":18652937,"url":"https://github.com/needle-engine/vuejs-sample","last_synced_at":"2025-11-05T15:30:24.038Z","repository":{"id":206470678,"uuid":"716988727","full_name":"needle-engine/vuejs-sample","owner":"needle-engine","description":"Using Needle Engine with Vuejs Example","archived":false,"fork":false,"pushed_at":"2025-01-29T16:16:01.000Z","size":707,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-29T17:23:46.803Z","etag":null,"topics":["framework","threejs","vuejs","webdev","webgl"],"latest_commit_sha":null,"homepage":"https://engine.needle.tools/samples/vue.js-integration/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/needle-engine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-11-10T09:58:50.000Z","updated_at":"2025-01-29T16:16:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5b4b806-be10-460b-b9c9-0d93ad79de9c","html_url":"https://github.com/needle-engine/vuejs-sample","commit_stats":null,"previous_names":["needle-engine/vuejs-sample"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needle-engine%2Fvuejs-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needle-engine%2Fvuejs-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needle-engine%2Fvuejs-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needle-engine%2Fvuejs-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/needle-engine","download_url":"https://codeload.github.com/needle-engine/vuejs-sample/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239462381,"owners_count":19642745,"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":["framework","threejs","vuejs","webdev","webgl"],"created_at":"2024-11-07T07:09:29.290Z","updated_at":"2025-11-05T15:30:23.984Z","avatar_url":"https://github.com/needle-engine.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Needle Engine Vuejs Sample\n\nThis sample shows how to add Needle Engine to your vuejs based web project.   \n\n- Add the `\u003cneedle-engine\u003e` web component to any part of your vuejs component. See for example [`App.vue`](https://github.com/needle-engine/vuejs-sample/blob/183dfcc96ae3516b07ce952dc2494aaebb44cf44/src/App.vue#L26)\n- Additionally the [`SlideDeck.vue`](https://github.com/needle-engine/vuejs-sample/blob/main/src/components/SlideDeck.vue) file shows how to communicate from Vue components with any script or component in your Needle Engine scene by accessing the animator component and updating it's state and networking the currently active slide using Needle Engine's networking features.\n\nSee the sample [live here](https://engine.needle.tools/samples/vue.js-integration/?overlay=samples)\n\n\nhttps://github.com/needle-engine/vuejs-sample/assets/5083203/34e0b327-ad0c-48ca-97fb-f4a40d075ada\n\n\nThe project is even networked:    \n\nhttps://github.com/needle-engine/vuejs-sample/assets/5083203/07bacc51-41d9-4620-a963-5aa9d6e059a4\n\n\n\n# A look at the Unity scene\n\nIn Unity the animation's are setup using an simple animator controller.  \nFrom vuejs we simply set the `slide` index on the Animator.\n![image](https://github.com/needle-engine/vuejs-sample/assets/5083203/d2bb7ae6-f2e1-42f9-97c2-dab53661b492)\n\n\nhttps://github.com/needle-engine/vuejs-sample/assets/5083203/a2ccaf68-b037-4cf2-be60-3f7b24bbc9a4\n\n\n\n# Links\n\n[needle.tools](https://needle.tools) - [samples](https://engine.needle.tools/samples)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedle-engine%2Fvuejs-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneedle-engine%2Fvuejs-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedle-engine%2Fvuejs-sample/lists"}