Typescript path aliases don't work

Typescript has this neat feature where you can set custom paths for your directories like so:

{
	"compilerOptions": {
		"paths": {
			"@/*": [
				"src/*"
			],
			"@Components/*": [
				"modules/static/shared/components/*"
			]
		}
	},
}

This helps you to not write those long imports in your code when you have a really big up with hundreds of components. The problem is that, in the current version, Vue does not support path aliases out of the box.

In a simple typescript environment, in Node.js, it is usually done with packages like “tsconfig-paths” by calling tsconfig-paths/register when running your node app.

Maybe we can have this already setup in the projectThe end user experience is that the devs won’t have to spend hours setting it up due to lack of documentation (just like I do right now and no solution found).

Suggested solutions found on the internet don’t work:

Solution 1 (doesn’t work)

// vue.config.ts
module.exports = {
	chainWebpack(config) {
		console.log('consoleProfileFinished', config)
		config.resolve.alias.delete("@")
		config.resolve
			.plugin("tsconfig-paths")
			.use(require("tsconfig-paths-webpack-plugin"))
	},
}

Solution 2

// vue.config.ts
const path = require('path')
module.exports = {
	chainWebpack: config => {
		config.resolve.alias
			.set('@', path.resolve(__dirname, 'src/main/javascript'));
	}
}

How can we make custom typescript path aliases work in Vue?

From vue.js - Vue-typescript error with webpack alias, path not found - Stack Overflow

Your tsconfig.json paths need to be in sync with paths in the configureWebpack section in your vue.config.js. See above link for syntax.