Vite plugins inside Vite config?

[cozarkd]

Hi,

Is it possible to use plugins inside the Vite config that lives in .eleventy.js?

I'm trying to make Preact work with this setup using Preset Vite. Maybe is not the best approach but is where I ended.

I'm trying with something like this:

eleventyConfig.addPlugin(EleventyVitePlugin, {
        tempFolderName: '.11ty-vite', // Default name of the temp folder

        // Vite options (equal to vite.config.js inside project root)
        viteOptions: {
            publicDir: 'public',
            clearScreen: false,
            server: {
                mode: 'development',
                middlewareMode: true,
            },
                        plugins: [preact()],
            appType: 'custom',
            assetsInclude: ['**/*.xml', '**/*.txt'],
            [........]

Not sure how to import the module in the .eleventy.js as I would do in vite.config.js like: import preact from "@preact/preset-vite";

Maybe I'm wrong with the approach, let me know.

Ty

[cozarkd]

Nevermind I moved all the config to the vite.config.js file so I can follow some docs and try to do it.

[cozarkd]

I open this one again because doesn't seem to work with the external vite.config.js file. Maybe I'm missing something. How would be the recommended approach to include Vite plugins?

Ty

[jakewhiteley]

Bumping this issue

[saschakrueger]

Did you find any solution for this? I have the same issue. Some plugins can only be imported as module via "import" and not via require.

[cozarkd]

Did you find any solution for this? I have the same issue. Some plugins can only be imported as module via "import" and not via require.

Well, I finally migrated to Slinkity because I like the project, works with Vite and I'll use preact components too. So, no, I didn't found a solution.

[saschakrueger]

Thanks. I will look into that. Last time I checked they said it's still in early alpha.

[KiwiKilian]

With the new v5 alpha release this is now possible. Just a little example:

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite"
import { createHtmlPlugin } from 'vite-plugin-html'

/** @type {import("@11ty/eleventy-plugin-vite").EleventyViteOptions} */
const eleventyVitePluginOptions = {
  viteOptions: {
    plugins: [createHtmlPlugin({minify:true})]
  }
}

export default function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy(`${eleventyConfig.directories.input}assets/`);

  eleventyConfig.addPlugin(EleventyVitePlugin, eleventyVitePluginOptions);
};

If you have further questions, feel free to reach out!