Installing a Vite or Rollup plugin

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

Install @rollup/plugin-yaml:
ターミナルウィンドウ
```
npm install @rollup/plugin-yaml --save-dev
```
Copied!

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

import { defineConfig } from 'astro/config';
import yaml from '@rollup/plugin-yaml';

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

Finally, you can import YAML data using an import statement:
```
import yml from './data.yml';
```
Copied!
ノート
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:
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;
}
```
Copied!
This will allow your editor to provide type hints for your YAML data.

その他のレシピ

Share State Between Islands

Learn how to share state across components — and frameworks! — with Nano Stores.
RSS

AstroのRSS入門
Installing a Vite or Rollup plugin

Learn how you can import YAML data by adding a Rollup plugin to your project.
Build Forms With API Routes

Learn how to use JavaScript to send form submissions to an API Route
Build HTML Forms in Astro Pages

Learn how to build HTML forms and handle submissions in your frontmatter
Use Bun with Astro

Learn how to use Bun with your Astro site.
Verify a Captcha

Learn how to create an API route and fetch it from the client.
Build your Astro Site with Docker

Learn how to build your Astro site using Docker.
Add icons to external links

Learn how to install a rehype plugin to add icons to external links in your Markdown files
Add i18n features

Use dynamic routing and content collections to add internationalization support to your Astro site.
Add Reading Time

Build a remark plugin to add reading time to your Markdown or MDX files.

どんなことを？

どんなことを？

Installing a Vite or Rollup plugin

Recipe

その他のレシピ

Share State Between Islands

RSS

Installing a Vite or Rollup plugin

Build Forms With API Routes

Build HTML Forms in Astro Pages

Use Bun with Astro

Verify a Captcha

Build your Astro Site with Docker

Add icons to external links

Add i18n features

Add Reading Time