From be6bc867fe5730b9954cce828a349cd1bfacbd88 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 19 Oct 2023 10:46:04 +0200
Subject: [PATCH] WIP

---
 package-lock.json                             | 214 +++++++++---------
 package.json                                  |   2 +-
 resources/js/app.js                           |   2 +-
 resources/js/components/App.vue               |   1 -
 resources/js/components/Modal.vue             |   4 +-
 resources/js/components/forms/TextInput.vue   | 108 ++++-----
 .../components/forms/components/InputHelp.vue |  21 ++
 .../forms/components/InputLabel.vue           |  22 ++
 resources/js/components/forms/useFormInput.js |  74 ++++++
 resources/js/pages/home.vue                   |  43 ++--
 resources/js/pages/welcome.vue                | 105 +++++----
 resources/js/plugins/amplitude.js             |  30 +--
 resources/js/plugins/index.js                 |  16 +-
 resources/js/plugins/vue-plugins.js           |   9 -
 resources/js/router/index.js                  |   2 +-
 vite.config.js                                |   3 +-
 16 files changed, 394 insertions(+), 262 deletions(-)
 create mode 100644 resources/js/components/forms/components/InputHelp.vue
 create mode 100644 resources/js/components/forms/components/InputLabel.vue
 create mode 100644 resources/js/components/forms/useFormInput.js
 delete mode 100644 resources/js/plugins/vue-plugins.js

diff --git a/package-lock.json b/package-lock.json
index 808b933..9862954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "vue-confetti": "^2.3.0",
         "vue-country-flag-next": "^2.3.2",
         "vue-i18n": "^8.25.0",
-        "vue-meta": "^2.4.0",
+        "vue-meta": "^3.0.0-alpha.2",
         "vue-notion": "^3.0.0-beta.1",
         "vue-router": "^4.2.5",
         "vue-signature-pad": "^2.0.5",
@@ -2238,9 +2238,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2314,14 +2314,14 @@
       }
     },
     "node_modules/@sentry-internal/tracing": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.74.0.tgz",
-      "integrity": "sha512-JK6IRGgdtZjswGfaGIHNWIThffhOHzVIIaGmglui+VFIzOsOqePjoxaDV0MEvzafxXZD7eWqGE5RGuZ0n6HFVg==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.74.1.tgz",
+      "integrity": "sha512-nNaiZreQxCitG2PzYPaC7XtyA9OMsETGYMKAtiK4p62/uTmeYbsBva9BoNx1XeiHRwbrVQYRMKQ9nV5e2jS4/A==",
       "dev": true,
       "dependencies": {
-        "@sentry/core": "7.74.0",
-        "@sentry/types": "7.74.0",
-        "@sentry/utils": "7.74.0",
+        "@sentry/core": "7.74.1",
+        "@sentry/types": "7.74.1",
+        "@sentry/utils": "7.74.1",
         "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
@@ -2422,12 +2422,12 @@
       }
     },
     "node_modules/@sentry/core": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.74.0.tgz",
