https://github.com/moritetu/nuxt-unity-webgl
Vue composable introduces component and utilities for unity WebGL container
https://github.com/moritetu/nuxt-unity-webgl
nuxt unity vue webgl
Last synced: about 1 year ago
JSON representation
Vue composable introduces component and utilities for unity WebGL container
- Host: GitHub
- URL: https://github.com/moritetu/nuxt-unity-webgl
- Owner: moritetu
- License: mit
- Created: 2023-04-08T04:23:33.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-29T00:26:21.000Z (almost 3 years ago)
- Last Synced: 2025-04-11T22:07:10.923Z (about 1 year ago)
- Topics: nuxt, unity, vue, webgl
- Language: TypeScript
- Homepage:
- Size: 5.21 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-unity-webgl
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
nuxt-unity-webgl introduces component and utilities for unity WebGL container.
## Features
- ⛰ Add the unity canvas to your site easily
## Quick Setup
1. Add `nuxt-unity-webgl` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-unity-webgl
# Using yarn
yarn add --dev nuxt-unity-webgl
# Using npm
npm install --save-dev nuxt-unity-webgl
```
2. Add `nuxt-unity-webgl` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ['nuxt-unity-webgl'],
})
```
That's it! You can now use NuxtUnityWebGL in your Nuxt app ✨
## Basic usage
You can get `NuxtUnity` by calling `useNuxtUnityOrThrow()` or `useNuxtUnity()` composables.
```typescript
useProvideNuxtUnity(undefined, (unity) => {
// eslint-disable-next-line no-console
console.log(unity)
})
const { NuxtUnity, loaded, SendMessage } = useNuxtUnityOrThrow()
const callUnityFunction = () => {
// scalar or json object are enable as argument
SendMessage('GameObject', 'HelloMethod', { message: 'hello' })
}
const nuxtApp = useNuxtApp()
nuxtApp.$nuxtUnityEvent('nuxt-unity:ready').on(({ providerId, unityInstance }) => {
// eslint-disable-next-line no-console
console.log(providerId, unityInstance)
})
SendMessage
```
And you can send messages to the unity game object with `SendMessage()`.
```c#
// HelloController.cs
using System;
using UnityEngine;
using System.Runtime.InteropServices;
public class HelloController : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void JSLibFunction();
[Serializable]
public class HelloProps
{
public string message;
}
public void hello(string json)
{
HelloProps props = JsonUtility.FromJson(json);
Debug.Log(props.message);
JSLibFunction();
}
}
```
`emit` or `handle` some events via `$nuxtUnityEvent` in `.jslib`.
```javascript
// Sample.jslib
mergeInto(LibraryManager.library, {
JSLibFunction: function () {
$nuxtUnityEvent('hello').emit({ message: 'Hello from unity jslib' })
},
})
```
## Composables
### `useProvideNuxtUnity(initialValue, callback)`
Injects unity store.
```typescript
// initialValue: unity instance
// callback : (unityInstance) => void
useProvideNuxtUnity(undefined, (unity) => {
console.log(unity) // The unity instance
})
```
### `useNuxtUnity()`
Return the store, it is nullable. We uses `createInjectionState` of `VueUse`, so see [VueUse Documents](createInjectionState) in more details.
- `NuxtUnity` - NuxtUnity vue component
- `unity` - Unity instance initialized by `createUnityInstance()`
- `loading` - Loading state of the unity instance
- `loaded` - Loaded state of the unity instance
- `quitted` - Quitted state of the unity instance
- `quit` - Function to quit unity
- `error` - Error if unity loading fails
- `SendMessage` - Utility function to send the unity game object
### `useNuxtUnityOrThrow()`
Return the store. If the store is null, error thrown.
## Unity Component Attributes
### `width`
- Type: `string`
- Required: `true`
Canvas width `px`.
### `height`
- Type: `string`
- Required: `true`
Canvas height `px`.
### `unityLoader`
- Type: `string`
- Required: `true`
Unity loader script.
### `config`
- Type: `Object`
- Required: `true`
Configuration passed to an utity instance.
### `onProgress`
- Type: `Function`
- Required: `false`
- Default:
```typescript
;(progress: number) => {
console.log(`unity loading... ${progress * 100}%`)
}
```
Callback function called in loading.
### `resizable`
- Type: `Boolean`
- Required: `false`
Enable auto resizing canvas when window resizing. `true` is enable.
### `refreshDelayTime`
- Type: `Number`
- Required: `false`
- Default: `200`
Delay millseconds time to resize canvas after window resized.
### `onQuit`
- Type: `Boolean`
- Required: `false`
- Default:
```typescript
;() => {
console.log('quit unity')
}
```
Callback function called on `onBeforeUnmount` lifecycle hook.
## Plugin
You can use `$nuxtUnityEvent` plugin in your components or unity `.jslib` scripts.
```typescript
const { $nuxtUnityEvent } = useNuxtApp()
$nuxtUnityEvent('eventName').on(({ message }) => console.log(message))
$nuxtUnityEvent('eventName').emit({ message: 'message' } })
```
- `$nuxtUnityEvent` - eventmit object
- `nuxt-unity:ready` - Hook called when unity instance created
- `nuxt-unity:quit` - Hook called when unity instance quitted
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-unity-webgl/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-unity-webgl
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-unity-webgl.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-unity-webgl
[license-src]: https://img.shields.io/npm/l/nuxt-unity-webgl.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-unity-webgl
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com