In Nuxt.js, both @ and ~ import from the root of the project, but there is a little difference in how they are applied. Here's a full and precise explanation:
@- alias for src folder
Default convention: The @ symbol by default is an alias for the src folder. So, it points to the ./src directory as the place of core logic where do existing components, store, middleware etc. reside.
Use case: This is most commonly used when importing a file, components, or store modules into your project.
Example:
import MyComponent from '@/components/MyComponent.vue'
The following line would import the MyComponent.vue file. Provided your components folder is in the src directory (or root if there's no src folder).
Why @ Why use @ is more common in Nuxt.js, and using " is an assurance on compatibility with automatic directory resolving and build configuration with Nuxt.
~ (symbol for root folder)
Alias for the root directory: ~ symbol is an alias for your projects' root directory - similar to process.cwd() in Node.js. Which means the root directory might not be where a code file is-residing. It's not necessarily your src directory.
Example of use: It uses to import files which locate in the root directory of the project or in the root's assets, static, or custom directories.
Example:
import logo from '~/assets/logo.png' This brings the logo.png file into the assets folder of the root directory. ~ is especially useful when you want to refer to files at the root level, including those in your static or assets directories or any of your other custom configuration paths.