-      "integrity": "sha512-83NRuqn7nDZkSVBN5yJQqcpXDG4yMYiB7TkYUKrGTzBpRy6KUOrkCdybuKk0oraTIGiGSe5WEwCFySiNgR9FzA==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.74.1.tgz",
+      "integrity": "sha512-LvEhOSfdIvwkr+PdlrT/aA/iOLhkXrSkvjqAQyogE4ddCWeYfS0NoirxNt1EaxMBAWKhYZRqzkA7WA4LDLbzlA==",
       "dependencies": {
-        "@sentry/types": "7.74.0",
-        "@sentry/utils": "7.74.0",
+        "@sentry/types": "7.74.1",
+        "@sentry/utils": "7.74.1",
         "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
@@ -2473,13 +2473,13 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@sentry/integrations": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.74.0.tgz",
-      "integrity": "sha512-O4UyxiV5wzXSDnEd9Z/SIt/5M12URWNtIJPPJjowlllzw8X9e3zBcnXmjMOLZ+mZWjQmRDjOoz3lPPQ17f7fvw==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.74.1.tgz",
+      "integrity": "sha512-Q7chPehHpHB4WOQ1J/X6NiN2ptiqJMmxtL+6wHumzIAyrjup3c9XekR83qEs8zpqYJAlb/4MUlwd9fPbkhGXnQ==",
       "dependencies": {
-        "@sentry/core": "7.74.0",
-        "@sentry/types": "7.74.0",
-        "@sentry/utils": "7.74.0",
+        "@sentry/core": "7.74.1",
+        "@sentry/types": "7.74.1",
+        "@sentry/utils": "7.74.1",
         "localforage": "^1.8.1",
         "tslib": "^2.4.1 || ^1.9.3"
       },
@@ -2514,15 +2514,15 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@sentry/node": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.74.0.tgz",
-      "integrity": "sha512-uBmW2/z0cz/WFIG74ZF7lSipO0XNzMf9yrdqnZXnGDYsUZE4I4QiqDN0hNi6fkTgf9MYRC8uFem2OkAvyPJ74Q==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.74.1.tgz",
+      "integrity": "sha512-aMUQ2LFZF64FBr+cgjAqjT4OkpYBIC9lyWI8QqjEHqNho5+LGu18/iVrJPD4fgs4UhGdCuAiQjpC36MbmnIDZA==",
       "dev": true,
       "dependencies": {
-        "@sentry-internal/tracing": "7.74.0",
-        "@sentry/core": "7.74.0",
-        "@sentry/types": "7.74.0",
-        "@sentry/utils": "7.74.0",
+        "@sentry-internal/tracing": "7.74.1",
+        "@sentry/core": "7.74.1",
+        "@sentry/types": "7.74.1",
+        "@sentry/utils": "7.74.1",
         "cookie": "^0.5.0",
         "https-proxy-agent": "^5.0.0",
         "lru_map": "^0.3.3",
@@ -2573,19 +2573,19 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@sentry/types": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.74.0.tgz",
-      "integrity": "sha512-rI5eIRbUycWjn6s6o3yAjjWtIvYSxZDdnKv5je2EZINfLKcMPj1dkl6wQd2F4y7gLfD/N6Y0wZYIXC3DUdJQQg==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.74.1.tgz",
+      "integrity": "sha512-2jIuPc+YKvXqZETwr2E8VYnsH1zsSUR/wkIvg1uTVeVNyoowJv+YsOtCdeGyL2AwiotUBSPKu7O1Lz0kq5rMOQ==",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/utils": {
-      "version": "7.74.0",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.74.0.tgz",
-      "integrity": "sha512-k3np8nuTPtx5KDODPtULfFln4UXdE56MZCcF19Jv6Ljxf+YN/Ady1+0Oi3e0XoSvFpWNyWnglauT7M65qCE6kg==",
+      "version": "7.74.1",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.74.1.tgz",
+      "integrity": "sha512-qUsqufuHYcy5gFhLZslLxA5kcEOkkODITXW3c7D+x+8iP/AJqa8v8CeUCVNS7RetHCuIeWAbbTClC4c411EwQg==",
       "dependencies": {
-        "@sentry/types": "7.74.0",
+        "@sentry/types": "7.74.1",
         "tslib": "^2.4.1 || ^1.9.3"
       },
       "engines": {
@@ -2692,9 +2692,9 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.44.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.4.tgz",
-      "integrity": "sha512-lOzjyfY/D9QR4hY9oblZ76B90MYTB3RrQ4z2vBIJKj9ROCRqdkYl2gSUx1x1a4IWPjKJZLL4Aw1Zfay7eMnmnA==",
+      "version": "8.44.6",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.6.tgz",
+      "integrity": "sha512-P6bY56TVmX8y9J87jHNgQh43h6VVU+6H7oN7hgvivV81K2XY8qJZ5vqPy/HdUoVIelii2kChYVzQanlswPWVFw==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -2703,9 +2703,9 @@
       }
     },
     "node_modules/@types/eslint-scope": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.5.tgz",
-      "integrity": "sha512-JNvhIEyxVW6EoMIFIvj93ZOywYFatlpu9deeH6eSx6PE3WHYvHaQtmHmQeNw7aA81bYGBPPQqdtBm6b1SsQMmA==",
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.6.tgz",
+      "integrity": "sha512-zfM4ipmxVKWdxtDaJ3MP3pBurDXOCoyjvlpE3u6Qzrmw4BPbfm4/ambIeTk/r/J0iq/+2/xp0Fmt+gFvXJY2PQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -2714,16 +2714,16 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
-      "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
+      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
       "dev": true,
       "peer": true
     },
     "node_modules/@types/imagemin": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@types/imagemin/-/imagemin-8.0.2.tgz",
-      "integrity": "sha512-RcyM00BFTQQ5oFv88APJu4VFnm6xwtLEUiy2Z+lM8lay2NVwVAFetr1Koop1DNnwX+ZGKUgU4v8eZS8MsBEttg==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@types/imagemin/-/imagemin-8.0.3.tgz",
+      "integrity": "sha512-se/hpaYxu5DyvPqmUEwbupmbQSx6JNislk0dkoIgWSmArkj+Ow9pGG9pGz8MRmbQDfGNYNzqwPQKHCUy+K+jpQ==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -2739,18 +2739,18 @@
       }
     },
     "node_modules/@types/imagemin-jpegtran": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@types/imagemin-jpegtran/-/imagemin-jpegtran-5.0.2.tgz",
-      "integrity": "sha512-Ov/wC42m+1Hgui9h4aXflLRUE+Sloqb8W2xQ0IF2oLfOVulGTwB7cgjDsdwIPvSnmsYIVJ0t5IYCmmURwlnFHA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/imagemin-jpegtran/-/imagemin-jpegtran-5.0.3.tgz",
+      "integrity": "sha512-5qqqWK20Y+hlCbqlyksInmZ4km112SGLYb3FForSKj4f5URubrww19hsZ5ZaV+LskIi4P1px5xrdF6oOTFnkAg==",
       "dev": true,
       "dependencies": {
         "@types/imagemin": "*"
       }
     },
     "node_modules/@types/imagemin-optipng": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/@types/imagemin-optipng/-/imagemin-optipng-5.2.2.tgz",
