diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0b1cf2cc2..98931c989 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -20,7 +20,7 @@ repos:
         language: node
         types_or: [javascript, jsx, ts, tsx, vue]
         entry: eslint -c frontend/.eslint.conf.js --fix
-        additional_dependencies: ["eslint-plugin-vue"]
+        additional_dependencies: ["eslint-plugin-vue", "eslint-config-prettier", "prettier", "eslint"]
   - repo: https://github.com/psf/black
     rev: "24.2.0"
     hooks:
diff --git a/frontend/.eslint.conf.js b/frontend/.eslint.conf.js
index 523e2a238..08d8c5542 100644
--- a/frontend/.eslint.conf.js
+++ b/frontend/.eslint.conf.js
@@ -1,7 +1,9 @@
 import pluginVue from 'eslint-plugin-vue'
+import eslintConfigPrettier from 'eslint-config-prettier'
 
 export default [
   ...pluginVue.configs['flat/recommended'],
+  eslintConfigPrettier,
   {
     rules: {
       'vue/component-name-in-template-casing': [
diff --git a/frontend/src/components/account/FidoAuthForm.vue b/frontend/src/components/account/FidoAuthForm.vue
index 604052d85..0102b4061 100644
--- a/frontend/src/components/account/FidoAuthForm.vue
+++ b/frontend/src/components/account/FidoAuthForm.vue
@@ -17,7 +17,7 @@
           </div>
         </template>
         <template v-else>
-          <h3>{{ $gettext("Registered Webauthn devices") }}</h3>
+          <h3>{{ $gettext('Registered Webauthn devices') }}</h3>
           <v-data-table-virtual
             :headers="headers"
             :items="fidoCreds"
@@ -35,50 +35,53 @@
                 {{ $date(item.last_used) }}
               </template>
             </template>
-            <template v-slot:item.actions="{ item }">
-              <v-icon
-                class="me-2"
-                size="small"
-                @click="editCred(item)"
-              >
+            <template #[`item.actions`]="{ item }">
+              <v-icon class="me-2" size="small" @click="editCred(item)">
                 mdi-pencil
               </v-icon>
-              <v-icon
-                size="small"
-                @click="deleteCred(item)"
-              >
+              <v-icon size="small" @click="deleteCred(item)">
                 mdi-delete
               </v-icon>
             </template>
           </v-data-table-virtual>
         </template>
-          <template v-if="browserCapable">
-            <v-form ref="fidoForm" @submit.prevent="startFidoRegistration">
-              <v-text-field
-                v-model="name"
-                :label="$gettext('Name')"
-                :rules="[rules.required]"
-              />
-              <v-btn color="success" type="submit" :loading="registrationLoading">
-                {{ $gettext('Add WebAuthN device') }}
-              </v-btn>
-            </v-form>
-          </template>
-          <template v-else>
-            <v-alert type="error">
-              {{ $gettext('Your browser does not seem compatible with WebAuthN') }}
-            </v-alert>
-          </template>
+        <template v-if="browserCapable">
+          <v-form ref="fidoForm" @submit.prevent="startFidoRegistration">
+            <v-text-field
+              v-model="name"
+              :label="$gettext('Name')"
+              :rules="[rules.required]"
+            />
+            <v-btn color="success" type="submit" :loading="registrationLoading">
+              {{ $gettext('Add WebAuthN device') }}
+            </v-btn>
+          </v-form>
+        </template>
+        <template v-else>
+          <v-alert type="error">
+            {{
+              $gettext('Your browser does not seem compatible with WebAuthN')
+            }}
+          </v-alert>
+        </template>
       </v-card-text>
     </v-card>
   </div>
-   <ConfirmDialog ref="confirmDeletion"/>
-   <ConfirmDialog :callback_agree="checkForm" ref="confirmEdition">
+  <ConfirmDialog ref="confirmDeletion" />
+  <ConfirmDialog ref="confirmEdition" :callback_agree="checkForm">
     <v-form ref="editForm">
-      <v-text-field v-model="editName" :label="$gettext('name')" :rules="[rules.required]"/>
-      <v-switch v-model="editEnabled" :label="$gettext('enabled')" color="principal"/>
+      <v-text-field
+        v-model="editName"
+        :label="$gettext('name')"
+        :rules="[rules.required]"
+      />
+      <v-switch
+        v-model="editEnabled"
+        :label="$gettext('enabled')"
+        color="principal"
+      />
     </v-form>
-   </ConfirmDialog>
+  </ConfirmDialog>
 </template>
 
 <script setup lang="js">
@@ -91,7 +94,7 @@ import ConfirmDialog from '@/components/tools/ConfirmDialog.vue'
 import {
   create,
   parseCreationOptionsFromJSON,
-} from "@github/webauthn-json/browser-ponyfill";
+} from '@github/webauthn-json/browser-ponyfill'
 
 const authStore = useAuthStore()
 
@@ -99,7 +102,12 @@ const { $gettext } = useGettext()
 
 const name = ref()
 const registrationLoading = ref(false)
-const browserCapable = !!(navigator.credentials && navigator.credentials.create && navigator.credentials.get && window.PublicKeyCredential)
+const browserCapable = !!(
+  navigator.credentials &&
+  navigator.credentials.create &&
+  navigator.credentials.get &&
+  window.PublicKeyCredential
+)
 const fidoForm = ref()
 const fidoCreds = computed(() => authStore.fidoCreds)
 const headers = [
@@ -109,7 +117,7 @@ const headers = [
   { title: $gettext('Last Used'), key: 'last_used' },
   { title: $gettext('Use count'), key: 'use_count' },
   { title: $gettext('Enabled'), key: 'enabled' },
-  { title: $gettext('Actions'), key: 'actions'}
+  { title: $gettext('Actions'), key: 'actions' },
 ]
 const confirmDeletion = ref()
 const confirmEdition = ref()
@@ -161,7 +169,7 @@ async function editCred(cred) {
   editEnabled.value = cred.enabled
 
   const result = await confirmEdition.value.open(
-  $gettext('Edtion'),
+    $gettext('Edtion'),
     $gettext('Edit your device'),
     {
       color: 'warning',
@@ -173,7 +181,7 @@ async function editCred(cred) {
     return
   }
 
-  data = {name: editName.value, enabled: editEnabled.value}
+  data = { name: editName.value, enabled: editEnabled.value }
   //TODO : send it !
 }