[SOLVED] Can astro components be globally available?

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.

Install the dependency:
```
npm i astro-auto-import
```

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(),
  ],
});