Compiling with no Issues

webapp.my-invoices/.eslintrc.js

@@ -8,11 +8,11 @@ module.exports = {
     'eslint:recommended',
     '@vue/typescript/recommended',
     '@vue/prettier',
-    '@vue/prettier/@typescript-eslint',
+    //    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
     ecmaVersion: 2020,
-    parser: '@typescript-eslint/parser'
+    parser: '@typescript-eslint/parser',
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -22,7 +22,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/t' + 'ests/unit/**/*.spec.{j,t}s?(x)'],
       env: {
         jest: true,
       },

webapp.my-invoices/package.json

@@ -10,49 +10,45 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0-0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "core-js": "^3.20.1",
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@tailwindcss/typography": "^0.4.0",
-    "@testing-library/vue": "6.3.1",
-    "@types/jest": "^26.0.19",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@babel/core": "^7.16.7",
+    "@testing-library/vue": "^6.4.2",
+    "@types/jest": "^27.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/parser": "^5.8.1",
     "@vue/cli-plugin-babel": "~5.0.0-rc.1",
     "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
     "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
     "@vue/cli-plugin-router": "~5.0.0-rc.1",
     "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
     "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
-    "@vue/cli-plugin-vuex": "~5.0.0-rc.1",
     "@vue/cli-service": "~5.0.0-rc.1",
-    "@vue/compiler-sfc": "^3.0.0-0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/test-utils": "^2.0.0-0",
-    "autoprefixer": "^9",
-    "cypress": "^6.2.0",
-    "eslint": "^7.32.0",
+    "@vue/compiler-sfc": "^3.2.26",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "autoprefixer": "^10.4.1",
+    "cypress": "^9.2.0",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^27.1.0",
-    "node-sass": "^5.0.0",
-    "postcss": "^7",
+    "postcss": "^8.4.5",
     "prettier": "^2.4.1",
-    "sass-loader": "^10.1.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "sass": "^1.45.2",
+    "sass-loader": "^10.2.0",
+    "tailwindcss": "^3.0.8",
     "ts-jest": "^27.0.4",
-    "typescript": "~4.1.5",
-    "vue-jest": "^5.0.0-0"
+    "typescript": "^4.5.4",
+    "vue-jest": "^5.0.0-alpha.10",
+    "webpack": "^5.65.0"
   },
-  "resolution": {
-    "cypress": "^6",
-    "jest": "^26"
+  "resolutions": {
+    "jest" : "^27"
   }
 }

webapp.my-invoices/src/App.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import NavHeader from './components/NavHeader.vue';
 import Sidebar from '@/components/Sidebar.vue';
-import Debug from '@/components/Debug.vue';
+import Debug from './components/DebugLayout.vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({

webapp.my-invoices/src/components/Debug.vue → webapp.my-invoices/src/components/DebugLayout.vue

@@ -11,7 +11,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-export default defineComponent({});
+export default defineComponent({
+  name: 'DebugLayout',
+});
 </script>
 
 <style lang="scss"></style>

webapp.my-invoices/src/components/NavHeader.vue

@@ -119,7 +119,7 @@ export default defineComponent({
       .map((r) => {
         return {
           route: r.name,
-          caption: r.meta.nav.caption,
+          caption: r.meta.nav?.caption ?? 'Missing Caption',
         };
       });
     console.log(items);

webapp.my-invoices/src/components/Sidebar.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
+  name: 'SidebarNavigation',
   data() {
     return {
       expandOnHover: false,

webapp.my-invoices/src/modules/customers/Customers.vue

@@ -7,6 +7,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-export default defineComponent({});
+export default defineComponent({
+  name: 'CustomersView',
+});
 </script>
 <style lang="scss"></style>

webapp.my-invoices/src/modules/customers/customers-store.ts

@@ -2,11 +2,18 @@ import { createSimpleStoreKey, SimpleStore } from '../../store/simple-store';
 import { App } from '@vue/runtime-core';
 import { inject } from 'vue';
 
-type CustomersState = {};
+type Customer = {
+  name: string;
+};
+type CustomersState = {
+  customers: Customer[];
+};
 
 class CustomersStore extends SimpleStore<CustomersState> {
   protected data(): CustomersState {
-    return {};
+    return {
+      customers: [],
+    };
   }
 }
 

webapp.my-invoices/src/modules/invoices/Invoices.vue

@@ -24,6 +24,7 @@ type InvoiceOverview = {
 };
 
 export default defineComponent({
+  name: 'InvoicesView',
   props: {
     invoices: {
       type: Array as PropType<InvoiceOverview[]>,

webapp.my-invoices/src/modules/projects/Projects.vue

@@ -30,7 +30,7 @@ import { computed, defineComponent, ref } from 'vue';
 import { useProjectsStore } from './projects-store';
 
 export default defineComponent({
-  name: 'Projects',
+  name: 'ProjectsView',
   setup() {
     const newProject = ref('');
     const store = useProjectsStore();

webapp.my-invoices/src/modules/projects/products/ProductList.vue

@@ -10,9 +10,9 @@ export default defineComponent({
   name: 'ProductList',
   props: {
     products: {
-      type: Object as PropType<Product[]>,
+      type: Array as PropType<Product[]>,
       required: true,
-      default: () => [],
+      default: (): [] => [],
     },
   },
   setup() {

webapp.my-invoices/src/modules/projects/products/Products.vue

@@ -11,7 +11,7 @@ import ProductList from './ProductList.vue';
 import ProductForm from './ProductForm.vue';
 
 export default defineComponent({
-  name: 'Products',
+  name: 'ProductsView',
   components: { ProductList, ProductForm },
   setup() {
     const store = useProductsStore();

webapp.my-invoices/src/router/index.ts

@@ -5,6 +5,14 @@ import ProjectRoutes from '@/modules/projects/projects-routes';
 import InvoicesRoutes from '@/modules/invoices/invoices-routes';
 import TimeKeepingRoutes from '@/modules/timeKeeping/time-keeping-routes';
 
+declare module 'vue-router' {
+  interface RouteMeta {
+    nav?: {
+      caption: string;
+    };
+  }
+}
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',

webapp.my-invoices/src/views/About.vue

@@ -8,6 +8,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'About',
+  name: 'AboutView',
 });
 </script>

webapp.my-invoices/src/views/Home.vue

@@ -12,6 +12,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Home',
+  name: 'HomeView',
 });
 </script>

webapp.my-invoices/tailwind.js

@@ -2,11 +2,7 @@
 const colors = require('tailwindcss/colors');
 
 module.exports = {
-  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
-  future: {
-    purgeLayersByDefault: true,
-    removeDeprecatedGapUtilities: true,
-  },
+  content: ['./src/**/*.{html,vue,js}'],
   theme: {
     extend: {
       colors: {
@@ -15,9 +11,5 @@ module.exports = {
     },
   },
   variants: {},
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    // ...
-  ],
+  plugins: [],
 };