OneBite.Dev - Coding blog in a bite size

How to load component once in astro mdx (auto import)

Auto import any component to your mdx files. Set the component once and use it everywhere!

When using MDX file in Astro JS you probably need a custom component. What if you can load the component once and use it at all astro mdx files without importing it? a.k.a auto import!

Thanks to @delucis! for creating astro-auto-import package

How to install astro auto import


npm i astro-auto-import // for NPM
yarn add astro-auto-import // for yarn



import AutoImport from 'astro-auto-import';

export default defineConfig({
  site: '',
  integrations: [
      imports :[

That’s it!

Now you can use component in your contents / collection mdx files, without importing it first.