Themes

Theme plugins

Client Nuxt plugins in themes — dialogs, addPlugin, ordering, and what not to put in plugins.

Themes use Nuxt plugins for shell-level client setup — dialogs, PrimeVue services, lifecycle hooks. App registration (defineDesktopApp) stays in app modules, not themes.

When to add a theme plugin

Use caseExample
Confirm / alert dialogsNova, Win95 dialog plugins
PrimeVue servicesConfirmationService, useConfirm
Theme-only client bootstrapRegister composables, keyboard shortcuts for shell

Do not use theme plugins to register apps or replace core boot logic.

Registering from module.ts

addPlugin({
  src: resolve('./runtime/plugins/50.desktop-theme-nova-dialogs.client.ts'),
  mode: 'client',
})
  • mode: 'client' — shell UI runs client-side (ssr: false on desktop).
  • Use createResolver(import.meta.url) for stable paths in published dist/.

File naming and order

Prefix with a number so plugins run after core and kit-theme:

runtime/plugins/
  50.desktop-theme-nova-dialogs.client.ts

Lower numbers run first. Core and @owdproject/kit-theme register earlier in the module chain; theme dialog plugins typically use 50.* or higher.

Dialog plugin pattern (Nova)

Nova’s dialog plugin wires PrimeVue confirmation into useDesktopDialogs from kit-theme:

import { defineNuxtPlugin } from 'nuxt/app'
import ConfirmationService from 'primevue/confirmationservice'
import { useConfirm } from 'primevue/useconfirm'

export default defineNuxtPlugin({
  name: 'owd-theme-nova-dialogs',
  dependsOn: ['owd-kit-theme'], // if kit registers a named plugin
  setup(nuxtApp) {
    nuxtApp.vueApp.use(ConfirmationService)
    // bridge useConfirm → useDesktopDialogs implementation
  },
})

Reference: theme-nova dialog plugin.

Because this imports primevue/*, the playground (and desktop consumer) must depend on primevue — see Create from scratch.

Explorer app plugin (conditional)

When @owdproject/module-fs is present, Nova may register an explorer-specific plugin under runtime/apps/explorer/:

if (nuxt.options.modules.includes('@owdproject/module-fs')) {
  await installModule('@owdproject/kit-explorer')
  addPlugin({ src: resolve('./runtime/apps/explorer/plugin.ts'), mode: 'client' })
}

See Theme and optional modules.

Win95 boot vs dialog plugins

Win95 combines:

  • Dialog plugin — same kit-theme bridge pattern as Nova.
  • Boot pages — Nuxt routes under runtime/pages/ (start, boot), not a substitute for dialog registration.

See Pages and boot flow.

dependsOn

When your plugin must run after kit-theme or core plugins, set dependsOn to the exact plugin name string registered by the dependency module.

Launch plugins for apps use a different pattern — see App plugins.

Publishing note

Plugins under src/runtime/plugins/ ship in the theme npm package. Keep playground-only scripts out of src/.