Vue helper component for making a SkipToContent component.

yarn add @limbo-works/skip-to-content

Make the component(s) globally usable by extending the layer in nuxt.config.js.

export default defineNuxtConfig({
    extends: [
        '@limbo-works/skip-to-content',
        ...
    ],
    ...
});

A basic, generally unstyled SkipToContent component is included but is meant to be overwritten by your own. The SkipToContent component should be placed as the first element on the page and on every page (so App.vue is a good place for it). The true aid in this package is the SkipToContentHandler, which can be used (in the creation of a SkipToContent) like this:

<!-- As written in Vue -->
<SkipToContentHandler
    #default="{ visibleItems }"
        :content="{
            top: {
            name: 'Sidens top',
            description: 'Du er her',
        },
        longread: {
            name: 'Indholdsfortegnelse',
        },
        main: {
            name: 'Hovedindhold',
        },
        footer: {
            name: 'Sidefod',
        },
    }"
>
    <nav v-if="visibleItems?.length" class="c-skip-to-content">
        <ul>
            <li v-for="item in visibleItems" :key="item.id">
                <a :href="`#${item.id}`" tabindex="1" @click="item.onClick">
                    {{ item.name }}
                </a>
                <small v-if="item.description" v-text="item.description"></small>
            </li>
        </ul>
    </nav>
</SkipToContentHandler>

<!-- As it may appear in the dom -->
<nav class="c-skip-to-content">
    <ul>
        <!--[-->
        <li>
            <a href="#top" tabindex="1">
                Sidens top
            </a>
            <small>Du er her</small>
        </li>
        <li>
            <a href="#main" tabindex="1">
                Hovedindhold
            </a>
            <!---->
        </li>
        <!--]-->
    </ul>
</nav>

Note that the SkipToContentHandler doesn't add anything to the DOM itself, but simply handles the logic and tracking of which ids exist on the page and should be shown in the SkipToContent.

The content can be either an object or an array. If the content is an array, it should be an array of ids of the elements on the page to track, and then the name of each item will also be the id. If content is an object, each key will be the id to track. If the value is a string, then that will be the written name of the item. But the value can also be an object, in which case you can add following properties:

The id "top" is special and can be used without an element with that id on the page.

SkipToContentHandler passes the property visibleItems to its slot. This is a list of objects containing id, name, description and onClick-function (which will be either your action or scrolling to the element).

• Caveat: On first load there will be a brief moment where all the elements shows in the list – that is until the client JS kicks in. As the menu itself should be hidden, that shouldn't be a problem.