So I just started migrating using the migration guide and the Compat build so we could more smoothly transition. I have setup the vue.config.js like:

chainWebpack: (config) => {
// Set alias for Vue compatibility build
config.resolve.alias.set('vue', '@vue/compat');

// Set other aliases
config.resolve.alias
  .set('@common', path.resolve('src/common'))
  .set('@', path.resolve('src/'));

// Add extensions
config.resolve.extensions
  .merge(['.js', '.ts', '.tsx']);

// Modify vue-loader options
config.module
  .rule('vue')
  .use('vue-loader')
  .tap((options) => {
    return {
      ...options,
      compilerOptions: {
        compatConfig: {
          MODE: 2,
        },
      },
    };
  });
 },

And changed my main.ts to:

  createApp({
router,
i18n,
render: () =>
  h(App, {
    logo: '/img/sodra-logo.svg',
  }),
  }).mount('#app');

Now when running npm run serve i get tons of errors and almost all seems to be similar to

TS2339: Property '$t' does not exist on type 'HomePage'.
311 |       {
312 |         routeName: routeNameHomePage,
> 313 |         name: this.$t('breadcrumbs.' + routeNameHomePage).toString(),
        |                    ^^
    314 |       },
    315 |     ];
    316 |

But it is not only for the localization; it seems to be anything with this.$ like it gives the same type of error for this.$route, and this.$moment etc. I have tried to find if this has been changed, but I cannot find out that the use of $ would be deprecated. And since it affects all $. O guess there is some config I have missed somewhere.

My tsconfig.json is like this since there is a typescript error thrown:

    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": ["vite/client", "vue", "webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"],
      "@common/*": ["src/common/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}