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..?

You've told typescript that this path should be included, but you have not defined the corresponding alias within webpack. without this, the transpiler has no way of knowing what that is. — Ohgodwhy, Oct 04 '21 at 16:31
Ok, but could you please elaborate. This is my first try on any frontend javascript framework. — Mr.Singh, Oct 04 '21 at 16:59

score 2 · Accepted Answer · answered Oct 05 '21 at 08:06

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

Vue.Js: Alias configurations

1 Answers1