-      "integrity": "sha512-BaKY+jrzKaFM3mPc0pUwfJOhoZAu9ZfMOmcKt4EXsmtqGm9otu9y+xJUmaZ/N60dJOTGZypOByXLAUyjsXEVeA==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/imagemin-optipng/-/imagemin-optipng-5.2.3.tgz",
+      "integrity": "sha512-Q80ANbJYn+WgKkWVfx9f7/q4LR6qun4NIiuV1eRWCg8KCAmNrU7ZH16a2hGs9kfkFqyJlhBv6oV9SDXe1vL3aQ==",
       "dev": true,
       "dependencies": {
         "@types/imagemin": "*"
@@ -2767,9 +2767,9 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.13",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
-      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
+      "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
       "dev": true
     },
     "node_modules/@types/json5": {
@@ -2779,29 +2779,29 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.8.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.6.tgz",
-      "integrity": "sha512-eWO4K2Ji70QzKUqRy6oyJWUeB7+g2cRagT3T/nxYibYcT4y2BDL8lqolRXjTHmkZCdJfIPaY73KbJAZmcryxTQ==",
+      "version": "20.8.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz",
+      "integrity": "sha512-21TKHHh3eUHIi2MloeptJWALuCu5H7HQTdTrWIFReA8ad+aggoX+lRes3ex7/FtpC+sVUpFMQ+QTfYr74mruiQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.25.1"
       }
     },
     "node_modules/@types/q": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.6.tgz",
-      "integrity": "sha512-IKjZ8RjTSwD4/YG+2gtj7BPFRB/lNbWKTiSj3M7U/TD2B7HfYCxvp2Zz6xA2WIY7pAuL1QOUPw8gQRbUrrq4fQ==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.7.tgz",
+      "integrity": "sha512-HBPgtzp44867rkL+IzQ3560/E/BlobwCjeXsuKqogrcE99SKgZR4tvBBCuNJZMhUFMz26M7cjKWZg785lllwpA==",
       "dev": true
     },
     "node_modules/@types/sortablejs": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.3.tgz",
-      "integrity": "sha512-v+zh6TZP/cLeMUK0MDx1onp8e7Jk2/4iTQ7sb/n80rTAvBm14yJkpOEfJdrTCkHiF7IZbPjxGX2NRJfogRoYIg=="
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.4.tgz",
+      "integrity": "sha512-7oL7CcPSfoyoNx3Ba1+79ykJzpEKVhHUyfAiN5eT/FoeDXOR3eBDLXf9ndDNuxaExmjpI+zVi2dMMuaoXUOzNA=="
     },
     "node_modules/@types/source-list-map": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.3.tgz",
-      "integrity": "sha512-I9R/7fUjzUOyDy6AFkehCK711wWoAXEaBi80AfjZt1lIkbe6AcXKd3ckQc3liMvQExWvfOeh/8CtKzrfUFN5gA==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.4.tgz",
+      "integrity": "sha512-Kdfm7Sk5VX8dFW7Vbp18+fmAatBewzBILa1raHYxrGEFXT0jNl9x3LWfuW7bTbjEKFNey9Dfkj/UzT6z/NvRlg==",
       "dev": true
     },
     "node_modules/@types/svgo": {
@@ -2815,15 +2815,15 @@
       }
     },
     "node_modules/@types/tapable": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.9.tgz",
-      "integrity": "sha512-fOHIwZua0sRltqWzODGUM6b4ffZrf/vzGUmNXdR+4DzuJP42PMbM5dLKcdzlYvv8bMJ3GALOzkk1q7cDm2zPyA==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.10.tgz",
+      "integrity": "sha512-q8F20SdXG5fdVJQ5yxsVlH+f+oekP42QeHv4s5KlrxTMT0eopXn7ol1rhxMcksf8ph7XNv811iVDE2hOpUvEPg==",
       "dev": true
     },
     "node_modules/@types/uglify-js": {
-      "version": "3.17.2",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.2.tgz",
-      "integrity": "sha512-9SjrHO54LINgC/6Ehr81NjAxAYvwEZqjUHLjJYvC4Nmr9jbLQCIZbWSvl4vXQkkmR1UAuaKDycau3O1kWGFyXQ==",
+      "version": "3.17.3",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.3.tgz",
+      "integrity": "sha512-ToldSfJ6wxO21cakcz63oFD1GjqQbKzhZCD57eH7zWuYT5UEZvfUoqvrjX5d+jB9g4a/sFO0n6QSVzzn5sMsjg==",
       "dev": true,
       "dependencies": {
         "source-map": "^0.6.1"
@@ -2835,9 +2835,9 @@
       "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
     },
     "node_modules/@types/webpack": {
-      "version": "4.41.34",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.34.tgz",
-      "integrity": "sha512-CN2aOGrR3zbMc2v+cKqzaClYP1ldkpPOgtdNvgX+RmlWCSWxHxpzz6WSCVQZRkF8D60ROlkRzAoEpgjWQ+bd2g==",
+      "version": "4.41.35",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.35.tgz",
+      "integrity": "sha512-XRC6HLGHtNfN8/xWeu1YUQV1GSE+28q8lSqvcJ+0xt/zW9Wmn4j9pCSvaXPyRlCKrl5OuqECQNEJUy2vo8oWqg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -2849,9 +2849,9 @@
       }
     },
     "node_modules/@types/webpack-sources": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.1.tgz",
