BeamNG UI Development Cheat Sheet

// Setup
import { useEvents } from '@/services/events'
const events = useEvents()
events.on('VehicleChange', () => { /* ... */ })

// Setup
import { useStreams } from '@/services/events'

useStreams(['electrics'], (streams) => {
  if (streams.electrics) {
    speed.value = streams.electrics.wheelspeed * 3.6  // km/h
  }
})

// Setup
import { lua } from '@/bridge'
import { runRaw } from '@/bridge/libs/Lua.js'

const data = await lua.myExtension.getData()

// Import
import { BngButton, BngIcon, ACCENTS, icons } from '@/common/components/base'

// Import
import { vBngBlur, vBngTooltip, vBngOnUiNav } from '@/common/directives'

// Import
import { openMessage, openConfirmation, openPrompt } from '@/services/popup'

const confirmed = await openConfirmation('Confirm', 'Are you sure?')
if (confirmed) { /* ... */ }

// Import
import { $translate } from '@/services'

const text = $translate.instant('ui.common.confirm')

// Import
import { useRouter } from 'vue-router'
const router = useRouter()

router.push({ name: 'vehicleInventory' })

// Import
import Storage from '@/services/storage'

const storage = new Storage('myApp', { theme: 'dark' })
storage.values.theme = 'light'  // Auto-saves

<!-- Minimal UI App -->
<template>
  <div class="my-app">{{ data }}</div>
</template>

<script setup>
import { ref } from 'vue'
import { useStreams } from '@/services/events'

const data = ref(0)

useStreams(['electrics'], (s) => {
  if (s.electrics) data.value = s.electrics.wheelspeed
})
</script>

<style scoped>
.my-app {
  background: rgba(0,0,0,0.5);
  color: white;
}
</style>

// routes.js
import MyView from './views/MyView.vue'

export default [
  {
    path: '/myModule',
    name: 'myModule',
    component: MyView,
    meta: {
      uiApps: { shown: false },
      infoBar: { visible: true }
    }
  }
]

// electrics
streams.electrics.wheelspeed    // m/s
streams.electrics.rpm           // RPM
streams.electrics.gear          // gear number
streams.electrics.fuel          // 0-1
streams.electrics.lowbeam       // boolean
streams.electrics.ignitionLevel // 0-2

// sensors
streams.sensors.yaw             // radians
streams.sensors.pitch           // radians
streams.sensors.roll            // radians
streams.sensors.gx              // G-force
streams.sensors.gy
streams.sensors.gz

// Career
await lua.career_career.isActive()
await lua.career_modules_inventory.sendDataToUi()
await lua.career_modules_playerAttributes.getAttribute('money')

// Vehicles
await lua.core_vehicles.getCurrentVehicleDetails()
await lua.core_vehicles.getModel()

// Extensions
await lua.extensions.load('myExtension')
await lua.extensions.myExtension.myFunction()

// Garage
await lua.extensions.gameplay_garageMode.setGarageMenuState('tuning')

// Common variables
color: var(--bng-off-white);
background: rgba(var(--bng-off-black-rgb), 0.5);
border-radius: var(--bng-corners-1);
font-family: var(--fnt-defs);

// Icon sizing
.icon {
  --bng-icon-size: 2em;
  --bng-icon-color: var(--bng-orange);
}

// Full screen layout
.my-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2em;
}

// Components
import { BngButton, BngIcon, BngInput, ACCENTS, icons } from '@/common/components/base'

// Directives
import { vBngBlur, vBngTooltip, vBngOnUiNav, vBngDisabled } from '@/common/directives'

// Services
import { useEvents, useStreams } from '@/services/events'
import { openMessage, openConfirmation } from '@/services/popup'
import { $translate } from '@/services'
import Storage from '@/services/storage'

// Bridge
import { lua } from '@/bridge'
import { useBridge } from '@/bridge'
import { runRaw } from '@/bridge/libs/Lua.js'

// Router
import { useRouter, useRoute } from 'vue-router'

import { onMounted, onUnmounted, ref } from 'vue'
import { useEvents, useStreams } from '@/services/events'
import { lua } from '@/bridge'

const data = ref(null)
const events = useEvents()

onMounted(async () => {
  // Fetch initial data
  data.value = await lua.myExtension.getData()
  
  // Listen for updates
  events.on('DataUpdated', (d) => { data.value = d })
})

// Streams auto-cleanup with useStreams()
useStreams(['electrics'], (s) => { /* ... */ })

// Events auto-cleanup with useEvents()

async function safeLuaCall() {
  try {
    const result = await lua.myExtension.riskyFunction()
    return result
  } catch (e) {
    console.error('Lua call failed:', e)
    await openMessage('Error', 'Operation failed')
    return null
  }
}