vue-winbox

Vue 3 wrapper for WinBox.js.

Demo: https://vue-winbox.vercel.app

Install

pnpm add vue-winbox

Usage

<script setup>
import { ref } from 'vue'
import { VueWinBox } from 'vue-winbox'

const count = ref(0)
const wbRef = ref()

//WinBox options
const options = {
  title: 'Current count: 0',
  class: 'modern',
}

setInterval(() => {
  count.value++
  wbRef.value?.winbox?.setTitle(`Current count: ${count.value}`)
}, 500)
</script>

<template>
  <VueWinBox ref="wbRef" :options="options" @onmove="onMove">
    <div>Window 1: {{ count }}</div>
  </VueWinBox>
</template>

Methods

To update props and access methods/controls, just add a ref to the VueWinBox component and use it like how you would with WinBox.js:

// Set the window title
wbRef.value.winbox.setTitle('New title')

// Custom Position / Size
wbRef.value.winbox.resize('50%', '50%').move('center', 'center')

// Add class
wbRef.value.winbox.addClass('modern')

// Focus a window (bring up to front)
wbRef.value.winbox.focus()

// Chaining Methods
wbRef.value.winbox
  .setTitle('Title')
  .resize('50%', '50%')
  .move('center', 'center')
  .focus()

To reinitialize a closed window:

wbRef.value.winbox.initialize()

Events

Name | Type | Default | Description | ------ | ------ | ------ | ------ | resize | Function | - | Fired when the window resizes. | close | Function | - | Fired when the window is closing. | focus | Function | - | Fired when the window is in focus. | blur | Function | - | - | move | Function | - | Fired when the window moves. |

Vanilla WinBox.js

import { useWinBox } from 'vue-winbox'

const createWindow = useWinBox()

function generate() {
  const winbox = createWindow({
    title: 'Window title',
  })
  winbox.fullscreen()
}

License

MIT