Vue-x11

Provides x11-like windowing system for Vue!

About

Want to create a web-based application with fancy windowing system? Vue-x11 is your best choice! it a customizable window-like component designed for VueJS inspired by modern OS windowing systems.

Preview

Live demo

Features

• Window-like components.
• Auto sort z-index based on recent interaction of the windows.
• Come with ready-to use style.
• Customizable header with slots.

How to

Install the plugin

npm install vue-x11

import { createApp } from "vue";
import App from "./App.vue";

import X11 from "../../vue-windows/vue-x11"; // <-- add this

const app = createApp(App);

app.use(X11); // <-- and this

app.mount("#app");

Here's a short example for this live demo

<template>
  <XWindowManager>
    <XWindow
      v-for="i in 2"
      :key="i"
      :id="`window-${i}`"
      :title="`Window${i}`"
      :default-y="`${20 * (i - 1)}%`"
      :default-x="`${20 * (i - 1)}%`"
      min-width="25%"
      max-width="20%"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum condimentum
      efficitur.
    </XWindow>
  </XWindowManager>
</template>

<style>
body {
  font-family: Helvetica, sans-serif;
  color: #d7d7d7;
  background-color: #555;
  left: 0px;
  top: 0px;
  margin: 0;
}
.custom-header {
  background-color: #444;
  padding: 0.25rem;
  border-radius: 0.3rem 0.3rem 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.custom-header .actions {
  float: right;
  margin: 0 0.5rem;
  box-sizing: border-box;
  height: 100%;
}
.custom-header .actions:hover {
  background: #333;
  cursor: pointer;
}
</style>

Props of Window component

Prop	Desrciption	Type	Default value	Required
id	An unique id for the window	String	undefined	true
allow-out-of-bound	Allow/disallow window moving out of the browser window	Boolean	false	false
title	Window title	String	"Window"	false
hide-default-header	Set to true to use slot to customize window header	Boolean	false	false
header-color	Color of header text	String	null	false
header-background	Color of header background	String	"#00000090"	false
header-border-radius	Header border radius	String	"0.25em"	false
window-background	Color of windows' background	String	"#00000010"	false
window-border-radius	Window border radius	String	"0.25em"	false
window-backdrop-blur	Blurs backdround if window background has transparency	String	"5px"	false
default-y	Default Y(width) position window will be placed	String	null	false
default-x	Default X(Height) position window will be placed	String	null	false
min-width	Windows' min width	String	null	false
min-height	Windows' min height	String	null	false
width	Windows' width	String	"fit-content"	false
height	Windows' height	String	"fit-content"	false
max-width	Windows' max width	String	null	false
max-height	Windows' max height	String	null	false
visibility-transition	Transition name when toggleVisibility() is called	String	"fade"	false
minimize-transition	Transition name when toggleMinimize() is called	String	"fade"	false

Methods of Window component

toggleVisibility();

• Toggling window's visibility (includes header).

toggleMinimize();

• Toggling window content's visibility.

Props of WindowManager component

Prop	Desrciption	Type	Default value
auto-sort-z-index	Auto sort windows' z-index based on recent interaction of the windows.	Boolean	true