feat: add vue-skip-to plugin (#228)

* feat: add vue-skip-to plugin

* feat: add anchor to nuxt page for vue-skip-to

* feat: add footer component in layout

components/organisms/VFooter/VFooter.vue

@@ -0,0 +1,7 @@
+<!-- <script setup lang="ts"></script> -->
+
+<template>
+    <footer id="footer" />
+</template>
+
+<!-- <style lang="scss" module></style> -->

layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RoadizNodesSources } from '@roadiz/types'
+import VFooter from '~/components/organisms/VFooter/VFooter.vue'
 
 // init Roadiz page data (i.e. dynamic page)
 await callOnce(async () => {
@@ -32,8 +33,23 @@ await callOnce(async () => {
 
 <template>
     <div>
-        <NuxtPage />
+        <ClientOnly>
+            <VueSkipTo
+                :class="$style['skip-to-nav']"
+                :list-label="$t('skip_to.list_label').toString()"
+                :to="[
+                    { anchor: '#main', label: $t('skip_to.main_content') },
+                    { anchor: '#footer', label: $t('skip_to.footer') },
+                ]"
+            />
+        </ClientOnly>
+        <NuxtPage id="main" />
+        <VFooter />
     </div>
 </template>
 
-<!-- <style module lang="scss"></style> -->
+<style module lang="scss">
+.skip-to-nav {
+    z-index: 10000;
+}
+</style>

package.json

@@ -55,7 +55,7 @@
     "@sentry/node": "^8.47.0",
     "@sentry/vue": "^8.47.0",
     "@types/lodash": "^4.17.14",
-    "@vue-a11y/skip-to": "^2.1.2",
+    "@vue-a11y/skip-to": "^3.0.3",
     "@vueuse/core": "^12.0.0",
     "body-scroll-lock": "^3.1.5",
     "floating-vue": "^5.2.2",

plugins/11.vueSkipTo.client.ts

@@ -0,0 +1,12 @@
+import VueSkipTo from '@vue-a11y/skip-to'
+import '@vue-a11y/skip-to/dist/style.css'
+
+declare module 'vue' {
+    interface GlobalComponents {
+        VueSkipTo: ComponentPublicInstance
+    }
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(VueSkipTo)
+})