Automated heading ranks for HTML document outline using vue.js. Contains 2 components that will automatically generate proper <h1>
-<h6>
elements based on the section structure of your HTML document.
Each document-heading
inside of root document-section
will become h1
. If you nest two document-section
components, each document-heading
inside will become <h2>
, etc.
Useful for dynamically setting headings in re-usable components when you don’t know where your component will be placed in the DOM.
Consider you have an accordion component rendering this:
<ul>
<li>
<h4>Heading 1</h4>
... content ...
</li>
<li>
<h4>Heading 2</h4>
... content ...
</li>
<li>
<h4>Heading 3</h4>
... content ...
</li>
</ul>
Is <h4>
the right heading here? If there are no <h3>
elements on the page, those should be <h3>
s instead!
Replace the <h4>
with <document-heading>
component and it will automatically generate that for you based on number of <document-section>
s it is nested in.
npm install vue-headings --save
or
yarn add vue-headings
vue-headings
requires vue.js v2.
// my-component.vue
<template>
<document-section>
<document-heading>My Heading</document-heading>
<document-section>
<document-heading>My Child Heading</document-heading>
<p>Lorem ipsum ...</p>
<document-heading>My Child Heading</document-heading>
<p>Lorem ipsum ...</p>
<document-heading>My Child Heading</document-heading>
<p>Lorem ipsum ...</p>
<document-section>
<document-heading>My Grand Child Heading</document-heading>
<p>Lorem ipsum ...</p>
<document-heading>My Grand Child Heading</document-heading>
<p>Lorem ipsum ...</p>
</document-section>
</document-section>
</document-section>
</template>
import { DocumentSection, DocumentHeading } from 'vue-headings';
export default {
name: 'MyComponent',
components: { DocumentSection, DocumentHeading },
}
Renders following document structure:
<section>
<h1>My Heading</h1>
<section>
<h2>My Child Heading</h2>
<p>Lorem ipsum ...</p>
<h2>My Child Heading</h2>
<p>Lorem ipsum ...</p>
<h2>My Child Heading</h2>
<p>Lorem ipsum ...</p>
<section>
<h3>My Grand Child Heading</h3>
<p>Lorem ipsum ...</p>
<h3>My Grand Child Heading</h3>
<p>Lorem ipsum ...</p>
</section>
</section>
</section>
If you don’t like <section>
element, you can pass any other tag into the tag
prop:
<document-section tag="main">
<document-section tag="nav">
...
</document-section>
<document-section tag="footer">
...
</document-section>
</document-section>
You can adjust the current level of section by passing custom level via prop:
<document-section level="2"> <!-- This section would normally be level 1 -->
<document-section><!-- This section will have level 3 (parent + 1) -->
<document-heading>H3</document-heading>
</document-section>
<document-section level="1"><!-- ignores the parent and sets the level to 1 -->
<document-heading>H1</document-heading>
</document-section>
</document-section>
You can set the current level of the section relatively to it’s parent section.
<document-section level="4">
<document-section level="+2"><!-- This section will have level 6 (parent + 2) -->
<document-heading>H6</document-heading>
</document-section>
<document-section level="-2"><!-- This section will have level 2 (parent - 2) -->
<document-heading>H2</document-heading>
</document-section>
</document-section>
You can adjust the current level of heading by passing custom level via prop:
<document-section>
<document-section>
<document-heading level="5">H5</document-heading> <!-- ignores the parent level and use level 5 -->
</document-section>
<document-section>
<document-heading level="1">H1</document-heading><!-- ignores the parent and sets the level to 1 -->
</document-section>
</document-section>
You can set the current level of the heading relatively to it’s parent section.
<document-section level="4">
<document-heading level="-2">H2</document-heading><!-- This heading will have level 2 (parent - 2) -->
<document-section level="2">
<document-heading level="+3">H5</document-heading><!-- This heading will have level 5 (parent + 3) -->
</document-section>
</document-section>
Heading level cannot reach level lower than 1 and greater than 6. If calculated level is lower than one, it will become 1. If calculated level is greater than 6, it will become 6.
<document-section level="100">
<document-heading>H6</document-heading>
<document-heading level="-200">H1</document-heading>
<document-heading level="+100">H6</document-heading>
</document-section>
Author: mcibique
Source Code: https://github.com/mcibique/vue-headings
#vue #vuejs #javascript