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