Aliases for imports in Vue

▶

In Vue, to avoid having syntax like the following when loading separate components from different locations in your project:

import Base from "../../components/Base" 

Which is more complicated, depending on where we import; for example, if we are in more internal locations and we have to navigate to higher files; we have to continue with this navigation.

Instead of using this kind of syntax, we can use an alias, which points directly to the source (src) folder of our project; therefore, no matter where our elements are from, we always have a shortcut to our src folder; with this our imports are much more concise, legible and direct; for this, we have to use the @ sign:

import Base from "@/components/Base"