add hCaptcha to contact form

components/Contact/Form.vue

@@ -172,6 +172,9 @@
           label="Captcha"
         />
 
+        <!-- @see https://github.com/hCaptcha/vue-hcaptcha -->
+        <vue-hcaptcha :sitekey="runtimeConfig.hCaptchaSiteKey" />
+
         <!-- Submit Button -->
         <v-row>
           <v-col cols="12">
@@ -194,11 +197,12 @@
 </template>
 
 <script setup lang="ts">
-import { ComputedRef } from "vue";
 import { ContactFormData } from "~/types/interface";
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const route = useRoute();
 const defaultRequestType = route.query.request;
+const runtimeConfig = useRuntimeConfig()
 
 // --- Constants ---
 const requestTypes: Array<string> = [

nuxt.config.ts

@@ -31,10 +31,12 @@ export default defineNuxtConfig({
     // Private config that is only available on the server
     env: "",
     apiBaseUrl: "",
+    hCaptchaSiteKey: "35360874-ebb1-4748-86e3-9b156d5bfc53",
     // Config within public will be also exposed to the client
     public: {
       env: "",
       apiBaseUrl: "",
+      hCaptchaSiteKey: "35360874-ebb1-4748-86e3-9b156d5bfc53",
     },
   },
   css: [
@@ -137,25 +139,6 @@ export default defineNuxtConfig({
     ],
     defaultLocale: "fr",
     detectBrowserLanguage: false,
-    vueI18n: {
-      legacy: false,
-      datetimeFormats: {
-        "fr-FR": {
-          short: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-          },
-          long: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-          },
-        },
-      },
-    },
   } as NuxtI18nOptions,
   build: {
     transpile: transpile,

package.json

@@ -21,6 +21,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@mdi/font": "^7.2.96",
     "@nuxtjs/date-fns": "^1.5.0",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
@@ -40,7 +41,7 @@
     "leaflet": "^1.9.3",
     "leaflet.markercluster": "^1.5.3",
     "libphonenumber-js": "^1.9.38",
-    "nuxt": "^3.2.0",
+    "nuxt": "3.2.0",
     "nuxt-lodash": "^2.4.1",
     "ohmyfetch": "^0.4.21",
     "pinia": "^2.0.33",