Creating a custom Slugify filter in Eleventy

Published 12.1.2025. Tags: English, Eleventy, Custom filters.

In the table you can see how Eleventy transforms some key letters in Finnish to slugs with Slugify.

To achieve this custom transformation, I use customReplacements property in Slugify. Here is the code in my Eleventy config file:

eleventyConfig.addFilter("nordicSlugify", function (string) {
  return eleventyConfig.getFilter("slugify")(string, {
    customReplacements: [
      ["ä", "a"],
      ["å", "a"],
      ["ö", "o"],
    ],
  });
});

Then I use the custom filter like so: {{ title | nordicSlugify}}. This might be in the front matter of a page.

Relevant links

• Eleventy documentation on filters.
• Slugify's documentation on customReplacements. The filter is based on @sindresorhus's work.

Backstory for my problems and this post

I upgraded a site from Eleventy 2.0 to Eleventy 3.0. The upgrade helper is handy, so use it. For a relative novice like me the docs can be quite confusing and the helper not that helpful.

I think my problem stemmed from the fact that Slugify became a bundled filter with Eleventy, so my previous configuration for using it didn't work well together with Netlify's deployment.

Or then I have something messed up with my configuration either on Eleventy's side or Netlify's side. I don't know. Now it seems to be working!