Nuxt Target

Compile KERN to Nuxt 3 pages with auto-imports, file-based routing, layouts, and server routes. Data fetching uses useFetch and useAsyncData.

What it generates

KERN input:

page name=Users route=/users
  fetch url=/api/users as=users

  col {gap:24,p:40}
    text value="Users" tag=h1 {fs:32,fw:800}
    each item=users as=user
      card {p:16,br:8}
        text value=user.name tag=p {fw:600}

Compiled output:

<script setup lang="ts">
const { data: users } = await useFetch('/api/users');

useHead({ title: 'Users' });
</script>

<template>
  <div style="display:flex;flex-direction:column;gap:24px;padding:40px">
    <h1 style="font-size:32px;font-weight:800">Users</h1>
    <div v-for="user in users" :key="user.id"
      style="padding:16px;border-radius:8px">
      <p style="font-weight:600">{{ user.name }}</p>
    </div>
  </div>
</template>

Target-specific nodes

The Nuxt target extends the Vue target with Nuxt 3 conventions:

  • page — Nuxt page component placed in pages/ directory
  • layout — Nuxt layout placed in layouts/
  • fetch — Emits useFetch() or useAsyncData()
  • metadata — Emits useHead() composable
  • middleware — Nuxt route middleware in middleware/
  • route — Server route in server/api/

Configuration

The Nuxt target follows Nuxt 3 directory conventions by default. Set the target in kern.config.ts:

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

export default defineConfig({
  target: 'nuxt',
  outdir: './',
});

Quick start

kern dev app.kern --target=nuxt