Skip to main content
FarmFarm
Version: 1.x
On this page

Community Plugins

Vite/Rollup Plugins

Farm support Vite/Rollup plugins out of box. So Vite/Rollup or unplugin plugins can be used in Farm directly.

using vitePlugins in farm.config.ts to configure Vite/Rollup plugins.

ts
import { UserConfig } from "@farmfe/core";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

const config: UserConfig = {
  vitePlugins: [vue(), vueJsx()],
};

unplugin

ts
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/rollup";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
import { FileSystemIconLoader } from "unplugin-icons/loaders";

const config: UserConfig = {
  vitePlugins: [
    Icons({
      compiler: "vue3",
      customCollections: {
        [collectionName]: FileSystemIconLoader(localIconPath, (svg) =>
          svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
        ),
      },
      scale: 1,
      defaultClass: "inline-block",
    }),
    Components({
      dts: "src/typings/components.d.ts",
      types: [{ from: "vue-router", names: ["RouterLink", "RouterView"] }],
      resolvers: [
        NaiveUiResolver(),
        IconsResolver({
          customCollections: [collectionName],
          componentPrefix: VITE_ICON_PREFIX,
        }),
      ],
    }),
  ],
};

All unplugin are supported in Farm:

100%

Drag or pinch to explore. Keyboard: + / − zoom, arrows pan, 0 resets, Esc closes.