Installation & Usage

Astro Integration Kit provides a suite of useful utilities to help you build your integrations. Some of them are global, others are meant to be used in hooks and plugins are available for more advanced use cases. Each utility is fully documented with examples and options!

Installation

Add astro-integration-kit using your favorite package manager:

pnpm

pnpm add astro-integration-kit

npm

npm install astro-integration-kit

yarn

yarn add astro-integration-kit

Tip

For the easiest way to start creating an integration with Astro Integration Kit, we recommend using this template: astro-integration-template!

Example

Here we are using the addVitePlugin utility to add a TypeScript declaration file to the user’s project! This is useful for typing things like Virtual Modules!

my-integration/index.ts

import { z } from "astro/zod";
import { defineIntegration, addVitePlugin } from "astro-integration-kit";
import vitePlugin from "vite-plugin";

export default defineIntegration({
  name: "my-integration",
  optionsSchema: z.object({
    pluginOptions: z.object({}).optional(),
  }),
  setup({ options }) {
    return {
      hooks: {
        "astro:config:setup": (params) => {
          addVitePlugin(params, {
            plugin: vitePlugin(options.pluginOptions),
          });
        },
      },
    };
  },
});