A custum Vue3 renderer to provided the same component-based UI building experience that Vue3 offers in the browser, but for command-line apps. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in vue-custom-renderer as well. The project is based on ink.
Counter.vue:
<template>
<!-- Text will simply out put text -->
<Text>{{ msg }}({{ counter }}s)</Text>
</template>
<script setup lang="ts">
import { ref, onBeforeUnmount, onMounted } from "vue";
import Text from "../../src/builtin/Text";
const msg = ref("Hello World from vink");
const counter = ref(0);
let handle;
onMounted(() => {
handle = setInterval(() => {
counter.value++;
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(handle);
});
</script>
index.js:
import { createVinkApp } from "../../src";
import HelloWorld from "./hello-world.vue";
createVinkApp(HelloWorld);