-      "integrity": "sha512-iLC3Fsx62ejm3ST3PQ8vBMC54Rb3EoCprZjeJGI5q+9QjfDLGt9jeg/k245qz1G9AQnORGk0vqPicJFPT1QODQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.2.tgz",
+      "integrity": "sha512-acCzhuVe+UJy8abiSFQWXELhhNMZjQjQKpLNEi1pKGgKXZj0ul614ATcx4kkhunPost6Xw+aCq8y8cn1/WwAiA==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -4598,9 +4598,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001549",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz",
-      "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==",
+      "version": "1.0.30001551",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz",
+      "integrity": "sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==",
       "dev": true,
       "funding": [
         {
@@ -5503,6 +5503,7 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5715,9 +5716,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.554",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.554.tgz",
-      "integrity": "sha512-Q0umzPJjfBrrj8unkONTgbKQXzXRrH7sVV7D9ea2yBV3Oaogz991yhbpfvo2LMNkJItmruXTEzVpP9cp7vaIiQ==",
+      "version": "1.4.559",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.559.tgz",
+      "integrity": "sha512-iS7KhLYCSJbdo3rUSkhDTVuFNCV34RKs2UaB9Ecr7VlqzjjWW//0nfsFF5dtDmyXlZQaDYYtID5fjtC/6lpRug==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -9153,9 +9154,9 @@
       }
     },
     "node_modules/libphonenumber-js": {
-      "version": "1.10.47",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.47.tgz",
-      "integrity": "sha512-b4t7VQDV29xx/ni+58yl9KWPGjnDLDXCeCTLrD4V8vDpObXZRZBrg7uX/HWZ7YXiJKqdBDGgc+barUUTNB6Slw=="
+      "version": "1.10.48",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.48.tgz",
+      "integrity": "sha512-Vvcgt4+o8+puIBJZLdMshPYx9nRN3/kTT7HPtOyfYrSQuN9PGBF1KUv0g07fjNzt4E4GuA7FnsLb+WeAMzyRQg=="
     },
     "node_modules/lie": {
       "version": "3.1.1",
@@ -11632,9 +11633,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.69.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.3.tgz",
-      "integrity": "sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==",
+      "version": "1.69.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.4.tgz",
+      "integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -13005,9 +13006,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.21.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.21.0.tgz",
-      "integrity": "sha512-WtnFKrxu9kaoXuiZFSGrcAvvBqAdmKx0SFNmVNYdJamMu9yyN3I/QF0FbH4QcqJQ+y1CJnzxGIKH0cSj+FGYRw==",
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.22.0.tgz",
+      "integrity": "sha512-hHZVLgRA2z4NWcN6aS5rQDc+7Dcy58HOf2zbYwmFcQ+ua3h6eEFf5lIDKTzbWwlazPyOZsFQO8V80/IjVNExEw==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -13697,9 +13698,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
-      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -13873,9 +13874,9 @@
       "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA=="
     },
     "node_modules/vue-loader": {
-      "version": "15.10.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
-      "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
+      "version": "15.11.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
       "dev": true,
       "dependencies": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -13901,11 +13902,12 @@
       }
     },
     "node_modules/vue-meta": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
