Skip to content

CGQAQ/vink

Repository files navigation

Render Vue Components in Cli (WIP)

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.

Usage

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);

Releases

No releases published

Packages

No packages published