javascriptnuxt.jsnuxt3.js

Imports in Nuxt with @ or ~, which is better?

In Nuxt 3, imports can reference the project root using either ~ or @, for example:

import SubHeader from "@/components/SubHeader.vue"

vs

import SubHeader from "~/components/SubHeader.vue"

Is there a functional difference between these? Is one preferred over the other?

Solution

  • Both @ and ~ are valid in Nuxt, you can choose what you prefer.

    It is worth mentioning that the core members of Nuxt prefer ~ because it is much safer in edge cases where @ has special meaning in toolings. You can see now that the official docs only use ~ in the examples.

    Ref: https://github.com/nuxt/nuxt/pull/24574#issuecomment-1841628599