Installing a Vite or Rollup plugin - Withastro

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (.yml) file in Astro.

Recipe

<Steps> 1. Install `@rollup/plugin-yaml`:

<PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm install @rollup/plugin-yaml --save-dev
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm add @rollup/plugin-yaml --save-dev
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn add @rollup/plugin-yaml --dev
    ```
    </Fragment>
</PackageManagerTabs>

2. Import the plugin in your astro.config.mjs and add it to the Vite plugins array:

```js title="astro.config.mjs" ins={2,5-7}
import { defineConfig } from 'astro/config';
import yaml from '@rollup/plugin-yaml';

export default defineConfig({
  vite: {
    plugins: [yaml()]
  }
});
```

3. Finally, you can import YAML data using an import statement:

```js
import yml from './data.yml';
```

:::note
While you can now import YAML data in your Astro project, your editor will not provide types for the imported data. To add types, create or find an existing `*.d.ts` file in the `src` directory of your project and add the following:
```ts title="src/files.d.ts"
// Specify the file extension you want to import
declare module "*.yml" {
  const value: any; // Add type definitions here if desired
  export default value;
}
```
This will allow your editor to provide type hints for your YAML data.
:::

</Steps>