Getting startedFrameworks
Nuxt
Same shape as Next.js — fully static build plus a `<client-only>` wrapper around anything that touches the host bridge.
Same story as Next.js —
you want a fully static build and a <client-only> wrapper around
anything that touches the host bridge.
Install
pnpm add @i99dash/sdk
pnpm add -D @i99dash/sdk-cliStatic generation
nuxt.config.ts:
export default defineNuxtConfig({
ssr: true,
nitro: {
preset: 'static',
},
});sdk.config.json
{
"appRoot": "./.output/public",
"mocksDir": "./mocks",
"buildCommand": "nuxt generate"
}Component pattern
<script setup lang="ts">
import { MiniAppClient, type MiniAppContext } from '@i99dash/sdk';
const ctx = ref<MiniAppContext | null>(null);
onMounted(async () => {
const client = MiniAppClient.fromWindow();
ctx.value = await client.getContext();
});
</script>
<template>
<client-only>
<pre v-if="ctx">{{ ctx }}</pre>
<p v-else>loading…</p>
</client-only>
</template>Running both dev servers
pnpm nuxt dev --port 3000 # terminal 1
pnpm nuxt generate
sdk-i99dash dev --port 5173 # terminal 2Same trick as Next.js: during dev you can inline
<script src="http://127.0.0.1:5173/_sdk/bridge.js"> behind
process.dev.
Related
- Subscriptions — Vue 3 pattern — for streaming car-status data.
- Best practices.
- Local development.