NUI

NUI, FiveM'in tarayıcı katmanı. web/ klasöründe sıradan bir web sayfası yaşar; Lua ile SendNUIMessage ve fetch('https://resource/...') üzerinden konuşur.

HTML iskeleti

web/index.html

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app" class="hidden">
      <header>liveDev Menü</header>
      <button id="close">Kapat</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Stil

web/style.css

:root {
  --accent: #a3e635;
  --bg: rgba(15, 15, 15, 0.92);
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #fff;
}

.hidden {
  display: none;
}

#app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  backdrop-filter: blur(6px);
}

#close {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}

Lua köprüsü (JS tarafı)

web/app.js

const app = document.getElementById('app');

// Lua → NUI
window.addEventListener('message', ({ data }) => {
  if (data.action === 'open') app.classList.remove('hidden');
});

// NUI → Lua
document.getElementById('close').addEventListener('click', () => {
  app.classList.add('hidden');
  fetch(`https://${GetParentResourceName()}/close`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({}),
  });
});

GetParentResourceName

Kaynak adını sabit yazma. GetParentResourceName() global'i, fetch URL'sini doğru resource'a yönlendirir.

HTML iskeleti

Stil

Lua köprüsü (JS tarafı)

On this page