Framework Guides for the PokeDemo Player

Use this page once the exported bundle is hosted correctly and you need the right integration pattern for your stack.

Make sure to import the public stylesheet once before rendering the player:

import '@pokedemo/player/style.css'

Plain JavaScript or TypeScript

Use the core package directly when you want access to the full player API.

import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player'

const container = document.getElementById('player')!

const player = new PokePlayer(container, {
  source: {
    baseUrl: 'https://example.com/demo/',
  },
})

React

Use the React adapter from @pokedemo/player/react.

import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/react'

export function DemoPlayer() {
  return <PokePlayer baseUrl="https://example.com/demo/" />
}

Vue

Use the Vue adapter from @pokedemo/player/vue.

<script setup lang="ts">
import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/vue'
</script>

<template>
  <PokePlayer base-url="https://example.com/demo/" />
</template>

Nuxt

Use the Vue adapter in client-rendered code only.

<script setup lang="ts">
import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/vue'
</script>

<template>
  <ClientOnly>
    <PokePlayer base-url="https://example.com/demo/" />
  </ClientOnly>
</template>

You can also place the player in a .client.vue component if that fits your app structure better.

Next.js

Use the React adapter in a client component.

'use client'

import '@pokedemo/player/style.css'
import { PokePlayer } from '@pokedemo/player/react'

export function DemoPlayer() {
  return <PokePlayer baseUrl="https://example.com/demo/" />
}

If you import the player from a server component boundary, wrap it with next/dynamic and { ssr: false }.

SSR rule

The public rule is simple: render the player only in the browser.

The SDK targets modern browsers and requires a browser runtime. Server-side rendering, Node-based playback, and SSR playback are not supported.