{"id":30140329,"url":"https://github.com/froganbee/unity-weblg","last_synced_at":"2026-04-07T21:31:42.197Z","repository":{"id":251211839,"uuid":"800533797","full_name":"FroganBee/unity-weblg","owner":"FroganBee","description":"Embed your Unity application in your application for writing interactive interfaces with two way Unity and VueJS communication.","archived":false,"fork":false,"pushed_at":"2024-05-14T20:11:06.000Z","size":140,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T18:51:00.121Z","etag":null,"topics":["deno","javascript","nodejs","unity","vue","webgl","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/FroganBee.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,"publiccode":null,"codemeta":null}},"created_at":"2024-05-14T14:13:51.000Z","updated_at":"2025-08-27T01:00:14.000Z","dependencies_parsed_at":"2024-08-01T14:42:17.613Z","dependency_job_id":"4740fdda-885d-4474-82d1-4b4cce73e3df","html_url":"https://github.com/FroganBee/unity-weblg","commit_stats":null,"previous_names":["tonny0831/unity-weblg","max-tonny8/unity-weblg","solpr0digy/unity-weblg","froganbee/unity-weblg"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FroganBee/unity-weblg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FroganBee%2Funity-weblg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FroganBee%2Funity-weblg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FroganBee%2Funity-weblg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FroganBee%2Funity-weblg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FroganBee","download_url":"https://codeload.github.com/FroganBee/unity-weblg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FroganBee%2Funity-weblg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000659,"owners_count":26082805,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["deno","javascript","nodejs","unity","vue","webgl","webpack"],"created_at":"2025-08-11T03:36:42.470Z","updated_at":"2025-10-08T19:58:18.079Z","avatar_url":"https://github.com/FroganBee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-unity-webgl\n\nEasy to use Unity 5.6 or newer (also Unity 2017 or newer)  WebGL player component for your VueJS application. Embed your Unity application in your application for writing interactive interfaces with two way Unity and VueJS communication.\n\n\u003cimg src=\"https://vuejs.org/images/logo.png\" height=\"50px\"/\u003e \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/8/8a/Official_unity_logo.png\" height=\"50px\"/\u003e\n\n## Install\n\n```Bash\nnpm install vue-unity-webgl\n```\n\n## Usage\nTo get stated import the Unity component from `vue-unity-webgl`. Once imported you can use the Unity component to load in your Unity content. Place the Unity tag along with a src to the json file Unity exported.\n\n```js\n\u003ctemplate\u003e\n  \u003cunity src=\"static/Build/game.json\" width=\"1000\" height=\"600\" unityLoader=\"static/Build/UnityLoader.js\"\u003e\u003c/unity\u003e  \n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Unity from 'vue-unity-webgl'\n  \n  new Vue({\n    components: { Unity }\n  })\n\u003c/script\u003e\n```\n\u003e ### Notice\n\u003e Don't forget to add a script tag to load the `UnityLoader.js` file if miss unityLoader attribute, exported by Unity in your base html file, index.html in example.\n\n\n\n## Optional attributes\n\n* `src` - Path to json build\n* `width` - width div container\n* `height` - height div container\n* `unityLoader` - path to UnityLoader, with this\n\n\n# Communication\nUnity allows you to send Javascript messages to the Unity content. In order to do so using VueJs you have to add a ref to the `\u003cunity\u003e` tag, and call the `message(object, method, param)` method through `this.$refs`.\n\n```js\n\u003ctemplate\u003e\n  \u003cunity src=\"static/Build/game.json\" width=\"1000\" height=\"600\" unityLoader=\"static/Build/UnityLoader.js\" ref=\"myInstance\"\u003e\u003c/unity\u003e  \n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Unity from 'vue-unity-webgl'\n\nnew Vue({\n  methods: {\n    onClick () {\n      this.$refs.myInstance.message(\"object\", \"method\", \"param\")\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n# styling\nThe player will be injected in the a component with the class `unity-container`. To style to player use the following sass styling. To style the loader you can style the component with the class `unity-loader`. See the example below.\n\n```scss\n.unity {\n    .unity-container {\n        canvas {\n            \n        }\n    }\n    .unity-loader {\n        .bar {\n            .fill {\n                /* the width will be set by the component */\n            }\n        }\n    }\n}\n```\n\n# html example\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eMy Unity Game\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003c/body\u003e\n    \u003cscript src=\"Build/UnityLoader.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"static/compiled/bundle.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroganbee%2Funity-weblg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroganbee%2Funity-weblg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroganbee%2Funity-weblg/lists"}