Nuxt•4d ago

Explicit import from local Layer

Hi! I am migrating a Nuxt app to a layered architecture because we want to create a second application with a lot of the same core code, just some pages that are different. I migrated the folder structure to the following: - pnpm-workspace.yaml - package.json - packages - autoatlas (website1) - - nuxt.config.ts - package.json - leaseboer (website2) - - nuxt.config.ts - package.json - base (shared code) - *** - nuxt.config.ts - package.json For now I moved the code of our current website into base, but only moved the pages in the autoatlas layer. The autoatlas layer and leasboer layer both extend the base layer. The autoatlas layer runs but I have some explicit imports that now do not resolve anymore. I for example need to explicitly import a store from autoatlas that is located in the base layer. So my basic question is, how do I explicitly import something from another layer?

6 Replies

kapa.ai•4d ago

Hi @RicharDVD. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To explicitly import something from another layer in your Nuxt layered architecture, you have a few options: Using Layer Aliases Since Nuxt 3.16.0, named layer aliases are automatically created for layers. This means you can access your base layer using the #layers/base alias:

// In autoatlas or leaseboer layer
import { YourStore } from '#layers/base/stores/your-store'

// In autoatlas or leaseboer layer
import { YourStore } from '#layers/base/stores/your-store'

This is the most straightforward approach if you're using a recent version of Nuxt that supports named layer aliases Getting Started > Layers. Using Direct Imports You can also use the #components alias to directly import components from any layer:

// For components
import { YourComponent } from '#components'

// For components
import { YourComponent } from '#components'

This works for components that are auto-imported from any layer Directory Structure > Components. Workarounds for Older Nuxt Versions If you're using an older version of Nuxt that doesn't support named layer aliases, you might need to: 1. Use relative paths (though this can be cumbersome with deep nesting) 2. Create custom aliases in your nuxt.config.ts:

// In autoatlas/nuxt.config.ts
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url))
  }
})

// In autoatlas/nuxt.config.ts
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url))
  }
})

Then import using:

import { YourStore } from '@base/stores/your-store'

import { YourStore } from '@base/stores/your-store'

Important Caveats Be aware that there are some known issues with aliases in layers: 1. When using global aliases like ~/ and @/ in layer components, they resolve relative to the user's project paths, not the layer Going Further > Layers > Relative Paths and Aliases. 2. There have been issues with dependency resolution in layers, particularly with Vite's optimization. Some users have reported problems with imports not resolving correctly GitHub Issue #30978. If you encounter issues with imports not resolving, you might need to: - Ensure dependencies are properly installed in all relevant packages - Consider using relative paths as a fallback solution - Make sure you're using a recent version of Nuxt that has better layer support ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@268039364590829568> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RicharDVDOP•4d ago

@kapa.ai I looked into Layer Aliases but they seem to be registered only when adding layers to the layers folder of your nuxt application. I don't see

#layers

#layers

is registered in the generated tsconfig of the autoatlas layer. I did try to create a custom alias myself, like follows:

export default defineNuxtConfig({
  extends: ['../base'],
  ...
  alias: {
    '@base': '../../base',
    '@base/*': '../../base/*',
  },
});

export default defineNuxtConfig({
  extends: ['../base'],
  ...
  alias: {
    '@base': '../../base',
    '@base/*': '../../base/*',
  },
});

This seems to resolve correctly inside my editor (so cmd clicking the import works and the red line under the import disappears), but when loading the application I still get the following error message when running the application: Failed to resolve import "@base/app/stores/auth.store" from "app/pages/dashboard/index.vue"

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I can see you're having issues with custom aliases in your Nuxt layered architecture. This is a common challenge when working with Nuxt layers. The problem you're experiencing is that while your editor recognizes the alias (thanks to TypeScript configuration), Vite/Rollup (which handles the actual module resolution at runtime) isn't properly resolving it. This is a known issue with aliases in Nuxt layers. Here are some solutions to try: 1. Use absolute paths with fileURLToPath Instead of using relative paths like '../../base', use absolute paths:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  }
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  }
})

This approach is recommended in the Nuxt documentation for handling paths in layers Going Further > Layers > Relative Paths and Aliases. 2. Configure Vite directly You might need to also configure the alias in Vite:

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  },
  vite: {
    resolve: {
      alias: {
        '@base': fileURLToPath(new URL('../base', import.meta.url)),
      }
    }
  }
})

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  },
  vite: {
    resolve: {
      alias: {
        '@base': fileURLToPath(new URL('../base', import.meta.url)),
      }
    }
  }
})

3. Check for Nuxt version issues There have been several issues with aliases in Nuxt 3.16.0: - GitHub Issue #31339 reported that the alias entry doesn't work properly in Nuxt v3.16 - GitHub Issue #31303 shows similar problems with path aliases If you're using Nuxt 3.16.0, consider updating to a newer patch version where these issues might be fixed, or temporarily downgrading to 3.15.x. 4. Alternative approach with manual layer registration Instead of using the extends property, you could try manually registering your base layer in the layers directory and then use the #layers/base alias:

- packages
   - autoatlas
         - layers
              - base (symlink or copy of ../base)
         - nuxt.config.ts

- packages
   - autoatlas
         - layers
              - base (symlink or copy of ../base)
         - nuxt.config.ts

This would enable the automatic layer aliases that Nuxt 3.16+ provides. 5. Consider using Nitro's alias configuration If you're importing in server-side code, you might need to configure Nitro's aliases as well:

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  },
  nitro: {
    alias: {
      '@base': fileURLToPath(new URL('../base', import.meta.url)),
    }
  }
})

export default defineNuxtConfig({
  extends: ['../base'],
  alias: {
    '@base': fileURLToPath(new URL('../base', import.meta.url)),
  },
  nitro: {
    alias: {
      '@base': fileURLToPath(new URL('../base', import.meta.url)),
    }
  }
})

This approach was suggested as a workaround in GitHub Issue #31339. Let me know if any of these approaches work for your specific setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@268039364590829568> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RicharDVDOP•4d ago

Using absolute paths with fileURLToPath seems to work 😃

Gaming

Programming

Explicit import from local Layer

Did you find this page helpful?