Vue.Js: Alias configurations - vue.js

Question

I am trying to make aliases for the components and sub-directories using jsconfig.json in my Vue.js project. But I am getting this error:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#components/*": [
"./src/components/*"
],
}
},
"exclude": [
"node_modules"
]
}
SomeFile.vue
import GuestLayout from '#components/Layouts/GuestLayout';
Error:
ERROR Failed to compile with 1 error
...
To install it, you can run: npm install --save #components/Layouts/GuestLayout
I tried goggling for the issue but nothing seems to be working. This is the simplest one which found https://www.youtube.com/watch?v=U73TDohXmhQ
What am I doing wrong here..?

Answer 1

✔ Problem solved:
The thing that did the trick for me, was setting up the configurations in vue.config.js instead of using the jsconfig.json or tsconfig.json.
vue.config.js
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#Layouts': path.resolve(__dirname, 'src/components/Layouts/'),
'#Inputs': path.resolve(__dirname, 'src/components/Input/'),
'#': path.resolve(__dirname, 'src/components/'),
}
}
}
}
SomeFile.vue
import GuestLayout from '#Layouts/GuestLayout';
import FormGroup from '#Inputs/FormGroup';
...