Q/A: Extend default vitepress theme with lazy loading blurred thumbnails plugin

[BenRoe]

Hello, i am new to vue/vite/vitepress.

I try to use the "Lazy loading blurred thumbnails" plugin with the standard vitepress theme. But i get a white page if i run npm run docs:dev

Browser log: [Error] SyntaxError: Unexpected token '{'. Expected 'from' before imported module name. (anonyme Funktion) (index.mjs:3)

docs/.vitepress/config.mjs

import { defineConfig } from "vitepress";
import { ThumbnailHashImages } from "@nolebase/vitepress-plugin-thumbnail-hash/vite";
import { UnlazyImages } from "@nolebase/markdown-it-unlazy-img";

// https://vitepress.dev/reference/site-config
export default defineConfig ({
  vite: {
    plugins: [ThumbnailHashImages()],
  },
  vue: {
    template: {
      transformAssetUrls: {
        // Other configurations...
        NolebaseUnlazyImg: ["src"],
      },
    },
  },
  lang: "en-US",
  title: "Help Site",
  description: "Vitepress docs.",
  ignoreDeadLinks: true,
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    // logo: "/logo-logo.svg",
    // siteTitle: false,
    },
    externalLinkIcon: true,
    nav: [
      { text: "Home", link: "/" },
    ],

    sidebar: [
      {
        text: "Build-Guides",
        items: [
          { text: "3W6", link: "/build-guides/3w6/" },
          { text: "Cirque-Trackpad", link: "/build-guides/cirque-trackpad/" },
        ],
      },
    ],

    socialLinks: [{ icon: "github", link: "https://github.com/vitepress" }],
  },
  markdown: {
    config: (md) => {
      md.use(UnlazyImages(), {
        imgElementTag: "NolebaseUnlazyImg",
      });
    },
  },
});

docs/.vitepress/theme/index.mjs

import { h } from "vue";
import DefaultTheme from "vitepress/theme";
import type { Theme as ThemeConfig } from "vitepress";
import { NolebaseUnlazyImg } from "@nolebase/vitepress-plugin-thumbnail-hash/client";

import "@nolebase/vitepress-plugin-thumbnail-hash/client/style.css";

export const Theme: ThemeConfig = {
  extends: DefaultTheme,
  Layout: () => {
    // other configurations...
  },
  enhanceApp({ app }) {
    app.component("NolebaseUnlazyImg", NolebaseUnlazyImg);
  },
};

export default Theme;

[nekomeowww]

The configs look good, but not sure where went wrong. Do you have a minimal reproduction for this? Try with https://vitepress.new/