Auto-import components in Astro projects
npm install astro-auto-importThis an Astro integration that allows you to auto-import components or other modules and access them in MDX files without importing them.
``shell`
npm i astro-auto-import
If you aren’t already using MDX, you’ll need to add it too:
`shell`
npx astro add mdx
Import the integration and add it to your astro.config.* file:
`js
import { defineConfig } from 'astro/config';
import AutoImport from 'astro-auto-import';
import mdx from '@astrojs/mdx';
export default defineConfig({
integrations: [
AutoImport({
imports: [
// Import a component’s default export
// generates:
// import A from './src/components/A.astro';
'./src/components/A.astro',
{
// Explicitly alias a default export
// generates:
// import { default as B } from './src/components/B.astro';
'./src/components/B.astro': [['default', 'B']],
// Import a module’s named exports
// generates:
// import { Tweet, YouTube } from 'astro-embed';
'astro-embed': ['Tweet', 'YouTube'],
// Import all named exports from a module as a namespace
// generates:
// import * as Components from './src/components';
'./src/components': 'Components',
},
],
}),
// Make sure the MDX integration is included AFTER astro-auto-import
mdx(),
],
});
`
#### imports
Type: (string | Record
An array of items that configure what files are imported and how.
##### Default exports
For Astro components or other files that have a default export, the easiest option is to provide their path and they will be imported with a name based on the file name.
`js`
imports: ['./src/components/A.astro', './src/components/react/ReactComponent.tsx'];
The above config will import A and ReactComponent respectively, so they could be used as or .
###### Equivalent to
`js`
import A from './src/components/A.astro';
import ReactComponent from './src/components/react/ReactComponent.tsx';
##### Named exports
For script modules or component frameworks that can use named exports, you can pass an object mapping the module to the names you want to import.
`js`
imports: [
{
'astro-embed': ['Twitter', 'YouTube'],
},
];
This config will import both the Twitter and YouTube components from the astro-embed package.
###### Equivalent to
`js`
import { Twitter, YouTube } from 'astro-embed';
#### Import aliasing
In some cases you may want to alias a default or named export to a different name either for convenience or to avoid conflicts. In this case instead of passing strings, you can pass a tuple of ['original-name', 'alias'].
`js`
imports: [
{
'./src/components/B.astro': [['default', 'RenamedB']],
},
];
This config will import the Astro component in src/components/B.astro but make it available as .
##### Equivalent to
`js`
import { default as RenamedB } from './src/components/B.astro';
#### Namespace import
If you want to import all the named exports in a file to a namespace, you can pass a string to set the namespace to import to:
`js`
imports: [
{
'./src/components/index': 'Components',
},
];
This config would import all the components in an index file, making them available as , etc.
##### Equivalent to
`js``
import * as Components from './src/components/index';
MIT