vuminal's Introduction

Vuminal

Create terminal applications with the power of Vue 3.

Simple example

Install vuminal and @vuminal/connector-tom

> npm install vuminal
> npm install @vuminal/connector-tom

Create index.js

const { default: Vuminal, h, ref } = require('vuminal');
const tomConnector = require('@vuminal/connector-tom');

const draw = Vuminal(tomConnector);

draw({
  setup() {
    const counter = ref(0);

    setInterval(() => {
      counter.value++;
    }, 1000);

    return () => h('row', ['current count: ', counter.value]);
  },
});

Run it!

> node index.js

How does it work?

WIP

Author

Jason Yu

vuminal's People

Stargazers

Watchers

vuminal's Issues

Documentation

Hi, would it be possible to add usage examples/documentation? Maybe something like ink's https://www.npmjs.com/package/ink
Can be used to create Blessed-like GUI? (https://github.com/Yomguithereal/react-blessed) ?

Is this project in development, or something like a hacklaton proof of concept?

table widget doesn't work properly

const {default: Vulminal, h, ref, computed, onMounted, resolveComponent }= require('vuminal')
const connector = require('@vuminal/connector-blessed')
const draw = Vulminal(connector)
draw({
  setup(props, context) {
    return () => h('box', {width: 100, height: 30, style: {bg: "green"}},
      [h('box', {width: 20, height: 20, top: "center", left: "center", style: {bg: "yellow"}}),
      h('table', {
        top: 10,
        width: "50%",
        data: [["1", "2", "3"], ["4", "5", "6"]],
        style: {
          // bg: "red",
          border: {
            fg: 'red'
          },
          header: {
            fg: 'blue',
            bold: true
          },
          cell: {
            fg: 'magenta'
          }
        }
    })])
  }
})

Datas in table aren't rendered. Is there something wrong with NodeOpt

Recommend Projects