astro-auto-import
v0.4.4
Published
Auto-import components in Astro projects
Downloads
60,084
Maintainers
Readme
astro-auto-import
This an Astro integration that allows you to auto-import components or other modules and access them in MDX files without importing them.
Installation
npm i astro-auto-import
If you aren’t already using MDX, you’ll need to add it too:
npx astro add mdx
Usage
Import the integration and add it to your astro.config.*
file:
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(),
],
});
Options
imports
Type: (string | Record<string, (string | [string, string])[]>)[]
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.
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 <A />
or <ReactComponent />
.
Equivalent to
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.
imports: [
{
'astro-embed': ['Twitter', 'YouTube'],
},
];
This config will import both the Twitter
and YouTube
components from the astro-embed
package.
Equivalent to
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']
.
imports: [
{
'./src/components/B.astro': [['default', 'RenamedB']],
},
];
This config will import the Astro component in src/components/B.astro
but make it available as <RenamedB />
.
Equivalent to
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:
imports: [
{
'./src/components/index': 'Components',
},
];
This config would import all the components in an index file, making them available as <Components.A />
, <Components.B />
etc.
Equivalent to
import * as Components from './src/components/index';
License
MIT