Vue 3 + class decorators setup

Address.vue

<template>
    <div>
        <span v-for='block, idx in blocks' v-bind:key='idx'>
            <span>{{ block }}</span><span v-if='idx < blocks.length - 1'>, </span>
        </span>
    </div>
</template>

<script lang="ts">
import { Vue, Options, Prop } from 'vue-decorator';
import { AddressInfo } from '../store/store-types';
@Options({})
export default class Address extends Vue {
    @Prop()
    address: AddressInfo;
    get blocks() {
        const res = [];
        if (this.address.Street)
            res.push(`${this.address.Street} ${this.address.AddressNr}`);
        if (this.address.City)
            res.push(`${this.address.ZipCode ?? ''} ${this.address.City}`);
        if (this.address.Province)
            res.push(this.address.Province);
        if (this.address.Country)
            res.push(this.address.Country);
        return res;
    }
}
</script>

App.vue

<template>
    <header class="app-header fixed-top">
        <HeaderBar></HeaderBar>
        <nav-menu></nav-menu>
     </header>
     <div class="app-wrapper">
          <router-view />
     </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-decorator';
import NavMenu from './components/NavMenu.vue';
import HeaderBar from './components/HeaderBar.vue';
@Options({
    components: {
        HeaderBar,
        NavMenu
  }
})
export default class App extends Vue {
}
</script>

<style>
</style>

main.ts

import { createApp } from 'vue'
import { store } from './store/index';
import "@popperjs/core";
import "bootstrap";
import './App.scss'
import App from './App.vue'
import router from './router/index'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import './fortawesome';

createApp(App)
    .use(router)
    .use(store)
    .component("font-awesome-icon", FontAwesomeIcon)
    .mount('#app')

package.json

{
  "name": "clientapp",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite",
    "lint": "vite lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/vue-fontawesome": "3.0.0-4",
    "@popperjs/core": "2.10.2",
    "axios": "0.24.0",
    "bootstrap": "5.1.3",
    "bootstrap-icons-vue": "0.7.0",
    "core-js": "3.19.1",
    "vue": "3.2.22",
    "vue-class-component": "8.0.0-rc.1",
    "vue-property-decorator": "10.0.0-rc.3",
    "vue-decorator": "1.1.3",
    "vue-loader-v16": "16.0.0-beta.5.4",
    "vue-router": "4.0.12",
    "vuex": "4.0.2",
    "s-vuex-class": "0.4.1"
  },
  "devDependencies": {
    "@types/mini-css-extract-plugin": "2.4.0",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "3.2.22",
    "sass": "1.43.4",
    "sass-loader": "12.3.0",
    "typescript": "4.4.4",
    "upath": "2.0.1",
    "vue-tsc": "^0.29.5",
    "vite": "2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/no-non-null-assertion": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  }
})