Problems incorporating eleventy-vite-plugin and getting my js/css found #3946

dbraun-ascendium · 2025-10-03T22:14:14Z

dbraun-ascendium
Oct 3, 2025

I have it working (in both build / dev) but it seems like a convoluted solution. I was having an issue with my js and css files not being found by Vite when running --serve, or being added to output on build.

After much AI prompting I got a config that made things work but it seems possibly convoluted (I only work on an 11ty project once a year - so my experience is limited).

I please need a real Human! Am I doing this right?

Heres what I have in my config:

import path from "node:path";
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      resolve: {
        alias: {
          "/src": path.resolve(".", "src"),
        },
      },
    },
  }); 
  return {
    dir: { input: "src", output: "_site" },
  };
}

The part that seems overkill for this simple test project is the viteOptions. Is that really necessary?

Here is how my 1 template file located in src look:

---
title: Home
layout: false
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>Eleventy + Vite</h1>
    <p>CSS and JS are bundled by Vite.</p>

    <!-- Where problems were happening.... -->
    <script type="module" src="/src/assets/main.js"></script>
  </body>
</html>

And here is my file structure:

├── _site
│   └── index.html (with assets if runningbuild)
├── eleventy.config.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── main.css
    │   └── main.js
    └── index.njk

dwkns · 2025-10-03T23:40:05Z

dwkns
Oct 3, 2025

Issues with Vite came up in the 11ty Discord today too. You might also want to checkout this issue for some background..

While it is possible, Vite is tricky to get working seamlessly with Eleventy. There isn't really a 'right' way, it's more can you make it work for your use-case. Vite makes quite a few assumptions about how your project is structured and how assets are processed. For instance Vite nukes static files from your output folder copied with addPassthroughCopy unless the source files are in a 'public' folder. It's quite un-Eleventy like in that respect.

Unless you really need to use Vite there are other more Eleventy friendly ways to process JS/CSS and any other assets you have.

That said, what you have above is one of the simpler Vite configs I've seen with Eleventy.

1 reply

danbraun Oct 5, 2025

Thank you for that insight, dwkns! I was looking to that plugin to simplify my build process. I had been using a tangle of npm scripts to run each tool.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Problems incorporating eleventy-vite-plugin and getting my js/css found #3946

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Problems incorporating eleventy-vite-plugin and getting my js/css found #3946

Uh oh!

dbraun-ascendium Oct 3, 2025

Replies: 1 comment · 1 reply

Uh oh!

dwkns Oct 3, 2025

Uh oh!

danbraun Oct 5, 2025

dbraun-ascendium
Oct 3, 2025

Replies: 1 comment 1 reply

dwkns
Oct 3, 2025