-      "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
-      "dependencies": {
-        "deepmerge": "^4.2.2"
+      "version": "3.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-3.0.0-alpha.2.tgz",
+      "integrity": "sha512-mLDB/vGjn2Q58IFKs5Dtp/STWZ0sEbkdM67u+YXuMreK5EjNHnqhcylQb+xn50pwxCdQD98nGgJlEXkh16Hqug==",
+      "peerDependencies": {
+        "@vue/server-renderer": "^3.0.6",
+        "vue": "^3.0.0"
       }
     },
     "node_modules/vue-notion": {
diff --git a/package.json b/package.json
index feb5c40..dd71849 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "vue-confetti": "^2.3.0",
     "vue-country-flag-next": "^2.3.2",
     "vue-i18n": "^8.25.0",
-    "vue-meta": "^2.4.0",
+    "vue-meta": "^3.0.0-alpha.2",
     "vue-notion": "^3.0.0-beta.1",
     "vue-router": "^4.2.5",
     "vue-signature-pad": "^2.0.5",
diff --git a/resources/js/app.js b/resources/js/app.js
index 2ece41a..ab197d7 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,8 +2,8 @@ import { createApp, configureCompat, ref } from 'vue'
 import store from '~/store'
 import router from '~/router'
 import App from '~/components/App.vue'
-import registerPlugin from './plugins/vue-plugins'
 import Base from './base.js'
+import registerPlugin from './plugins'
 
 import '~/plugins'
 import '~/components'
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index b045e0e..41485d2 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -31,7 +31,6 @@
     <transition name="page" mode="out-in">
       <component :is="layoutComponent" v-if="layout" />
     </transition>
-    <div id="modals" />
     <stop-impersonation />
     <!--    <notifications />-->
   </div>
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
index 8c6f0de..2f34a1b 100644
--- a/resources/js/components/Modal.vue
+++ b/resources/js/components/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport to="#modals">
+  <Teleport to="body">
     <transition leave-active-class="duration-200" name="fade" appear>
       <div v-if="show" class="fixed z-30 top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center">
         <transition enter-active-class="transition-all delay-75 linear duration-300"
@@ -65,7 +65,7 @@
         </transition>
       </div>
     </transition>
-  </teleport>
+  </Teleport>
 </template>
 
 <script>
diff --git a/resources/js/components/forms/TextInput.vue b/resources/js/components/forms/TextInput.vue
index 89fc543..f10b8a8 100644
--- a/resources/js/components/forms/TextInput.vue
+++ b/resources/js/components/forms/TextInput.vue
@@ -1,48 +1,50 @@
 <template>
   <div :class="wrapperClass" :style="inputStyle">
     <slot name="label">
-      <label v-if="label" :for="id?id:name"
-             :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
-      >
-        {{ label }}
-        <span v-if="required" class="text-red-500 required-dot">*</span>
-      </label>
+      <input-label v-if="label"
+                   :label="label"
+                   :theme="theme"
+                   :required="true"
+                   :native-for="id?id:name"
+                   :uppercase-labels="uppercaseLabels"
+      />
     </slot>
-    <div v-if="help && helpPosition=='above_input'" class="flex mb-1">
-      <small :class="theme.default.help" class="grow">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
-    </div>
+    <input-help v-if="help && helpPosition=='above_input'" :help="help" :theme="theme">
+      <template #help>
+        <slot name="help" />
+      </template>
+    </input-help>
     <input :id="id?id:name" v-model="compVal" :disabled="disabled"
            :type="nativeType"
            :pattern="pattern"
            :style="inputStyle"
-           :class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
+           :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
            :name="name" :accept="accept"
            :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
            @change="onChange" @keydown.enter.prevent="onEnterPress"
     >
-    <div v-if="(help && helpPosition=='below_input') || showCharLimit" class="flex">
-      <small v-if="help && helpPosition=='below_input'" :class="theme.default.help" class="flex-grow">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
-      <small v-else class="flex-grow"></small>
-      <small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">
-      {{ charCount }}/{{ maxCharLimit }}
-      </small>
-    </div>
+    <!--    <input-help v-if="(help && helpPosition=='below_input') || showCharLimit" :help="help" :theme="theme">-->
+    <!--      <template v-if="showCharLimit" #after-help>-->
+    <!--        <small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">-->
+    <!--          {{ charCount }}/{{ maxCharLimit }}-->
+    <!--        </small>-->
+    <!--      </template>-->
+    <!--    </input-help>-->
     <has-error v-if="hasValidation" :form="form" :field="name" />
   </div>
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input.js'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputLabel from './components/InputLabel.vue'
+import InputHelp from './components/InputHelp.vue'
+
 export default {
   name: 'TextInput',
-
-  mixins: [inputMixin],
+  components: { InputHelp, InputLabel },
 
   props: {
+    ...inputProps,
     nativeType: { type: String, default: 'text' },
     accept: { type: String, default: null },
     min: { type: Number, required: false, default: null },
@@ -52,53 +54,29 @@ export default {
     pattern: { type: String, default: null }
   },
 
-  data: () => ({}),
+  setup (props) {
+    const { compVal, inputStyle, hasValidation, hasError } = useFormInput(props)
 
-  computed: {
-    compVal: {
-      set (val) {
-        if (this.form) {
-          this.$set(this.form, this.nativeType !== 'file' ? this.name : 'file-' + this.name, val)
-        } else {
-          this.content = val
-        }
-        if (this.hasValidation) {
-          this.form.errors.clear(this.name)
-        }
-        this.$emit('input', val)
-      },
-      get () {
-        if (this.form) {
-          return this.form[this.nativeType !== 'file' ? this.name : 'file-' + this.name]
-        }
-        return this.content
-      }
-    },
-    charCount() {
-      return (this.compVal) ? this.compVal.length : 0
-    }
-  },
-
-  watch: {},
-
-  created () {},
-
-  methods: {
-    onChange (event) {
-      if (this.nativeType !== 'file') return
+    const onChange = (event) => {
+      console.log(props)
+      if (props.nativeType !== 'file') return
 
       const file = event.target.files[0]
-      this.$set(this.form, this.name, file)
-    },
-    /**
-     * Pressing enter won't submit form
-     * @param event
-     * @returns {boolean}
-     */
-    onEnterPress (event) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.form[props.name] = file
+    }
+
+    const onEnterPress = (event) => {
       event.preventDefault()
       return false
     }
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    }
   }
 }
 </script>
diff --git a/resources/js/components/forms/components/InputHelp.vue b/resources/js/components/forms/components/InputHelp.vue
new file mode 100644
index 0000000..6a359c3
--- /dev/null
+++ b/resources/js/components/forms/components/InputHelp.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex mb-1">
+    <small :class="theme.default.help" class="grow flex">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <slot name="after-help">
+      <small class="flex-grow" />
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputHelp',
+
+  props: {
+    theme: { type: Object, required: true },
+    help: { type: String, required: true }
+  }
+}
+</script>
diff --git a/resources/js/components/forms/components/InputLabel.vue b/resources/js/components/forms/components/InputLabel.vue
new file mode 100644
index 0000000..227b10e
--- /dev/null
+++ b/resources/js/components/forms/components/InputLabel.vue
@@ -0,0 +1,22 @@
+<template>
+  <label :for="nativeFor"
+         :class="[theme.default.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
+  >
+    {{ label }}
+    <span v-if="required" class="text-red-500 required-dot">*</span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'InputLabel',
+
+  props: {
+    nativeFor: { type: String, default: null },
+    theme: { type: Object, required: true },
+    uppercaseLabels: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    label: { type: String, required: true }
+  }
+}
+</script>
diff --git a/resources/js/components/forms/useFormInput.js b/resources/js/components/forms/useFormInput.js
new file mode 100644
index 0000000..12238a0
--- /dev/null
+++ b/resources/js/components/forms/useFormInput.js
@@ -0,0 +1,74 @@
+import { ref, computed, watch, defineEmits } from 'vue'
+import { themes } from '~/config/form-themes.js'
+
+export const inputProps = {
+  id: { type: String, default: null },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  form: { type: Object, required: false },
+  value: { required: false },
+  required: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: null },
+  uppercaseLabels: { type: Boolean, default: false },
+  help: { type: String, default: null },
+  helpPosition: { type: String, default: 'below_input' },
+  theme: { type: Object, default: () => themes.default },
+  color: { type: String, default: '#3B82F6' },
+  wrapperClass: { type: String, default: 'relative mb-3' }
+}
+
+export function useFormInput (props) {
+  const content = ref(props.modelValue)
+
+  const inputStyle = computed(() => {
+    return {
+      '--tw-ring-color': props.color
+    }
+  })
+
+  const hasValidation = computed(() => {
+    return props.form !== null && props.form !== undefined && props.form.hasOwnProperty('errors')
+  })
+
+  const hasError = computed(() => {
+    return hasValidation && props.form?.errors.has(name)
+  })
+
+  const compVal = computed({
+    get: () => {
+      if (props.form) {
+        return props.form[props.name]
+      }
+      return content.value
+    },
+    set: (val) => {
+      if (props.form) {
+        props.form[props.name] = val
+      } else {
+        content.value = val
+      }
+
+      if (hasValidation.value) {
+        props.form.errors.clear(props.name)
+      }
+
+      defineEmits('update:modelValue', compVal.value)
+    }
+  })
+
+  // Watch for changes in props.modelValue and update the local content
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      content.value = newValue
+    }
+  )
+
+  return {
+    compVal,
+    inputStyle,
+    hasValidation,
+    hasError
+  }
+}
diff --git a/resources/js/pages/home.vue b/resources/js/pages/home.vue
index 5424c22..3f147a1 100644
--- a/resources/js/pages/home.vue
+++ b/resources/js/pages/home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-white">
-    <div class="flex bg-gray-50 pb-5">
+    <div class="flex bg-gray-50 pb-5 border-b">
       <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
         <div class="pt-4 pb-0">
           <div class="flex">
