{"id":15486052,"url":"https://github.com/moritetu/nuxt-unity-webgl","last_synced_at":"2025-04-22T17:10:41.606Z","repository":{"id":151968571,"uuid":"625100379","full_name":"moritetu/nuxt-unity-webgl","owner":"moritetu","description":"Vue composable introduces component and utilities for unity WebGL container","archived":false,"fork":false,"pushed_at":"2023-07-29T00:26:21.000Z","size":5464,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T22:07:10.923Z","etag":null,"topics":["nuxt","unity","vue","webgl"],"latest_commit_sha":null,"homepage":"","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/moritetu.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":"2023-04-08T04:23:33.000Z","updated_at":"2024-05-08T08:29:15.000Z","dependencies_parsed_at":"2023-09-04T13:16:24.787Z","dependency_job_id":null,"html_url":"https://github.com/moritetu/nuxt-unity-webgl","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"50b25a066c8363f4acbca7b35e7835e50e7cd7e0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moritetu%2Fnuxt-unity-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moritetu%2Fnuxt-unity-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moritetu%2Fnuxt-unity-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moritetu%2Fnuxt-unity-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moritetu","download_url":"https://codeload.github.com/moritetu/nuxt-unity-webgl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285697,"owners_count":21405297,"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":["nuxt","unity","vue","webgl"],"created_at":"2024-10-02T06:05:56.813Z","updated_at":"2025-04-22T17:10:41.555Z","avatar_url":"https://github.com/moritetu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nuxt-unity-webgl\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nnuxt-unity-webgl introduces component and utilities for unity WebGL container.\n\n## Features\n\n\u003c!-- Highlight some of the features your module provide here --\u003e\n\n- ⛰ \u0026nbsp;Add the unity canvas to your site easily\n\n## Quick Setup\n\n1. Add `nuxt-unity-webgl` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D nuxt-unity-webgl\n\n# Using yarn\nyarn add --dev nuxt-unity-webgl\n\n# Using npm\nnpm install --save-dev nuxt-unity-webgl\n```\n\n2. Add `nuxt-unity-webgl` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: ['nuxt-unity-webgl'],\n})\n```\n\nThat's it! You can now use NuxtUnityWebGL in your Nuxt app ✨\n\n## Basic usage\n\nYou can get `NuxtUnity` by calling `useNuxtUnityOrThrow()` or `useNuxtUnity()` composables.\n\n```typescript\n\u003cscript lang=\"ts\" setup\u003e\nuseProvideNuxtUnity(undefined, (unity) =\u003e {\n  // eslint-disable-next-line no-console\n  console.log(unity)\n})\nconst { NuxtUnity, loaded, SendMessage } = useNuxtUnityOrThrow()\nconst callUnityFunction = () =\u003e {\n  // scalar or json object are enable as argument\n  SendMessage('GameObject', 'HelloMethod', { message: 'hello' })\n}\nconst nuxtApp = useNuxtApp()\n\nnuxtApp.$nuxtUnityEvent('nuxt-unity:ready').on(({ providerId, unityInstance }) =\u003e {\n  // eslint-disable-next-line no-console\n  console.log(providerId, unityInstance)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cNuxtUnity\n      width=\"500px\"\n      height=\"500px\"\n      unity-loader=\"/unity/Build.loader.js\"\n      :config=\"{\n        dataUrl: '/unity/Build.data',\n        frameworkUrl: '/unity/Build.framework.js',\n        codeUrl: '/unity/Build.wasm',\n      }\"\n      :resizable=\"true\"\n      :refresh-delay-time=\"100\"\n    \u003e\u003c/NuxtUnity\u003e\n  \u003c/div\u003e\n  \u003cbutton @click=\"callUnityFunction\"\u003eSendMessage\u003c/button\u003e\n\u003c/template\u003e\n```\n\nAnd you can send messages to the unity game object with `SendMessage()`.\n\n```c#\n// HelloController.cs\nusing System;\nusing UnityEngine;\nusing System.Runtime.InteropServices;\n\npublic class HelloController : MonoBehaviour\n{\n    [DllImport(\"__Internal\")]\n    private static extern void JSLibFunction();\n\n    [Serializable]\n    public class HelloProps\n    {\n        public string message;\n    }\n\n    public void hello(string json)\n    {\n        HelloProps props = JsonUtility.FromJson\u003cHelloProps\u003e(json);\n        Debug.Log(props.message);\n        JSLibFunction();\n    }\n}\n```\n\n`emit` or `handle` some events via `$nuxtUnityEvent` in `.jslib`.\n\n```javascript\n// Sample.jslib\nmergeInto(LibraryManager.library, {\n  JSLibFunction: function () {\n    $nuxtUnityEvent('hello').emit({ message: 'Hello from unity jslib' })\n  },\n})\n```\n\n## Composables\n\n### `useProvideNuxtUnity(initialValue, callback)`\n\nInjects unity store.\n\n```typescript\n// initialValue: unity instance\n// callback    : (unityInstance) =\u003e void\nuseProvideNuxtUnity(undefined, (unity) =\u003e {\n  console.log(unity) // The unity instance\n})\n```\n\n### `useNuxtUnity()`\n\nReturn the store, it is nullable. We uses `createInjectionState` of `VueUse`, so see [VueUse Documents](createInjectionState) in more details.\n\n- `NuxtUnity` - NuxtUnity vue component\n- `unity` - Unity instance initialized by `createUnityInstance()`\n- `loading` - Loading state of the unity instance\n- `loaded` - Loaded state of the unity instance\n- `quitted` - Quitted state of the unity instance\n- `quit` - Function to quit unity\n- `error` - Error if unity loading fails\n- `SendMessage` - Utility function to send the unity game object\n\n### `useNuxtUnityOrThrow()`\n\nReturn the store. If the store is null, error thrown.\n\n## Unity Component Attributes\n\n### `width`\n\n- Type: `string`\n- Required: `true`\n\nCanvas width `px`.\n\n### `height`\n\n- Type: `string`\n- Required: `true`\n\nCanvas height `px`.\n\n### `unityLoader`\n\n- Type: `string`\n- Required: `true`\n\nUnity loader script.\n\n### `config`\n\n- Type: `Object`\n- Required: `true`\n\nConfiguration passed to an utity instance.\n\n### `onProgress`\n\n- Type: `Function`\n- Required: `false`\n- Default:\n\n```typescript\n;(progress: number) =\u003e {\n  console.log(`unity loading... ${progress * 100}%`)\n}\n```\n\nCallback function called in loading.\n\n### `resizable`\n\n- Type: `Boolean`\n- Required: `false`\n\nEnable auto resizing canvas when window resizing. `true` is enable.\n\n### `refreshDelayTime`\n\n- Type: `Number`\n- Required: `false`\n- Default: `200`\n\nDelay millseconds time to resize canvas after window resized.\n\n### `onQuit`\n\n- Type: `Boolean`\n- Required: `false`\n- Default:\n\n```typescript\n;() =\u003e {\n  console.log('quit unity')\n}\n```\n\nCallback function called on `onBeforeUnmount` lifecycle hook.\n\n## Plugin\n\nYou can use `$nuxtUnityEvent` plugin in your components or unity `.jslib` scripts.\n\n```typescript\nconst { $nuxtUnityEvent } = useNuxtApp()\n$nuxtUnityEvent('eventName').on(({ message }) =\u003e console.log(message))\n$nuxtUnityEvent('eventName').emit({ message: 'message' } })\n```\n\n- `$nuxtUnityEvent` - eventmit object\n  - `nuxt-unity:ready` - Hook called when unity instance created\n  - `nuxt-unity:quit` - Hook called when unity instance quitted\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-unity-webgl/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-unity-webgl\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-unity-webgl.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-unity-webgl\n[license-src]: https://img.shields.io/npm/l/nuxt-unity-webgl.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-unity-webgl\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoritetu%2Fnuxt-unity-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoritetu%2Fnuxt-unity-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoritetu%2Fnuxt-unity-webgl/lists"}