Methods ​

All methods are attached to the component instance. If you are using TypeScript, you can import the NesVueInstance type supplied by nes-vue to get the instance’s type.

<script setup lang="ts">
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
import type { NesVueInstance } from 'nes-vue'

const nes = ref<NesVueInstance>()
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NesVue } from 'nes-vue'
import type { NesVueInstance } from 'nes-vue'

const nes = ref<NesVueInstance>()
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
  />
</template>

start ​

Start NES game.

start(url?: string) => void

start(url?: string) => void

reset ​

Restart the game.

reset() => void

reset() => void

stop ​

Stop the game.

stop() => void

stop() => void

pause ​

The game is paused and can be resumed.

pause() => void

pause() => void

play ​

Resume the game.

play() => void

play() => void

save ​

Save game state to localStorage or indexedDB by any id.

save(id: string) => void

save(id: string) => void

By default, the game state is saved in indexedDB, you can also save it in localStorage via storage property.

Each game state archive requires about 200KB, if you need to save more data, it’s recommended to use indexedDB.

load ​

Load game state.

load(id: string) => void

load(id: string) => void

example：

<script setup>
import { ref } from 'vue'
import { NesVue } from 'nes-vue'

const nes = ref()
const id = 'example'

function save() {
  // save state
  nes.value.save(id)
}

function load() {
  // load state
  nes.value.load(id)
}
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
    width="512"
    height="480"
  />
  <button @click="save">Save</button>
  <button @click="load">Load</button>
</template>

<script setup>
import { ref } from 'vue'
import { NesVue } from 'nes-vue'

const nes = ref()
const id = 'example'

function save() {
  // save state
  nes.value.save(id)
}

function load() {
  // load state
  nes.value.load(id)
}
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
    width="512"
    height="480"
  />
  <button @click="save">Save</button>
  <button @click="load">Load</button>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import type { NesVueInstance } from 'nes-vue'
import { ref } from 'vue'
import { NesVue } from 'nes-vue'

const nes = ref() as Ref<NesVueInstance>
const id = 'example'

function save() {
  // save state
  nes.value.save(id)
}

function load() {
  // load state
  nes.value.load(id)
}
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
    width="512"
    height="480"
  />
  <button @click="save">Save</button>
  <button @click="load">Load</button>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import type { NesVueInstance } from 'nes-vue'
import { ref } from 'vue'
import { NesVue } from 'nes-vue'

const nes = ref() as Ref<NesVueInstance>
const id = 'example'

function save() {
  // save state
  nes.value.save(id)
}

function load() {
  // load state
  nes.value.load(id)
}
</script>

<template>
  <nes-vue
    ref="nes"
    url="https://taiyuuki.github.io/nes-vue/Super Mario Bros (JU).nes"
    width="512"
    height="480"
  />
  <button @click="save">Save</button>
  <button @click="load">Load</button>
</template>

remove ​

Remove game state.

remove(id: string) => void

remove(id: string) => void

clear ​

Clear all saved state.

clear() => void

clear() => void

getCurrentData ​

Retrieve the raw save data so you can store it anywhere you like.

interface SavedData {
    hash: string
    data: Uint8Array
}
getCurrentData() => SavedData | null

interface SavedData {
    hash: string
    data: Uint8Array
}
getCurrentData() => SavedData | null

loadGameData ​

Load raw save data created with getCurrentData .

loadGameData(savedData: SavedData) => void

loadGameData(savedData: SavedData) => void

screenshot ​

screenshot(download?: boolean, imageName?: string) => HTMLImageElement

screenshot(download?: boolean, imageName?: string) => HTMLImageElement

screenshot(true) will start downloading the screenshot inside the browser.

The return value is an image element of the screenshot.

fm2URL ​

fm2URL(url: string) => Promise<fm2Play>

fm2URL(url: string) => Promise<fm2Play>

Fetch the *.fm2 file, refer to Replay.

fm2Text ​

fm2Text(text: string) => Promise<fm2Play>

fm2Text(text: string) => Promise<fm2Play>

Read the *.fm2 file's text content, refer to Replay.

fm2Play ​

fm2Play() => void

fm2Play() => void

Play fm2 video， refer to Replay.

fm2Stop ​

fm2Stop() => void

fm2Stop() => void

Stop fm2 video， refer to Replay.

cheatCode ​

cheatCode(code: string) => void

cheatCode(code: string) => void

Enable cheat code, refer to Cheat Code.

cancelCheatCode ​

cancelCheatCode(code: string) => void

cancelCheatCode(code: string) => void

Disable cheat code, refer to Cheat Code.

cancelCheatCodeAll ​

cancelCheatCodeAll() => void

cancelCheatCodeAll() => void

Disable all cheat code, refer to Cheat Code.