Vue Target

Compile KERN to Vue 3 Single File Components. Nodes emit Composition API code with <script setup>, reactive state via ref(), and scoped styles.

What it generates

KERN input:

screen name=TodoList
  state name=todos type=string[] initial=[]
  state name=input type=string initial=""

  col {gap:16,p:32}
    text value="Todos" tag=h1 {fs:28,fw:800}
    row {gap:8}
      input placeholder="Add a todo" bind=input
      button text="Add" onClick=addTodo
    each item=todos as=todo
      text value=todo tag=p

Compiled output:

<script setup lang="ts">
import { ref } from 'vue';

const todos = ref<string[]>([]);
const input = ref('');

function addTodo() {
  todos.value.push(input.value);
  input.value = '';
}
</script>

<template>
  <div style="display:flex;flex-direction:column;gap:16px;padding:32px">
    <h1 style="font-size:28px;font-weight:800">Todos</h1>
    <div style="display:flex;gap:8px">
      <input v-model="input" placeholder="Add a todo" />
      <button @click="addTodo">Add</button>
    </div>
    <p v-for="todo in todos" :key="todo">{{ todo }}</p>
  </div>
</template>

Target-specific nodes

The Vue target reuses standard KERN nodes and translates them to Vue idioms:

• screen — Root component, emits a .vue SFC
• state — Emits ref() in <script setup>
• input with bind — Emits v-model binding
• each — Emits v-for directive
• button with onClick — Emits @click handler
• effect — Emits watch() or watchEffect()
• memo — Emits computed()

Configuration

The Vue target uses the default KERN configuration. Set the target in kern.config.ts:

import { defineConfig } from '@kernlang/cli';

export default defineConfig({
  target: 'vue',
  outdir: 'src/components/',
});

Quick start

kern dev app.kern --target=vue