Merge pull request #44 from JaZo/feature/vuetify

Migrate to Vuetify and Vue 3

.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
-not ie <= 8
+not dead
+not ie 11

.ddev/config.yaml

@@ -1,6 +1,6 @@
 name: guess-them-all
 type: php
-docroot: ""
+docroot: dist
 php_version: "8.1"
 webserver_type: nginx-fpm
 router_http_port: "8080"
@@ -16,7 +16,7 @@ use_dns_when_possible: true
 timezone: Europe/Amsterdam
 composer_version: "2"
 web_environment: []
-nodejs_version: "20"
+corepack_enable: false
 web_extra_exposed_ports:
     - name: vite
       container_port: 5173
@@ -32,13 +32,14 @@ web_extra_exposed_ports:
 # name: <projectname> # Name of the project, automatically provides
 #   http://projectname.ddev.site and https://projectname.ddev.site
 
-# type: <projecttype>  # backdrop, craftcms, django4, drupal6/7/8/9/10, laravel, magento, magento2, php, python, shopware6, silverstripe, typo3, wordpress
-# See https://ddev.readthedocs.io/en/latest/users/quickstart/ for more
+# type: <projecttype>  # backdrop, craftcms, django4, drupal, drupal6, drupal7, laravel, magento, magento2, php, python, shopware6, silverstripe, typo3, wordpress
+# See https://ddev.readthedocs.io/en/stable/users/quickstart/ for more
 # information on the different project types
+# "drupal" covers recent Drupal 8+
 
 # docroot: <relative_path> # Relative path to the directory containing index.php.
 
-# php_version: "8.1"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1", "8.2", "8.3"
+# php_version: "8.2"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1", "8.2", "8.3", "8.4"
 
 # You can explicitly specify the webimage but this
 # is not recommended, as the images are often closely tied to DDEV's' behavior,
@@ -48,8 +49,9 @@ web_extra_exposed_ports:
 
 # database:
 #   type: <dbtype> # mysql, mariadb, postgres
-#   version: <version> # database version, like "10.4" or "8.0"
-#   MariaDB versions can be 5.5-10.8 and 10.11, MySQL versions can be 5.5-8.0
+#   version: <version> # database version, like "10.11" or "8.0"
+#   MariaDB versions can be 5.5-10.8, 10.11, and 11.4.
+#   MySQL versions can be 5.5-8.0.
 #   PostgreSQL versions can be 9-16.
 
 # router_http_port: <port>  # Port to be used for http (defaults to global configuration, usually 80)
@@ -89,14 +91,15 @@ web_extra_exposed_ports:
 # Alternatively, an explicit Composer version may be specified, for example "2.2.18".
 # To reinstall Composer after the image was built, run "ddev debug refresh".
 
-# nodejs_version: "18"
+# nodejs_version: "20"
 # change from the default system Node.js version to any other version.
-# Numeric version numbers can be complete (i.e. 18.15.0) or
-# incomplete (18, 17.2, 16). 'lts' and 'latest' can be used as well along with
-# other named releases.
-# see https://www.npmjs.com/package/n#specifying-nodejs-versions
-# Note that you can continue using 'ddev nvm' or nvm inside the web container
-# to change the project's installed node version if you need to.
+# See https://ddev.readthedocs.io/en/stable/users/configuration/config/#nodejs_version for more information
+# and https://www.npmjs.com/package/n#specifying-nodejs-versions for the full documentation,
+# Note that using of 'ddev nvm' is discouraged because "nodejs_version" is much easier to use,
+# can specify any version, and is more robust than using 'nvm'.
+
+# corepack_enable: false
+# Change to 'true' to 'corepack enable' and gain access to latest versions of yarn/pnpm
 
 # additional_hostnames:
 #  - somename
@@ -155,8 +158,8 @@ web_extra_exposed_ports:
 #   - "mutagen": enables Mutagen for this project.
 #   - "nfs":     enables NFS for this project.
 #
-# See https://ddev.readthedocs.io/en/latest/users/install/performance/#nfs
-# See https://ddev.readthedocs.io/en/latest/users/install/performance/#mutagen
+# See https://ddev.readthedocs.io/en/stable/users/install/performance/#nfs
+# See https://ddev.readthedocs.io/en/stable/users/install/performance/#mutagen
 
 # fail_on_hook_fail: False
 # Decide whether 'ddev start' should be interrupted by a failing hook
@@ -209,7 +212,7 @@ web_extra_exposed_ports:
 
 # disable_settings_management: false
 # If true, DDEV will not create CMS-specific settings files like
-# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php
+# Drupal's settings.php/settings.ddev.php or TYPO3's additional.php
 # In this case the user must provide all such settings.
 
 # You can inject environment variables into the web container with:

.eslintrc.cjs

@@ -1,25 +1,16 @@
 module.exports = {
     root: true,
-
     env: {
-      browser: true,
-      node: true,
-      es2022: true,
+        node: true,
     },
-
     extends: [
-        'plugin:vue/recommended',
-        '@vue/standard',
-        'plugin:vue/essential',
+        'plugin:vue/vue3-essential',
+        'eslint:recommended',
     ],
-
     rules: {
         'indent': ['error', 4, { SwitchCase: 1 }],
         'semi': ['error', 'always'],
         'comma-dangle': ['error', 'always-multiline'],
-        'vue/html-indent': ['error', 4],
-        'vue/max-attributes-per-line': 'off',
-        'vue/multi-word-component-names': 'off',
         'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

.gitignore

@@ -10,6 +10,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -18,4 +19,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw?

README.md

@@ -7,7 +7,7 @@ npm install
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production

index.html

@@ -1,28 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <title><%- title %></title>
-        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons" rel="stylesheet">
-        <link rel="icon" href="<%- base %>favicon.ico">
-        <link rel="icon" type="image/png" sizes="32x32" href="<%- base %>img/icons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="<%- base %>img/icons/favicon-16x16.png">
-        <meta name="theme-color" content="#448AFF">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="default">
-        <meta name="apple-mobile-web-app-title" content="<%- title %>">
-        <link rel="apple-touch-icon" href="<%- base %>img/icons/apple-touch-icon-152x152.png">
-        <link rel="mask-icon" href="<%- base %>img/icons/safari-pinned-tab.svg" color="#448AFF">
-        <meta name="msapplication-TileImage" content="<%- base %>img/icons/msapplication-icon-144x144.png">
-        <meta name="msapplication-TileColor" content="#000000">
-        <script type="module" src="/src/main.js"></script>
-    </head>
-    <body>
-        <noscript>
-            <strong>We're sorry but <%- title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-        </noscript>
-        <div id="app"></div>
-    </body>
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title><%- title %></title>
+    <link rel="icon" href="<%- base %>favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%- base %>img/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%- base %>img/icons/favicon-16x16.png">
+    <meta name="theme-color" content="#448AFF">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="<%- title %>">
+    <link rel="apple-touch-icon" href="<%- base %>img/icons/apple-touch-icon-152x152.png">
+    <link rel="mask-icon" href="<%- base %>img/icons/safari-pinned-tab.svg" color="#448AFF">
+    <meta name="msapplication-TileImage" content="<%- base %>img/icons/msapplication-icon-144x144.png">
+    <meta name="msapplication-TileColor" content="#000000">
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
 </html>

jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}