Custom Phone App

Add a custom app to the Shiva phone.

Prerequisites

• shiva-phone module enabled (part of shiva-modules)

What You'll Build

A "Fishing Log" phone app that shows the player's fishing history.

Step 1 — Register the App

In your module's server init.lua:

local phone = container:make('IPhone')

phone:registerApp('my-fishing-app', {
    label = 'Fish Log',
    icon  = 'icon-fish',  -- CSS class or URL
    color = '#3b82f6',
})

Step 2 — Handle the App Open

phone:onAppOpened('my-fishing-app', function(source)
    local logs = DB:all(
        'SELECT fish, caught_at FROM fishing_logs WHERE player_id = ? ORDER BY caught_at DESC LIMIT 20',
        source
    )
    phone:sendData(source, 'my-fishing-app', { logs = logs })
end)

Step 3 — Build the UI

shiva make ui --framework vue
cd ui && npm install

ui/src/App.vue:

<template>
  <div class="app">
    <h2>My Fishing Log</h2>
    <ul>
      <li v-for="log in logs" :key="log.caught_at">
        🐟 {{ log.fish }} — {{ log.caught_at }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const logs = ref([])

window.addEventListener('message', ({ data }) => {
    if (data.app === 'my-fishing-app') {
        logs.value = data.logs
    }
})
</script>

Step 4 — Build and Test

cd ui && npm run build

Restart the server and open the phone in-game.