@@ -9,7 +9,7 @@
             </h2>
             <v-button v-track.create_form_click :to="{name:'forms.create'}">
               <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               Create a new form
             </v-button>
@@ -22,7 +22,7 @@
       <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
         <div class="mt-8 pb-0">
           <text-input v-if="forms.length > 0" class="mb-6" :form="searchForm" name="search" label="Search a form"
-                placeholder="Name of form to search"
+                      placeholder="Name of form to search"
           />
           <div v-if="allTags.length > 0" class="mb-4">
             <div v-for="tag in allTags" :key="tag"
@@ -39,14 +39,17 @@
           </div>
           <div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl">
             <img loading="lazy" class="w-56"
-                  :src="asset('img/pages/forms/search_notfound.png')" alt="search-not-found">
-            <h3 class="w-full mt-4 text-center text-gray-900 font-semibold">No forms found</h3>
+                 :src="asset('img/pages/forms/search_notfound.png')" alt="search-not-found"
+            >
+            <h3 class="w-full mt-4 text-center text-gray-900 font-semibold">
+              No forms found
+            </h3>
             <div v-if="isFilteringForms && enrichedForms.length === 0 && searchForm.search" class="mt-2 w-full text-center">
-              Your search "{{searchForm.search}}" did not match any forms. Please try again.
+              Your search "{{ searchForm.search }}" did not match any forms. Please try again.
             </div>
-            <v-button v-if="forms.length === 0" class="mt-4" v-track.create_form_click :to="{name:'forms.create'}">
+            <v-button v-if="forms.length === 0" v-track.create_form_click class="mt-4" :to="{name:'forms.create'}">
               <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               Create a new form
             </v-button>
@@ -54,30 +57,36 @@
           <div v-else-if="forms.length > 0" class="mb-10">
             <div v-if="enrichedForms && enrichedForms.length">
               <div v-for="(form) in enrichedForms" :key="form.id"
-                  class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center"
+                   class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center"
               >
                 <div class="flex-grow items-center truncate cursor-pointer" role="button" @click.prevent="viewForm(form)">
                   <span class="font-semibold text-gray-900 dark:text-white">{{ form.title }}</span>
                   <ul class="flex text-gray-500">
-                    <li class="pr-1">{{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}</li>
-                    <li class="list-disc ml-6 pr-1">{{ form.submissions_count }}
+                    <li class="pr-1">
+                      {{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}
+                    </li>
+                    <li class="list-disc ml-6 pr-1">
+                      {{ form.submissions_count }}
                       submission{{ form.submissions_count > 0 ? 's' : '' }}
                     </li>
-                    <li class="list-disc ml-6">Edited {{ form.last_edited_human }}</li>
+                    <li class="list-disc ml-6">
+                      Edited {{ form.last_edited_human }}
+                    </li>
                   </ul>
                   <div v-if="form.visibility=='draft' || (form.tags && form.tags.length > 0)" class="mt-1 flex items-center flex-wrap gap-3">
-                    <span v-if="form.visibility=='draft'" 
-                        class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                    <span v-if="form.visibility=='draft'"
+                          class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
                       Draft
                     </span>
                     <span v-for="(tag,i) in form.tags" :key="tag"
-                        class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                          class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
                     >
                       {{ tag }}
                     </span>
                   </div>
                 </div>
-                <extra-menu :form="form" :isMainPage="true" />
+                <extra-menu :form="form" :is-main-page="true" />
               </div>
             </div>
           </div>
@@ -148,7 +157,7 @@ export default {
       }
     },
     viewForm (form) {
-      this.$router.push({name: 'forms.show', params: {slug: form.slug}})
+      this.$router.push({ name: 'forms.show', params: { slug: form.slug } })
     }
   },
 
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index e8cd58b..58bce11 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -3,24 +3,30 @@
     <section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 ">
       <div class="absolute inset-0">
         <img class="w-full h-full object-cover object-top"
