Apps

Playground

Develop an app module with a dedicated mini Nuxt app — deps, launch plugins, validation.

The playground/ folder is a Nuxt application used only in development.

Purpose

  • Load @owdproject/core like the real desktop.
  • Include your module via workspace link or npm for hot reload on source changes.
  • Validate nuxt prepare and types without publishing to npm.
  • Optionally auto-open your app via a launch plugin.

Minimal setup

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@owdproject/core'],
  ssr: false,
  compatibilityDate: 'latest',
})

desktop.config.ts:

import { defineDesktopConfig } from '@owdproject/core'

export default defineDesktopConfig({
  theme: '@owdproject/theme-nova',
  apps: ['@owdproject/app-about'],
  modules: [],
})

package.json dependencies must include every package referenced above:

{
  "dependencies": {
    "@owdproject/core": "^3.3.0",
    "@owdproject/theme-nova": "^0.0.2",
    "@owdproject/app-about": "^0.1.3",
    "nuxt": "^4.4.4"
  }
}

See Package linking for workspace:*, npm semver, and Git URLs.

Dependency checklist

desktop.config.ts entryMust be in playground/package.json
theme: '@owdproject/theme-nova'@owdproject/theme-nova
apps: ['@owdproject/app-about']@owdproject/app-about (or your dev package name)
modules: ['@owdproject/module-fs']@owdproject/module-fs (+ often @owdproject/module-persistence)

Theme playground extras

Themes like Nova import primevue/* directly. @owdproject/core installs @primevue/nuxt-module but pnpm may not hoist primevue to the playground root. If you see:

Error: Cannot find package 'primevue' imported from .../playground/.nuxt/dev/index.mjs

Add to playground/package.json:

"primevue": "^4.5.5",
"@primeuix/themes": "^2.0.3"

Then pnpm install and restart dev. Full theme playground template: Create a theme.

Add playground/app/plugins/launch-<slug>.client.ts to open your app on boot in dev and on GitHub Pages static generate. Requires:

  • dependsOn: ['desktop-app-<slug>-register'] matching your register plugin name.
  • autoStartPlaygroundApps(nuxtApp, [{ id, entry, windowModel }]) from @owdproject/core — do not guard with if (!import.meta.dev) return.

The entry field is the command string passed to execAppCommand (e.g. 'about' or 'youtube --new --no-check').

See Plugins and app-about launch plugin.

Validate before publish

desktop validate .

Checks module layout, playground deps, plugin naming, launch plugin patterns, and CI anti-patterns (e.g. standalone nypm with workspace:*). Full checklist: core PLAYGROUND.md.

Flags: --strict (warnings fail), --json, --smoke (slow build test).

Commands

Terminal
cd playground
pnpm install
pnpm run dev

Or from the app package root:

pnpm run dev
# runs dev:prepare (stub + nuxt prepare) then nuxt dev playground

Validate before publish:

desktop validate .

Checks include src/runtime/plugin.ts, app.config.ts, playground deps on your package and core, and optional launch plugin.

Limits

The playground does not replace end-to-end testing on client/desktop when you need interactions with other modules or custom themes. For that, wire the app into desktop and run pnpm run dev from the client root.