Should I be using @ or ~ in JS imports (Vue.js/Nuxt.js)?

Question

I'm sorry if this is a duplicate but I couldn't find the appropriate answer to my question.

As you might know, Webpack has an alias for the root dir which is ~ . That said, I have seen many people use the @ symbol when importing modules using ES6 syntax. Both works when importing modules.

My question is this... Is there any consequences by using the ~ symbol when importing modules in pages and components or is it just a best practise to be using @ ? I use ~ since there is less chance for me to mix up the two since the nuxt.config.js file does not support the use of @ .

Answer 1

There is no standard way of referencing a root folder in JS. From my knowledge this is not specified in any specs.

Both ~ and @ are defined by whatever package bundler your using.

In this case going with whatever is standard for that environment should be fine.

I'm more used with @ because that's the default for vue.js/webpack installs, but I would use anything that comes out of the box with a different setup.

Answer 2

The ~ -prefix is used to resolve the import from the node_modules -path. The @ -prefix is set-up in Vue to resolve the import from the src -path.