Nuxt 3 - Aliases - How can aliases be used inside a config file?

Question

When trying to importing files through aliases at the configuration (nuxt.config.ts), an error occurs: Cannot find module '~/....

There is an example: codesnadbox.io

Short example

nuxt.config.ts

import { book } from "~/vars";

export default defineNuxtConfig({
  runtimeConfig: {
    bookApiEndpoint: book.apiEndpoint || "",
  },
});

Full example

If use an absolute path, then file will be imported:

import { book } from "./vars";

But if there is another import through the alias inside the file, then there will be an error again (pic.1):

./vars.ts

export * from "~/entities";

./entities/index.ts

export * from "./book";

./entities/book.ts

export const book = {
    apiEndpoint: '/api/book'
}

There is an example: codesnadbox.io

Question

How can aliases be used inside a config file?

Thank you in advance!

There is an example: codesnadbox.io

Answer 1

Aliases for @ and ~ mapping to the project root are already pre-configured in Nuxt but are only available during runtime compilation.

They are not available to use for compilation setup and configuration, IDE's will wrongly auto-complete imports with ~ alias instead of . dot notation.

You have to use the traditional directory dot notations in config files to import other files into them.

You will be fine to use @ (at) and ~ (tilde) everywhere else in your project where files are part of the compilation process not compilation setup.

import { book } from './vars'