WIP: Vue3 Migration

.eslintrc.js

@@ -66,13 +66,20 @@ module.exports = {
     'func-names': 0,
     // Vue specific rules
     'vue/max-attributes-per-line': 'off',
+    'vue/multi-word-component-names': 'warn',
+    'vue/no-reserved-component-names': 'warn',
+    // turn off this rule for vue3. see: https://eslint.vuejs.org/rules/no-v-for-template-key.html
+    'vue/no-v-for-template-key': 'off',
   },
 
   settings: {
     'import/resolver': {
-      webpack: {
-        config: './node_modules/@vue/cli-service/webpack.config.js',
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        moduleDirectory: ['node_modules', 'src/'],
       },
+      typescript: {},
     },
   },
 };

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint-staged

.storybook/preview.js

@@ -1,17 +1,17 @@
 import '@/assets/css/tailwind.css';
-import Autocomplete from '@/components/Autocomplete';
-import Badge from '@/components/Badge';
-import BaseButton from '@/components/BaseButton';
-import BaseCheckbox from '@/components/BaseCheckbox';
-import BaseIcon from '@/components/BaseIcon';
-import BaseInput from '@/components/BaseInput';
-import BaseLink from '@/components/BaseLink';
-import BaseRadio from '@/components/BaseRadio';
-import BaseText from '@/components/BaseText';
-import FormSelect from '@/components/FormSelect';
-import Modal from '@/components/Modal';
-import Spinner from '@/components/Spinner';
-import Tag from '@/components/Tag';
+import Autocomplete from '@/components/Autocomplete.vue';
+import Badge from '@/components/Badge.vue';
+import BaseButton from '@/components/BaseButton.vue';
+import BaseCheckbox from '@/components/BaseCheckbox.vue';
+import BaseIcon from '@/components/BaseIcon.vue';
+import BaseInput from '@/components/BaseInput.vue';
+import BaseLink from '@/components/BaseLink.vue';
+import BaseRadio from '@/components/BaseRadio.vue';
+import BaseText from '@/components/BaseText.vue';
+import FormSelect from '@/components/FormSelect.vue';
+import Modal from '@/components/Modal.vue';
+import Spinner from '@/components/Spinner.vue';
+import Tag from '@/components/Tag.vue';
 import VueCompositionApi from '@vue/composition-api';
 import VueI18n from 'vue-i18n';
 import {
@@ -22,9 +22,8 @@ import {
   secondsToHm,
   snakeToTitleCase,
 } from '@/filters';
-import Authenticated from '@/layouts/Authenticated';
-import Unauthenticated from '@/layouts/Unauthenticated';
-import VueLog from '@dreipol/vue-log';
+import Authenticated from '@/layouts/Authenticated.vue';
+import Unauthenticated from '@/layouts/Unauthenticated.vue';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -43,13 +42,14 @@ import Vue from 'vue';
 import VueAutosuggest from 'vue-autosuggest';
 import VueAxios from 'vue-axios';
 import Popover from 'vue-js-popover';
-import * as ModalDialogs from 'vue-modal-dialogs';
 import vSelect from 'vue-select';
 import Toasted from 'vue-toasted';
 // Import Vue plugins
 import Vuex from 'vuex';
 import { getOrganizationName } from '../src/filters';
+import Logger from 'js-logger';
 
+Logger.useDefaults();
 library.add(fas);
 
 // Base Components
@@ -79,7 +79,6 @@ Vue.config.productionTip = false;
 Vue.use(VueResize);
 Vue.use(VueAutosuggest);
 Vue.use(VTooltip);
-Vue.use(ModalDialogs);
 Vue.use(VueAxios, axios);
 Vue.use(require('vue-moment'), { moment });
 
@@ -90,7 +89,6 @@ Vue.use(Toasted, {
 });
 
 Vue.use(VueI18n);
-Vue.use(VueLog);
 Vue.use(Popover);
 Vue.version = '2.0';
 Vue.use(VueCompositionApi);

.tool-versions

@@ -1,3 +1,3 @@
-nodejs 14.17.0
+nodejs 14.20.0
 direnv 2.21.2
 java adoptopenjdk-8.0.272+10

public/index.html → index.html

@@ -10,7 +10,7 @@
       ;NREUM.info={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",licenseKey:"NRJS-15c5a88c5d87c10da34",applicationID:"1046769301",sa:1}
     </script>
     <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:100, 300,400,500,600,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&display=swap" rel="stylesheet">
     <script src="https://maps.googleapis.com/maps/api/js?key=<%= VUE_APP_GOOGLE_MAPS_API_KEY %>&libraries=places"></script>
@@ -34,6 +34,7 @@
       <strong>We're sorry but crisiscleanup doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+

package.json

@@ -3,6 +3,7 @@
   "version": "3.2.15",
   "private": true,
   "scripts": {
+    "prepare": "is-ci || husky install",
     "serve": "vue-cli-service serve --mode production",
     "build": "vue-cli-service build",
     "test:unit": "cross-env VUE_CLI_BABEL_TARGET_NODE=true VUE_CLI_BABEL_TRANSPILE_MODULES=true NODE_ENV=test jest --coverage",
@@ -21,7 +22,8 @@
     "lint-staged": "lint-staged",
     "postinstall": "yarn cache clean",
     "prettify": "prettier --write {.,**}/*.js **/*.vue **/**/*.{vue,js}",
-    "serve-dev": "cross-env NODE_ENV=development NODE_IS_WATCH=1 vue-cli-service serve --mode development",
+    "dev": "vite --port 8080",
+    "serve-dev": "cross-env NODE_ENV=development NODE_IS_WATCH=1 vite",
     "serve-prod": "cross-env NODE_ENV=production NODE_IS_WATCH=1 vue-cli-service serve --mode production",
     "serve-staging": "cross-env NODE_ENV=staging NODE_IS_WATCH=1 vue-cli-service serve --mode staging",
     "storybook": "cross-env NODE_ENV=storybook start-storybook -p 6006",
@@ -40,7 +42,6 @@
     "@babel/runtime": "^7.11.2",
     "@babel/runtime-corejs3": "^7.13.7",
     "@chenfengyuan/vue-number-input": "^1.2.1",
-    "@dreipol/vue-log": "0.0.8",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -55,11 +56,9 @@
     "@ringcentral/sdk": "^4.3.3",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@turf/turf": "^5.1.6",
-    "@u3u/vue-hooks": "^2.0.1",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
-    "@vue/cli": "4.5.17",
-    "@vue/composition-api": "^1.2.1",
+    "@vue/compat": "^3.1.0",
     "@vuex-orm/core": "^0.36.3",
     "@vuex-orm/plugin-axios": "^0.9.4",
     "@vuex-orm/plugin-change-flags": "^1.2.3",
@@ -86,6 +85,7 @@
     "google-maps-api-loader": "^1.1.1",
     "handlebars": "^4.7.7",
     "jest-environment-jsdom": "^28.1.1",
+    "js-logger": "^1.6.1",
     "jwt-decode": "^2.2.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
@@ -114,7 +114,7 @@
     "unique-names-generator": "^4.3.0",
     "v-calendar": "^2.4.1",
     "v-tooltip": "^2.0.3",
-    "vue": "2.6.12",
+    "vue": "^3.1.0",
     "vue-autosuggest": "^2.2.0",
     "vue-axios": "^2.1.5",
     "vue-browser-acl": "^0.15.2",
@@ -126,38 +126,37 @@
     "vue-composable": "^1.0.0-beta.18",
     "vue-cookies": "^1.7.4",
     "vue-cron-editor-buefy": "^0.2.17",
-    "vue-easy-lightbox": "^0.16.2",
-    "vue-gtag": "^1.9.0",
+    "vue-easy-lightbox": "1.7.1",
+    "vue-gtag": "2.0.1",
     "vue-highlight-words": "^1.2.0",
     "vue-histogram-slider": "^0.3.8",
     "vue-hotjar": "^1.2.0",
-    "vue-i18n": "^8.22.0",
+    "vue-i18n": "^9.2.0",
     "vue-js-popover": "^1.2.1",
     "vue-js-toggle-button": "^1.3.3",
     "vue-json-edit": "^1.4.3",
     "vue-json-viewer": "^2.2.19",
     "vue-marquee-text-component": "^1.2.0",
-    "vue-modal-dialogs": "^3.0.0",
     "vue-moment": "^4.1.0",
-    "vue-mq": "^1.0.1",
     "vue-native-websocket": "^2.0.14",
     "vue-numeral-filter": "^2.0.0",
     "vue-phone-number-input": "^1.1.10",
     "vue-picture-swipe": "^2.1.0",
     "vue-range-slider": "^0.6.0",
     "vue-responsive": "^1.1.0",
-    "vue-router": "^3.2.0",
+    "vue-router": "^4.1.3",
     "vue-router-multi-view": "^0.1.0",
     "vue-select": "^3.18.3",
     "vue-socket.io": "^3.0.10",
     "vue-timers": "^2.0.4",
     "vue-toasted": "^1.1.28",
-    "vue-types": "^1.7.0",
+    "vue-types": "4.2.1",
     "vue2-gmap-custom-marker": "^5.6.0",
     "vue2-google-maps": "^0.10.7",
+    "vue3-mq": "^3.1.0",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "^1.6.2",
-    "vuex": "^3.6.2",
+    "vuex": "^4.0.2",
     "vuex-module-decorators": "^0.17.0",
     "vuex-persist": "^3.1.3"
   },
@@ -189,13 +188,10 @@
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/babel-preset-app": "^4.5.4",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
-    "@vue/cli-plugin-eslint": "^4.5.6",
-    "@vue/cli-plugin-typescript": "~4.5.17",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "^4.5.4",
+    "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^1.1.0",
     "@vue/vue2-jest": "^28.0.0",
@@ -220,14 +216,15 @@
     "eslint": "7.32.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-prettier": "^6.12.0",
-    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-import-resolver-typescript": "^3.4.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.3.0",
     "eslint-plugin-vue-types": "^2.0.0",
-    "husky": "^7.0.2",
+    "husky": "^8.0.1",
+    "is-ci": "^3.0.1",
     "istanbul-lib-coverage": "^3.0.0",
     "jest": "^28.0.3",
     "jest-canvas-mock": "^2.2.0",
@@ -245,6 +242,7 @@
     "postcss-atroot": "^0.1.3",
     "postcss-easings": "^2.0.0",
     "postcss-extend-rule": "^3.0.0",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^4.2.3",
     "postcss-nested-ancestors": "^2.0.0",
     "postcss-preset-env": "^6.7.0",
@@ -266,10 +264,10 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "thread-loader": "^3.0.4",
     "typescript": "~4.1.5",
+    "vite": "^3.0.4",
     "vue-cli-plugin-cypress-experimental": "~1.1.0",
     "vue-docgen-api": "^4.32.4",
     "vue-docgen-loader": "^1.5.0",
-    "vue-template-compiler": "2.6.12",
     "vue-undo-redo-stack": "^1.0.0",
     "vuex-mock-store": "0.0.8"
   },
@@ -284,10 +282,9 @@
     }
   },
   "lint-staged": {
-    "*.{js,vue}": [
-      "vue-cli-service lint",
-      "prettier --write",
-      "git add --force"
+    "*.{js,ts,vue}": [
+      "eslint --fix",
+      "prettier --write"
     ],
     "*.json": [
       "prettier --write",

postcss.config.js

@@ -12,6 +12,7 @@ module.exports = {
     require('postcss-preset-env')({
       stage: 1,
     }),
+    require('postcss-import'),
     require('postcss-atroot'),
     require('postcss-property-lookup'),
     require('postcss-nested-ancestors'),