Vue cli 3 project alias src to @ or ~/ not working

Question

I have installed the project with vue cli 3 but as the project grows, the import on the components are getting ugly, i end up importing a component like

import Component from '../../../../components/folder/Component.vue'

i just want to alias the src folder and do

import Component from '@components/folder/Component.vue'

i did read that i have to modify the vue.config.js, i have done it but the error is the same

Module not found: Error: Can't resolve '@components/Permissions/PermissionsTable'

this is my vue.config.js

const path = require("path");

const vueSrc = "./src";

module.exports = {
  runtimeCompiler: true,
  css: {
    modules: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, vueSrc)
      }
    }
  }

};

am i missing something? what else should i do?

Answer 1

I was missing extensions: ['.js', '.vue', '.json'], and in the import i have to use '@/components/...'