directus workgit add .!

components/Header.vue

@@ -1,5 +1,10 @@
 <script setup>
   const { isDesktopOrTablet } = useDevice();
+
+  const user = useDirectusUser();
+  const { logout } = useDirectusAuth()
+
+  console.log(user)
 </script>
 
 <template>
@@ -11,9 +16,15 @@
       <NuxtLink to="/#events" ><h2>Events</h2></NuxtLink>
       <NuxtLink to="/members" v-if="isDesktopOrTablet" ><h2>Members</h2></NuxtLink>
     </div>
-    <div class="auth" v-if="isDesktopOrTablet" >
+    <div class="auth" v-if="isDesktopOrTablet">
-      <NuxtLink to="/register"><h2>Register</h2></NuxtLink>
+      <div class="links" v-if="!user">
-      <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
+        <NuxtLink to="/register"><h2>Register</h2></NuxtLink>
+        <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
+      </div>
+      <div class="user" v-if="user">
+        <p >{{user.first_name}}</p>
+        <p @click="logout" >Logout</p>
+      </div>
     </div>
   </header>
 </template>

nuxt.config.ts

@@ -5,8 +5,14 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/content',
     '@nuxtjs/device',
+    'nuxt-directus',
     'nuxt-time',
   ],
+
+  directus: {
+    url: 'https://cms.crbtc.org',
+    autoFetch: true,
+  },
   
   css: [
     "~/assets/style/main.scss",

package-lock.json

@@ -8,7 +8,8 @@
       "hasInstallScript": true,
       "dependencies": {
         "date-fns": "^2.30.0",
-        "sass": "^1.63.6"
+        "sass": "^1.63.6",
+        "vee-validate": "^4.10.8"
       },
       "devDependencies": {
         "@nuxt/content": "^2.7.0",
@@ -16,6 +17,7 @@
         "@nuxtjs/device": "^3.1.0",
         "@types/node": "^18.16.19",
         "nuxt": "^3.6.2",
+        "nuxt-directus": "^5.5.0",
         "nuxt-time": "^0.1.0"
       }
     },
@@ -418,7 +420,6 @@
       "version": "7.22.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
       "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1445,8 +1446,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -3116,7 +3116,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
       "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.21.3",
         "@vue/shared": "3.3.4",
@@ -3127,14 +3126,12 @@
     "node_modules/@vue/compiler-core/node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-      "dev": true
     },
     "node_modules/@vue/compiler-dom": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
       "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -3144,7 +3141,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
       "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.15",
         "@vue/compiler-core": "3.3.4",
@@ -3161,14 +3157,12 @@
     "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-      "dev": true
     },
     "node_modules/@vue/compiler-ssr": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
       "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -3177,14 +3171,12 @@
     "node_modules/@vue/devtools-api": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
-      "dev": true
     },
     "node_modules/@vue/reactivity": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
       "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
-      "dev": true,
       "dependencies": {
         "@vue/shared": "3.3.4"
       }
@@ -3193,7 +3185,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
       "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.15",
         "@vue/compiler-core": "3.3.4",
@@ -3205,14 +3196,12 @@
     "node_modules/@vue/reactivity-transform/node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-      "dev": true
     },
     "node_modules/@vue/runtime-core": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
       "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -3222,7 +3211,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
       "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.3.4",
         "@vue/shared": "3.3.4",
@@ -3233,7 +3221,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
       "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -3245,8 +3232,7 @@
     "node_modules/@vue/shared": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
-      "dev": true
     },
     "node_modules/abbrev": {
       "version": "1.1.1",
@@ -4886,8 +4872,7 @@
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-      "dev": true
     },
     "node_modules/cuint": {
       "version": "0.2.2",
@@ -7537,7 +7522,6 @@
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
       "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -9484,6 +9468,15 @@
         }
       }
     },
+    "node_modules/nuxt-directus": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-directus/-/nuxt-directus-5.5.0.tgz",
+      "integrity": "sha512-OsKuWsf6t+8i4YCWTI2Nh0ssoZbC606s43Zt1v6iUwdlxp3LnS4+EU9E72rssGZ7boVfQ1v5crponZAqZ26zLQ==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0"
+      }
+    },
     "node_modules/nuxt-time": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/nuxt-time/-/nuxt-time-0.1.0.tgz",
@@ -9841,8 +9834,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -9900,7 +9892,6 @@
       "version": "8.4.25",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
       "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10479,7 +10470,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12744,6 +12734,29 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/vee-validate": {
+      "version": "4.10.8",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+      "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "type-fest": "^4.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/vee-validate/node_modules/type-fest": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+      "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/vfile": {
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
@@ -13185,7 +13198,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
       "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/compiler-sfc": "3.3.4",
@@ -13957,8 +13969,7 @@
     "@babel/parser": {
       "version": "7.22.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
-      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
+      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q=="
-      "dev": true
     },
     "@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
@@ -14520,8 +14531,7 @@
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-      "dev": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -15678,7 +15688,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
       "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
-      "dev": true,
       "requires": {
         "@babel/parser": "^7.21.3",
         "@vue/shared": "3.3.4",
@@ -15689,8 +15698,7 @@
         "estree-walker": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-          "dev": true
         }
       }
     },
@@ -15698,7 +15706,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
       "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
-      "dev": true,
       "requires": {
         "@vue/compiler-core": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -15708,7 +15715,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
       "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dev": true,
       "requires": {
         "@babel/parser": "^7.20.15",
         "@vue/compiler-core": "3.3.4",
@@ -15725,8 +15731,7 @@
         "estree-walker": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-          "dev": true
         }
       }
     },
@@ -15734,7 +15739,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
       "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
-      "dev": true,
       "requires": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -15743,14 +15747,12 @@
     "@vue/devtools-api": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
