unplugin-yaml

Allow import YAML file for Vite, Webpack, Rollup and esbuild. With TypeScript support. Powered by unplugin.

Install

npm i -D unplugin-yaml

Usage

[!TIP] You can view all examples here.

// vite.config.ts
import YAMLPlugin from "unplugin-yaml/vite";

export default defineConfig({
  plugins: [
    YAMLPlugin({ /* options */ }),
  ],
});

// rollup.config.js
import YAMLPlugin from "unplugin-yaml/rollup";

export default {
  plugins: [
    YAMLPlugin({ /* options */ }),
  ],
};

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("unplugin-yaml/webpack").default({ /* options */ }),
  ],
};

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ["unplugin-yaml/nuxt", { /* options */ }]
  ],
});

// astro.config.mjs
import { defineConfig } from "astro/config";
import YAMLPlugin from "unplugin-yaml/astro";

// https://astro.build/config
export default defineConfig({
  integrations: [
    YAMLPlugin({
      /* options */
    })
  ]
});

// esbuild.config.js
import { build } from "esbuild";
import YAMLPlugin from "unplugin-yaml/esbuild";

build({
  /* ... */
  plugins: [
    YAMLPlugin({
      /* options */
    }),
  ],
});

// farm.config.ts
import { defineConfig } from "@farmfe/core";
import vue from "@vitejs/plugin-vue";
import YAMLPlugin from "unplugin-yaml/farm";

export default defineConfig({
  vitePlugins: [
    vue(),
  ],
  plugins: [
    YAMLPlugin({
      /* options */
    })
  ]
});

[!IMPORTANT] Currently Rspack works a little different, due to rspack not supporting the resolveId. It is currently worked on here

// rspack.config.js
const rspack = require("@rspack/core");

/** @type {import('@rspack/cli').Configuration} */
const config = {
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: "./index.html"
    }),
    require("unplugin-yaml/rspack")(),
  ],

};
module.exports = config;

// rolldown.config.js
import { defineConfig } from "rolldown";
import YAMLPlugin from "unplugin-yaml/rolldown";

export default defineConfig({
  input: "./index.js",
  plugins: [
    YAMLPlugin({
      /* options */
    }),
  ],
});

Configuration

YAMLPlugin({
  include: [
    /\.yamlcustom$/, // .yamlcustom
  ],
  parserOptions: {
    // see js-yaml load options
  }

});

TypeScript

[!IMPORTANT] If you are using JSR, you need to copy the yaml.d.ts file into your project. jsr doesn't support augmentation on global types.

If you are using TypeScript, you need to add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "types": [
      "unplugin-yaml/types"
    ]
  }
}

📄 License

Published under MIT License.