-             :src="asset('img/pages/ai_form_builder/background-pattern.svg')" alt="">
+             :src="asset('img/pages/ai_form_builder/background-pattern.svg')" alt=""
+        >
       </div>
 
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72">
         <div class="flex justify-center mb-5">
           <div
-            class="relative flex items-center shadow-sm bg-white gap-x-4 rounded-full px-4 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+            class="relative flex items-center shadow-sm bg-white gap-x-4 rounded-full px-4 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+          >
             <span class="font-semibold text-gray-500">We're Open-Source</span><span class="h-4 w-px bg-gray-900/10"
-                                                                                    aria-hidden="true"></span>
+                                                                                    aria-hidden="true"
+            />
             <a
-              target="_blank" class="flex items-center gap-x-1 hover:no-underline" href="https://github.com/jhumanj/opnform">
-              <span class="absolute inset-0" aria-hidden="true"></span>
+              target="_blank" class="flex items-center gap-x-1 hover:no-underline" href="https://github.com/jhumanj/opnform"
+            >
+              <span class="absolute inset-0" aria-hidden="true" />
               Star us on GitHub
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                   stroke="currentColor" aria-hidden="true" class="-mr-2 h-5 w-5 text-gray-400">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
+                   stroke="currentColor" aria-hidden="true" class="-mr-2 h-5 w-5 text-gray-400"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
               </svg>
-            </a></div>
+            </a>
+          </div>
         </div>
         <div class="max-w-4xl mx-auto text-center">
           <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
@@ -47,24 +53,27 @@
           <div class="justify-center flex gap-2 mt-10">
             <div class="flex items-center text-gray-400 text-sm">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
               </svg>
               <span>Unlimited forms</span>
             </div>
             <div class="flex items-center text-gray-400 text-sm">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
               </svg>
               <span>
-                  Unlimited fields
-                </span>
+                Unlimited fields
+              </span>
             </div>
             <div class="flex text-gray-400 text-sm">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
               </svg>
               <span>Unlimited responses</span>
             </div>
@@ -72,11 +81,14 @@
         </div>
 
         <div
-          class="w-full mt-12 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
+          class="w-full mt-12 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center"
+        >
           <div
-            class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
+            class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
+          >
             <img :src="asset('img/pages/welcome/product-cover.jpg')"
-                 alt="Product screenshot" loading="lazy" class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
+                 alt="Product screenshot" loading="lazy" class="rounded-md shadow-2xl ring-1 ring-gray-900/10"
+            >
           </div>
         </div>
       </div>
@@ -85,19 +97,19 @@
     <div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
       <div class="bg-white dark:bg-notion-dark-light pt-32 md:pt-52 lg:pt-72 pb-8">
         <div class="md:max-w-5xl md:mx-auto w-full">
-          <features class="pb-8"/>
+          <features class="pb-8" />
         </div>
       </div>
 
-      <ai-feature class="bg-white -mb-56"/>
+      <ai-feature class="bg-white -mb-56" />
 
-      <more-features class="pt-56"/>
+      <more-features class="pt-56" />
 
       <pricing-table v-if="paidPlansEnabled" class="pb-20" :home-page="true">
         <template #pricing-table>
           <li class="flex gap-x-3">
             <router-link :to="{name:'pricing'}" class="flex gap-3">
-              <div class="w-5"/>
+              <div class="w-5" />
               Read more about our pricing
             </router-link>
           </li>
@@ -112,13 +124,17 @@
       <!--        <testimonials/>-->
       <!--      </div>-->
 
-      <templates-slider class="max-w-full mb-12"/>
+      <templates-slider class="max-w-full mb-12" />
 
       <div class="w-full bg-blue-900 p-12 md:p-24 text-center">
-        <h4 class="font-semibold text-3xl text-white">Take your forms to the next level</h4>
-        <p class="text-gray-300 my-8">Generous, unlimited free plan.</p>
+        <h4 class="font-semibold text-3xl text-white">
+          Take your forms to the next level
+        </h4>
+        <p class="text-gray-300 my-8">
+          Generous, unlimited free plan.
+        </p>
         <div class="mt-6 flex justify-center">
-          <v-button :to="{ name: 'forms.create.guest' }" v-track.welcome_create_form_click :arrow="true" color="blue">
+          <v-button v-track.welcome_create_form_click :to="{ name: 'forms.create.guest' }" :arrow="true" color="blue">
             Create a form for FREE
           </v-button>
         </div>
@@ -127,40 +143,45 @@
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z"
-                fill="currentColor"/>
+                fill="currentColor"
+              />
             </svg>
           </a>
           <a target="_blank" :href="configLinks.facebook_group" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z"
-                fill="currentColor"/>
+                fill="currentColor"
+              />
             </svg>
           </a>
-          <a target="_blank" :href="configLinks.github_url" class="mr-4">
+          <a v-track.welcome_github_click target="_blank" :href="configLinks.github_url" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd"
                     d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z"
-                    fill="currentColor"/>
+                    fill="currentColor"
+              />
             </svg>
           </a>
         </div>
 
-        <p class="mt-12 text-white text-lg">The form below is an OpnForm, give it a try !</p>
+        <p class="mt-12 text-white text-lg">
+          The form below is an OpnForm, give it a try !
+        </p>
         <div class="md:max-w-5xl md:mx-auto w-full bg-white rounded-md mt-6 p-4 shadow-lg">
           <iframe class="mt-4" style="border:none;width:100%;" height="470px"