-      "dev": true
     },
     "@vue/reactivity": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
       "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
-      "dev": true,
       "requires": {
         "@vue/shared": "3.3.4"
       }
@@ -15759,7 +15761,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
       "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dev": true,
       "requires": {
         "@babel/parser": "^7.20.15",
         "@vue/compiler-core": "3.3.4",
@@ -15771,8 +15772,7 @@
         "estree-walker": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-          "dev": true
         }
       }
     },
@@ -15780,7 +15780,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
       "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
-      "dev": true,
       "requires": {
         "@vue/reactivity": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -15790,7 +15789,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
       "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
-      "dev": true,
       "requires": {
         "@vue/runtime-core": "3.3.4",
         "@vue/shared": "3.3.4",
@@ -15801,7 +15799,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
       "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
-      "dev": true,
       "requires": {
         "@vue/compiler-ssr": "3.3.4",
         "@vue/shared": "3.3.4"
@@ -15810,8 +15807,7 @@
     "@vue/shared": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==",
+      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
-      "dev": true
     },
     "abbrev": {
       "version": "1.1.1",
@@ -17012,8 +17008,7 @@
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-      "dev": true
     },
     "cuint": {
       "version": "0.2.2",
@@ -18960,7 +18955,6 @@
       "version": "0.30.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
       "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
-      "dev": true,
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -20359,6 +20353,15 @@
         "vue-router": "^4.2.3"
       }
     },
+    "nuxt-directus": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/nuxt-directus/-/nuxt-directus-5.5.0.tgz",
+      "integrity": "sha512-OsKuWsf6t+8i4YCWTI2Nh0ssoZbC606s43Zt1v6iUwdlxp3LnS4+EU9E72rssGZ7boVfQ1v5crponZAqZ26zLQ==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0"
+      }
+    },
     "nuxt-time": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/nuxt-time/-/nuxt-time-0.1.0.tgz",
@@ -20640,8 +20643,7 @@
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-      "dev": true
     },
     "picomatch": {
       "version": "2.3.1",
@@ -20684,7 +20686,6 @@
       "version": "8.4.25",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
       "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
-      "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -20694,8 +20695,7 @@
         "nanoid": {
           "version": "3.3.6",
           "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-          "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+          "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
-          "dev": true
         }
       }
     },
@@ -22735,6 +22735,22 @@
         "builtins": "^5.0.0"
       }
     },
+    "vee-validate": {
+      "version": "4.10.8",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+      "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "type-fest": "^4.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+          "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw=="
+        }
+      }
+    },
     "vfile": {
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
@@ -23015,7 +23031,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
       "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
-      "dev": true,
       "requires": {
         "@vue/compiler-dom": "3.3.4",
         "@vue/compiler-sfc": "3.3.4",

package.json

@@ -14,10 +14,12 @@
     "@nuxtjs/device": "^3.1.0",
     "@types/node": "^18.16.19",
     "nuxt": "^3.6.2",
+    "nuxt-directus": "^5.5.0",
     "nuxt-time": "^0.1.0"
   },
   "dependencies": {
     "date-fns": "^2.30.0",
-    "sass": "^1.63.6"
+    "sass": "^1.63.6",
+    "vee-validate": "^4.10.8"
   }
 }

pages/login.vue

@@ -8,6 +8,28 @@
       },      
     ],
   })
+
+  import { Field, Form } from 'vee-validate';
+
+  function required(value) {
+    return value ? true : 'This field is required';
+  }
+
+
+  const { login } = useDirectusAuth();
+  const router = useRouter();
+
+  const onSubmit = async (values) => {
+
+    console.log(values.email);
+    try {
+      await login({ 
+        email: values.email,
+        password: values.password
+      });
+    } catch (e) {}
+  };
+
 </script>
 
 <template>
@@ -16,19 +38,22 @@
     <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
       use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
 
-    <form>
+    <Form v-slot="{ errors }" @submit="onSubmit" >
       <div class="input">
         <label>Email</label>
-        <input placeholder="Enter your email" />
+        <Field name="email" :rules="required" placeholder="Enter your email" />
+
+        <span>{{ errors.field }}</span>
+
       </div>
 
       <div class="input">
         <label>Password</label>
-        <input placeholder="********" type="password" />
+        <Field name="password" :rules="required" placeholder="********" type="password" />
       </div>
 
       <button>Sign in</button>
-    </form>
+    </Form>
 
     <p class="newbie">Don't have an account? <NuxtLink href="/register">Create account</NuxtLink></p>
     <p class="reset">Forgot password? <NuxtLink href="/reset">Reset password</NuxtLink></p>

pages/register.vue

@@ -8,6 +8,24 @@
       },      
     ],
   })
+
+  import { Field, Form } from 'vee-validate';
+
+  function required(value) {
+    return value ? true : 'This field is required';
+  }
+
+  const { createUser } = useDirectusAuth();
+
+  const onSubmit = async (values) => {
+    try {
+      const newUser = await createUser({
+        email: values.email,
+        password: values.password
+      });
+    } catch (e) {}
+  };
+
 </script>
 
 <template>
@@ -16,20 +34,20 @@
     <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
       use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
 
-    <form>
+    <Form v-slot="{ errors }" @submit="onSubmit" >
       <div class="input">
         <label>Username</label>
-        <input placeholder="Choose a username" />
+        <Field name="username" placeholder="Choose a username" />
       </div>
 
       <div class="input">
         <label>Email</label>
-        <input placeholder="Enter your email" />
+        <Field name="email" placeholder="Enter your email" />
       </div>
 
       <div class="input">
         <label>Password</label>
-        <input placeholder="********" type="password" />
+        <Field name="password" placeholder="********" type="password" />
       </div>
 
       <button>Create account</button>