astrojs

Can astro components be globally available?


I have a couple of astro components and I would like to avoid importing them every single time I write content in a .mdx just like this.

import Note from '@components/Note.astro';

Is there any way to make component Note globally available and not having to import manually every time? Thanks.


Solution

  • You can set this up with the astro-auto-import integration.

    1. Install the dependency:

      npm i astro-auto-import
      
    2. Add it to your astro.config.mjs:

      import { defineConfig } from 'astro/config';
      import AutoImport from 'astro-auto-import';
      import mdx from '@astrojs/mdx';
      
      export default defineConfig({
        integrations: [
          AutoImport({
            imports: [
              // Add your Note component to the auto-imports:
              '@components/Note.astro',
            ],
          }),
      
          // Make sure the MDX integration is included AFTER astro-auto-import
          mdx(),
        ],
      });