eleventy-plugin-vite Run transformation after vite replaces asset paths

I'm trying to fix the problem referenced in this issue: https://github.com/vitejs/vite/issues/7362, ie. trying to add the full site URL in front of the og:image image path.

I've tried a few things such as writing a transfrom but it runs before vite middleware, and wrote a vite plugin but that also ran just before asset paths were replaced, so asset paths are seen as __VITE_ASSET__BAZUZ5RZ__, which doesn't help either. Is there a way I can run a transform after vite is done with the final output?

Jan 12 '25 23:01 cfq

An 11ty transform probably doesn't work, as this plugin first runs 11ty and then Vite. I don't know much about Vite plugins and can't say, if one could solve this problem with this approach. Most importantly, only if you use the v6 alpha of this plugin, you will use Vite v6. And only then, og:image assets will be handled through Vite.

Have you tried solving it likes this? https://vite.dev/guide/build.html#advanced-base-options

Jan 13 '25 06:01 KiwiKilian

Hi @KiwiKilian,

Most importantly, only if you use the v6 alpha of this plugin, you will use Vite v6. And only then, og:image assets will be handled through Vite.

Yes, I've switched to using v6-alpha, and getting asset paths correctly replaced on og:image. Just need to have the full url prepended.

Have you tried solving it likes this? https://vite.dev/guide/build.html#advanced-base-options

I'll have a look now, thanks!

Jan 13 '25 13:01 cfq

@cfq were you able to solve your problem?

Jan 30 '25 20:01 KiwiKilian

@KiwiKilian apologies for the late response, but unfortunately no, the issue still persists.

Aug 06 '25 01:08 cfq

I'm testing with in the example of this plugin, with this config:

import EleventyVitePlugin from "../.eleventy.js";

export default function (eleventyConfig) {
	eleventyConfig.addPassthroughCopy("src/assets");

	eleventyConfig.addPlugin(EleventyVitePlugin, {
		viteOptions: {
			base: "https://example.com/",
		},
	});
}

export const config = {
	dir: {
		input: "src",
	},
};

This template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Eleventy Plugin Vite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta property="og:image" content="{{ '/assets/og.png' | url }}" />

    <link rel="stylesheet" href="{{ '/assets/main.css' | url }}" />
  </head>

  <body>
    <h1>Eleventy Plugin Vite</h1>
  </body>
</html>

Results in:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Eleventy Plugin Vite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta property="og:image" content="https://example.com/assets/og-C3M7hVVQ.png" />

    <link rel="stylesheet" crossorigin href="https://example.com/assets/index-2jUbQT3t.css">
  </head>

  <body>
    <h1>Eleventy Plugin Vite</h1>
  </body>
</html>

Looks pretty much like it's working as expected. What's the issue you are experiencing? Are you using the latest version?

Aug 09 '25 10:08 KiwiKilian