Vue.Js: Alias configurations

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';
...