Skip to content
On this page

How to use Vtron

vtron logo

vtron, a Win10 UI framework based on Vue3

Recommended: Vue 3 + Typescript + Vite + Using <script setup>

This framework can make your page like a win10 window system, run a win10 system on a web page.

Development step

  1. install vtron

npm install vtron

  1. use vtron in vue
import vtron from 'vtron';

import style file "vtron/distlib/style.css"

import 'vtron/distlib/style.css';


import { createApp } from 'vue';
import App from './App.vue';
import vtron from 'vtron';
import 'vtron/distlib/style.css';

  1. import VtronComputer component

First, we need to create a system object, which manages all the status information of the system.

// App.vue
<script setup>
import { System } from 'vtron';
let system = new System();

After this step, run dev can see win10 start up

  1. control screen size

wrap outer around the component

<div class="outer">

define outer style

<style scoped>
  .outer {
    width: 100vw;
    height: 100vh;

This way, it occupies the entire page display

  1. In the apps folder, create a new vue file. The main content of the window is written in this folder (not required)
  <div class="app">
  1. register app in system

In the constructor of the system, pass in the configuration item,

desktop is the configuration item of the desktop, which can configure multiple apps

<script setup>
import { System, BrowserWindow } from 'vtron';
import { App } from './apps/App.vue';
import someicon from './assets/someicon.png';
import HelloWorld from './apps/HelloWorld.vue';
let system = new System({
  desktop: [
      name: 'HelloWorld',
      icon: someicon,
      window: {
        content: HelloWorld,
        icon: someicon,


thanks for your star, welcome to PR, opinion, idea, thanks for your support