<Hx>vueberschrift 🧢</Hx>

Zero-dependency magic heading levels for Vue 3

📖 Full Documentation

🛠️ Usage

npm install vueberschrift

Page.vue:

<script setup lang="ts">
	import { Hx, HxBoundary } from "vueberschrift";
</script>

<template>
	<Hx>Outside of the top level: this will be an h1</Hx>

	<HxBoundary>
		<Hx>Within the top level: this will be an h2</Hx>

		<HxBoundary>
			<Hx>Within the 2nd level: this will be an h3</Hx>

			<HxBoundary>
				<Hx>Within the 3rd level: this will be an h4</Hx>
			</HxBoundary>

			<Hx>Again within the 2nd level: this will be an h3</Hx>
		</HxBoundary>
	</HxBoundary>
</template>

renders as:

<h1>Outside of the top level: this will be an h1</h1>
<h2>Within the top level: this will be an h2</h2>
<h3>Within the 2nd level: this will be an h3</h3>
<h4>Within the 3rd level: this will be an h4</h4>
<h3>Again within the 2nd level: this will be an h3</h3>

Sponsors

👩‍💻 Development

npm install
npx turbo dev
npx turbo test
npx turbo build