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



`

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.emit({ event: 'hello', data: { message: 'Hello from unity jslib' } })
},
})
`

Composables

$3

Injects unity store.

`typescript
// initialValue: unity instance
// callback : (unityInstance) => void
useProvideNuxtUnity(undefined, (unity) => {
console.log(unity) // The unity instance
})
`

$3

Return the store, it is nullable. We uses createInjectionState of VueUse, so see VueUse Documents 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

$3

Return the store. If the store is null, error thrown.

Unity Component Attributes

$3

- Type: string
- Required: true

Canvas width px.

$3

- Type: string
- Required: true

Canvas height px.

$3

- Type: string
- Required: true

Unity loader script.

$3

- Type: Object
- Required: true

Configuration passed to an utity instance.

$3

- Type: Function
- Required: false
- Default:

`typescript
;(progress: number) => {
console.log(unity loading... ${progress * 100}%)
}
`

Callback function called in loading.

$3

- Type: Boolean
- Required: false

Enable auto resizing canvas when window resizing. true is enable.

$3

- Type: Number
- Required: false
- Default: 200

Delay millseconds time to resize canvas after window resized.

$3

- 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(({ event }) => console.log(event))
$nuxtUnityEvent('eventName').emit({ event: 'hello', data: { 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