-                  src="https://opnform.com/forms/opnform-contact"></iframe>
+                  src="https://opnform.com/forms/opnform-contact"
+          />
         </div>
       </div>
 
-      <open-form-footer class="dark:border-t border-t"/>
-
+      <open-form-footer class="dark:border-t border-t" />
     </div>
   </div>
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
 import Features from '~/components/pages/welcome/Features.vue'
 import MoreFeatures from '~/components/pages/welcome/MoreFeatures.vue'
 import PricingTable from '../components/pages/pricing/PricingTable.vue'
@@ -171,18 +192,18 @@ import TemplatesSlider from '../components/pages/welcome/TemplatesSlider.vue'
 import SeoMeta from '../mixins/seo-meta.js'
 
 export default {
-  components: {Testimonials, OpenFormFooter, Features, MoreFeatures, PricingTable, AiFeature, TemplatesSlider},
-
-  layout: 'default',
+  components: { Testimonials, OpenFormFooter, Features, MoreFeatures, PricingTable, AiFeature, TemplatesSlider },
 
   mixins: [SeoMeta],
 
+  layout: 'default',
+
   data: () => ({
     title: window.config.appName,
-    metaTitle: 'Create beautiful & open-source forms for free',
+    metaTitle: 'Create beautiful & open-source forms for free'
   }),
 
-  mounted() {
+  mounted () {
   },
 
   methods: {
@@ -198,7 +219,7 @@ export default {
       authenticated: 'auth/check'
     }),
     configLinks: () => window.config.links,
-    paidPlansEnabled() {
+    paidPlansEnabled () {
       return window.config.paid_plans_enabled
     }
   }
diff --git a/resources/js/plugins/amplitude.js b/resources/js/plugins/amplitude.js
index b3d118e..8ffd150 100644
--- a/resources/js/plugins/amplitude.js
+++ b/resources/js/plugins/amplitude.js
@@ -1,12 +1,11 @@
-import Vue from 'vue'
-
 // Log event function used to log event. Can be used when not using the directive.
-Vue.prototype.$logEvent = function (eventName, eventData) {
+const logEvent = function (eventName, eventData) {
   if (!window.amplitude) return
   if (eventData && typeof eventData !== 'object') {
     throw new Error('Amplitude event value must be an object.')
   }
 
+  console.log('in', window.config.production)
   if (!window.config.production) {
     console.log('[DEBUG] Amplitude logged event:', eventName, eventData)
   } else {
@@ -22,16 +21,21 @@ function hookLogEvent (binding) {
   }
   const eventName = modifiers[0]
 
-  Vue.prototype.$logEvent(eventName, binding.value)
+  logEvent(eventName, binding.value)
 }
 
-// Register directive to log event
-const registeredListeners = {}
-Vue.directive('track', {
-  beforeMount (el, binding, vnode) {
-    registeredListeners[el] = () => {
-      hookLogEvent(binding)
+// Used in vue-plugins.js
+export function registerLogEventOnApp (app) {
+  app.config.globalProperties.$logEvent = logEvent
+
+  // Register directive to log event
+  const registeredListeners = {}
+  app.directive('track', {
+    beforeMount (el, binding, vnode) {
+      registeredListeners[el] = () => {
+        hookLogEvent(binding)
+      }
+      el.addEventListener('click', registeredListeners[el])
     }
-    el.addEventListener('click', registeredListeners[el])
-  }
-})
+  })
+}
diff --git a/resources/js/plugins/index.js b/resources/js/plugins/index.js
index 37fe465..1131012 100644
--- a/resources/js/plugins/index.js
+++ b/resources/js/plugins/index.js
@@ -1,5 +1,17 @@
 import './axios'
-import './vue-plugins'
-import './amplitude'
+import { registerLogEventOnApp } from './amplitude'
 import './vapor'
 import './sentry'
+
+import Notifications from 'vue3-vt-notifications'
+import { createMetaManager } from 'vue-meta'
+
+function registerPlugin (app) {
+  const metaManager = createMetaManager()
+
+  app.use(Notifications)
+  app.use(metaManager)
+  registerLogEventOnApp(app)
+  return app
+}
+export default registerPlugin
diff --git a/resources/js/plugins/vue-plugins.js b/resources/js/plugins/vue-plugins.js
deleted file mode 100644
index c361294..0000000
--- a/resources/js/plugins/vue-plugins.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Notifications from 'vue3-vt-notifications'
-import Meta from 'vue-meta'
-
-function registerPlugin (app) {
-  app.use(Notifications)
-  app.use(Meta)
-  return app
-}
-export default registerPlugin
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 69397e9..a8bc935 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -47,7 +47,7 @@ async function getMatchedComponents (to) {
  */
 async function beforeEach (to, from, next) {
   // Sentry tracking
-  if (false && window.config.sentry_dsn) {
+  if (window.config.sentry_dsn) {
     Sentry.configureScope((scope) => scope.setTransactionName(to?.name || 'Unknown route name'))
   }
 
diff --git a/vite.config.js b/vite.config.js
index 5a18417..54e5987 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,8 +7,7 @@ const plugins = [
   laravel({
     input: [
       'resources/js/app.js'
-    ],
-    valetTls: 'opnform.test'
+    ]
   }),
   vue({
     template: {