renderly-vue

Conditional rendering components for Vue 3.

Install

pnpm add renderly-vue

Usage

<script setup lang="ts">
import { Renderly, Unless } from "renderly-vue";

const user = { name: "Mario" };
const isPro = false;
</script>

<template>
  <Renderly :when="user">
    <h2>Welcome {{ user.name }}</h2>
    <template #fallback>
      <h2>Please sign in</h2>
    </template>
  </Renderly>

  <Unless :when="isPro">
    <button>Upgrade</button>
    <template #fallback>
      <span>Pro active</span>
    </template>
  </Unless>
</template>