@owdproject/nuxt

Official Nuxt & Vue 3 Reactive Adapter for Open Web Desktop.

Reactive composables, pointer drag/resize hooks, and WindowController
bindings powered by @owdproject/core.

---

Overview

@owdproject/nuxt (4.0.0-alpha.0) bridges @owdproject/core to Vue 3 and Nuxt via shallowRef subscriptions, computed selectors, and automatic onScopeDispose cleanup.

The package includes the Nuxt module, desktop.config.ts support, shell components, and Vue bindings.

Register it in nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false,
  modules: ['@owdproject/nuxt'],
  desktop: {
    theme: '@owdproject/nuxt-theme-win95',
  },
})

Install the theme separately. Inline desktop options override desktop.config.ts; app and module arrays are merged.

---

Quick Start

pnpm add @owdproject/core@4.0.0-alpha.0 @owdproject/nuxt@4.0.0-alpha.0

<script setup lang="ts">
import { useDesktop, useDesktopDrag, useDesktopResize } from '@owdproject/nuxt'

const { desktop, windows, focusedWindow } = useDesktop({
  workarea: { x: 0, y: 32, width: 1440, height: 868 },
})
</script>

---

Exported Composables & Classes

Export	Description
useDesktop(instanceOrOptions?)	Reactive bindings for windows, applications, workspace, commands, events, and focusedWindow.
useWindowManager(manager?)	Reactive wrapper around a WindowManager instance.
useWindowInstance(instance)	Subscribes a single WindowInstance to a Vue shallowRef<WindowState>.
useDesktopDrag(options)	W3C Pointer drag composable with snap-zone detection and auto-cleanup.
useDesktopResize(options)	8-directional W3C Pointer resize composable with min/max constraint enforcement.
WindowController	Reactive Vue wrapper around @owdproject/core's windowMachine.

---

License

MIT