Histoire, like so many other tools in the Vue ecosystem, is a bit of a neglected younger sibling to Storybook — a little bit uglier, with worse documentation and a couple rough edges, but much more tightly integrated with Vue and Vite. ^[1]

One thing that was not particularly obvious with using Histoire was how to declare a global variable. (There are a number of global variables Buttondown uses, but here's a common example: we drop Stripe's public client ID in to the Vue app by vending it in the request.)

Histoire doesn't document this, but the solution is pretty easy:

1. Vite lets you declare globals via the define namespace within vite.config.js.
2. Histoire lets you add vite overrides specific for histoire within the histoire.vite namespace.

Combine these and you get the answer:

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

export default defineConfig({
  histoire: {
    vite: {
      define: {
        STRIPE_CLIENT_ID: 123,
      },
    },
  },

  // The rest of your vite config.
});

Hope this saves you ten minutes of Googling!