Updated to modern vite/vue setup

Author: PrinsINT

client/.browserslistrc

@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 120

client/.editorconfig

@@ -0,0 +1 @@
+* text=auto eol=lf

client/.eslintrc.js

@@ -1,21 +1,30 @@
-.DS_Store
-node_modules
-/dist
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

client/.gitattributes

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": false,
+  "printWidth": 120
+}

client/.gitignore

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "oxc.oxc-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}

client/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

client/.vscode/extensions.json

@@ -0,0 +1,20 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "oxc.enable": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

client/.vscode/launch.json

@@ -9,23 +9,29 @@
 </template>
 
 <script setup lang="ts">
-// library imports
-import { computed, ref } from 'vue';
-// components imports
-// props
-// emits
-// data
+// -- libraries --
+import { computed, ref } from "vue"
+// --- components ---
+// --- stores ---
+// --- api ---
+// --- types ---
+// --- props ---
+const { foo = "bar" } = defineProps<{
+    foo?: string
+}>()
+// --- emits ---
+// --- data ---
 const visible = ref<boolean>(true)
-// computed
+// --- computed ---
 const isVisible = computed<boolean>(() => visible.value) // arrow function where possible
-// watch
-// lifecycle (in order of execution)
-// methods
+// --- watch ---
+// --- lifecycle (in order of execution) ---
+// --- methods ---
 </script>
 
 <style scoped lang="scss">
 /**
- * Avoid html element as selectors and use classes instead. 
+ * Avoid html element as selectors and use classes instead.
  */
 .btn {
     background-color: green;