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
– Ohgodwhy, Commented Oct 4, 2021 at 16:31
Ok, but could you please elaborate. This is my first try on any frontend javascript framework. — Mr.Singh
– Mr.Singh, Commented Oct 4, 2021 at 16:59

Mr.Singh · Accepted Answer · 2021-10-05 08:06:24Z

5

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

answered Oct 5, 2021 at 8:06

Mr.Singh

2,0557 gold badges32 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.Js: Alias configurations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related