fix(vue): check `import.meta.env.SSR` to support `vite-ssg` #5347

Barbapapazes · 2025-10-29T15:32:19Z

🔗 Linked issue

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hello 👋,

I'm currently using Nuxt UI within a Vite + Vue application. I'm also using Vite SSG to statically generate pages.

Vite SSG injects import.meta.env.SSR when building the server app.

Currently, the colors plugin injects colors into the head when on the client, but the detection doesn’t work as import.meta.client is not set to false when using Vite SSG.

So instead of changing the condition, I just set serverRendered to import.meta.env.SSR to make sure it’s correctly set everywhere it’s used.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

pkg-pr-new · 2025-10-29T15:48:05Z

npm i https://pkg.pr.new/@nuxt/ui@5347

commit: c17f082

Barbapapazes · 2025-10-31T11:19:20Z

Is there any reason this https://github.com/nuxt/ui/blame/3e18df8280942a0be7a8e6ef40d415ef5d3b9715/src/runtime/plugins/colors.ts#L46C7-L46C23 is set because it "breaks" the automatic optimization from Unhead (cc @harlan-zw)

(could be related to Nuxt?)

With, I have the following head:

Details

 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style id="nuxt-ui-colors">
      @layer base {
        :root {
          --ui-color-primary-50: var(
            --color-green-50,
            oklch(98.2% 0.018 155.826)
          );
          --ui-color-primary-100: var(
            --color-green-100,
            oklch(96.2% 0.044 156.743)
          );
          --ui-color-primary-200: var(
            --color-green-200,
            oklch(92.5% 0.084 155.995)
          );
          --ui-color-primary-300: var(
            --color-green-300,
            oklch(87.1% 0.15 154.449)
          );
          --ui-color-primary-400: var(
            --color-green-400,
            oklch(79.2% 0.209 151.711)
          );
          --ui-color-primary-500: var(
            --color-green-500,
            oklch(72.3% 0.219 149.579)
          );
          --ui-color-primary-600: var(
            --color-green-600,
            oklch(62.7% 0.194 149.214)
          );
          --ui-color-primary-700: var(
            --color-green-700,
            oklch(52.7% 0.154 150.069)
          );
          --ui-color-primary-800: var(
            --color-green-800,
            oklch(44.8% 0.119 151.328)
          );
          --ui-color-primary-900: var(
            --color-green-900,
            oklch(39.3% 0.095 152.535)
          );
          --ui-color-primary-950: var(
            --color-green-950,
            oklch(26.6% 0.065 152.934)
          );
          --ui-color-secondary-50: var(
            --color-blue-50,
            oklch(97% 0.014 254.604)
          );
          --ui-color-secondary-100: var(
            --color-blue-100,
            oklch(93.2% 0.032 255.585)
          );
          --ui-color-secondary-200: var(
            --color-blue-200,
            oklch(88.2% 0.059 254.128)
          );
          --ui-color-secondary-300: var(
            --color-blue-300,
            oklch(80.9% 0.105 251.813)
          );
          --ui-color-secondary-400: var(
            --color-blue-400,
            oklch(70.7% 0.165 254.624)
          );
          --ui-color-secondary-500: var(
            --color-blue-500,
            oklch(62.3% 0.214 259.815)
          );
          --ui-color-secondary-600: var(
            --color-blue-600,
            oklch(54.6% 0.245 262.881)
          );
          --ui-color-secondary-700: var(
            --color-blue-700,
            oklch(48.8% 0.243 264.376)
          );
          --ui-color-secondary-800: var(
            --color-blue-800,
            oklch(42.4% 0.199 265.638)
          );
          --ui-color-secondary-900: var(
            --color-blue-900,
            oklch(37.9% 0.146 265.522)
          );
          --ui-color-secondary-950: var(
            --color-blue-950,
            oklch(28.2% 0.091 267.935)
          );
          --ui-color-success-50: var(
            --color-green-50,
            oklch(98.2% 0.018 155.826)
          );
          --ui-color-success-100: var(
            --color-green-100,
            oklch(96.2% 0.044 156.743)
          );
          --ui-color-success-200: var(
            --color-green-200,
            oklch(92.5% 0.084 155.995)
          );
          --ui-color-success-300: var(
            --color-green-300,
            oklch(87.1% 0.15 154.449)
          );
          --ui-color-success-400: var(
            --color-green-400,
            oklch(79.2% 0.209 151.711)
          );
          --ui-color-success-500: var(
            --color-green-500,
            oklch(72.3% 0.219 149.579)
          );
          --ui-color-success-600: var(
            --color-green-600,
            oklch(62.7% 0.194 149.214)
          );
          --ui-color-success-700: var(
            --color-green-700,
            oklch(52.7% 0.154 150.069)
          );
          --ui-color-success-800: var(
            --color-green-800,
            oklch(44.8% 0.119 151.328)
          );
          --ui-color-success-900: var(
            --color-green-900,
            oklch(39.3% 0.095 152.535)
          );
          --ui-color-success-950: var(
            --color-green-950,
            oklch(26.6% 0.065 152.934)
          );
          --ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
          --ui-color-info-100: var(
            --color-blue-100,
            oklch(93.2% 0.032 255.585)
          );
          --ui-color-info-200: var(
            --color-blue-200,
            oklch(88.2% 0.059 254.128)
          );
          --ui-color-info-300: var(
            --color-blue-300,
            oklch(80.9% 0.105 251.813)
          );
          --ui-color-info-400: var(
            --color-blue-400,
            oklch(70.7% 0.165 254.624)
          );
          --ui-color-info-500: var(
            --color-blue-500,
            oklch(62.3% 0.214 259.815)
          );
          --ui-color-info-600: var(
            --color-blue-600,
            oklch(54.6% 0.245 262.881)
          );
          --ui-color-info-700: var(
            --color-blue-700,
            oklch(48.8% 0.243 264.376)
          );
          --ui-color-info-800: var(
            --color-blue-800,
            oklch(42.4% 0.199 265.638)
          );
          --ui-color-info-900: var(
            --color-blue-900,
            oklch(37.9% 0.146 265.522)
          );
          --ui-color-info-950: var(
            --color-blue-950,
            oklch(28.2% 0.091 267.935)
          );
          --ui-color-warning-50: var(
            --color-yellow-50,
            oklch(98.7% 0.026 102.212)
          );
          --ui-color-warning-100: var(
            --color-yellow-100,
            oklch(97.3% 0.071 103.193)
          );
          --ui-color-warning-200: var(
            --color-yellow-200,
            oklch(94.5% 0.129 101.54)
          );
          --ui-color-warning-300: var(
            --color-yellow-300,
            oklch(90.5% 0.182 98.111)
          );
          --ui-color-warning-400: var(
            --color-yellow-400,
            oklch(85.2% 0.199 91.936)
          );
          --ui-color-warning-500: var(
            --color-yellow-500,
            oklch(79.5% 0.184 86.047)
          );
          --ui-color-warning-600: var(
            --color-yellow-600,
            oklch(68.1% 0.162 75.834)
          );
          --ui-color-warning-700: var(
            --color-yellow-700,
            oklch(55.4% 0.135 66.442)
          );
          --ui-color-warning-800: var(
            --color-yellow-800,
            oklch(47.6% 0.114 61.907)
          );
          --ui-color-warning-900: var(
            --color-yellow-900,
            oklch(42.1% 0.095 57.708)
          );
          --ui-color-warning-950: var(
            --color-yellow-950,
            oklch(28.6% 0.066 53.813)
          );
          --ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
          --ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
          --ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
          --ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
          --ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
          --ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
          --ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
          --ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
          --ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
          --ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
          --ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
          --ui-color-neutral-50: var(--color-old-neutral-50, oklch(98.5% 0 0));
          --ui-color-neutral-100: var(--color-old-neutral-100, oklch(97% 0 0));
          --ui-color-neutral-200: var(
            --color-old-neutral-200,
            oklch(92.2% 0 0)
          );
          --ui-color-neutral-300: var(--color-old-neutral-300, oklch(87% 0 0));
          --ui-color-neutral-400: var(
            --color-old-neutral-400,
            oklch(70.8% 0 0)
          );
          --ui-color-neutral-500: var(
            --color-old-neutral-500,
            oklch(55.6% 0 0)
          );
          --ui-color-neutral-600: var(
            --color-old-neutral-600,
            oklch(43.9% 0 0)
          );
          --ui-color-neutral-700: var(
            --color-old-neutral-700,
            oklch(37.1% 0 0)
          );
          --ui-color-neutral-800: var(
            --color-old-neutral-800,
            oklch(26.9% 0 0)
          );
          --ui-color-neutral-900: var(
            --color-old-neutral-900,
            oklch(20.5% 0 0)
          );
          --ui-color-neutral-950: var(
            --color-old-neutral-950,
            oklch(14.5% 0 0)
          );
        }
        .light,
        :root {
          --ui-primary: var(--ui-color-primary-500);
          --ui-secondary: var(--ui-color-secondary-500);
          --ui-success: var(--ui-color-success-500);
          --ui-info: var(--ui-color-info-500);
          --ui-warning: var(--ui-color-warning-500);
          --ui-error: var(--ui-color-error-500);
        }
        .dark {
          --ui-primary: var(--ui-color-primary-400);
          --ui-secondary: var(--ui-color-secondary-400);
          --ui-success: var(--ui-color-success-400);
          --ui-info: var(--ui-color-info-400);
          --ui-warning: var(--ui-color-warning-400);
          --ui-error: var(--ui-color-error-400);
        }
      }
    </style>
    <title>Estéban&#x27;s Infra · Estéban Soubiran</title>
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com/"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" crossorigin href="/assets/app-B3CRO7uK.css" />
    <link
      rel="preload"
      as="style"
      onload='this.rel="stylesheet"'
      href="https://fonts.googleapis.com/css2?family=DM Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=DM Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&amp;family=Sofia Sans:ital,wght@0,1..1000;1,1..1000&amp;display=swap"
    />
    <link rel="modulepreload" crossorigin href="/assets/pages-CmD9nAqh.js" />
    <link
      rel="modulepreload"
      crossorigin
      href="/assets/WrapperContent-B2kAKwnV.js"
    />
    <script
      defer="defer"
      src="https://umami.soubiran.dev/script.js"
      data-website-id="cbe51314-3599-4b9b-957a-322761c07aff"
    ></script>
    <meta name="author" content="Estéban Soubiran" />
    <meta name="color-scheme" content="light dark" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="#ffffff"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="#171717"
    />
    <meta name="twitter:site" content="@soubiran_" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:site_name" content="Estéban's Infra" />
    <meta property="og:type" content="website" />
    <script>
      !(function () {
        const e =
            window.matchMedia &&
            window.matchMedia("(prefers-color-scheme: dark)").matches,
          t = localStorage.getItem("vueuse-color-scheme") || "auto";
        ("dark" === t || (e && "light" !== t)) &&
          document.documentElement.classList.toggle("dark", !0);
      })();
    </script>
    <script type="module" crossorigin src="/assets/app-dOQ5cq4I.js"></script>
    <meta property="og:url" content="https://infra.soubiran.dev" />
    <meta property="og:title" content="Estéban's Infra" />
    <meta name="twitter:title" content="Estéban's Infra" />
    <meta
      name="description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      property="og:description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      name="twitter:description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      property="og:image"
      content="https://infra.soubiran.dev/og/index.png"
    />
    <meta
      name="twitter:image"
      content="https://infra.soubiran.dev/og/index.png"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="canonical" href="https://infra.soubiran.dev" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "Person",
            "@id": "https://infra.soubiran.dev/#/schema/Person/1",
            "name": "Estéban Soubiran",
            "sameAs": [
              "https://x.com/soubiran_",
              "https://www.linkedin.com/in/esteban25",
              "https://www.twitch.tv/barbapapazes",
              "https://www.youtube.com/@barbapapazes",
              "https://github.com/barbapapazes",
              "https://soubiran.dev",
              "https://esteban-soubiran.site",
              "https://barbapapazes.dev"
            ]
          },
          {
            "@type": "WebSite",
            "@id": "https://infra.soubiran.dev/#/schema/WebSite/1",
            "url": "https://infra.soubiran.dev",
            "name": "Estéban's Infra",
            "inLanguage": ["en-US"],
            "publisher": {
              "@id": "https://infra.soubiran.dev/#/schema/Person/1"
            }
          },
          {
            "@type": "WebPage",
            "@id": "https://infra.soubiran.dev",
            "url": "https://infra.soubiran.dev",
            "name": "Estéban's Infra",
            "description": "The wiki about the infrastructure of the ecosystem of Estéban Soubiran.",
            "isPartOf": {
              "@id": "https://infra.soubiran.dev/#/schema/WebSite/1"
            },
            "inLanguage": "en-US",
            "potentialAction": [
              {
                "@type": "ReadAction",
                "target": ["https://infra.soubiran.dev"]
              }
            ]
          }
        ]
      }
    </script>
  </head>

Without, I have this one, which is better:

Details

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Estéban&#x27;s Infra · Estéban Soubiran</title>
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com/"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" crossorigin href="/assets/app-B3CRO7uK.css" />
    <style id="nuxt-ui-colors">
      @layer base {
        :root {
          --ui-color-primary-50: var(
            --color-green-50,
            oklch(98.2% 0.018 155.826)
          );
          --ui-color-primary-100: var(
            --color-green-100,
            oklch(96.2% 0.044 156.743)
          );
          --ui-color-primary-200: var(
            --color-green-200,
            oklch(92.5% 0.084 155.995)
          );
          --ui-color-primary-300: var(
            --color-green-300,
            oklch(87.1% 0.15 154.449)
          );
          --ui-color-primary-400: var(
            --color-green-400,
            oklch(79.2% 0.209 151.711)
          );
          --ui-color-primary-500: var(
            --color-green-500,
            oklch(72.3% 0.219 149.579)
          );
          --ui-color-primary-600: var(
            --color-green-600,
            oklch(62.7% 0.194 149.214)
          );
          --ui-color-primary-700: var(
            --color-green-700,
            oklch(52.7% 0.154 150.069)
          );
          --ui-color-primary-800: var(
            --color-green-800,
            oklch(44.8% 0.119 151.328)
          );
          --ui-color-primary-900: var(
            --color-green-900,
            oklch(39.3% 0.095 152.535)
          );
          --ui-color-primary-950: var(
            --color-green-950,
            oklch(26.6% 0.065 152.934)
          );
          --ui-color-secondary-50: var(
            --color-blue-50,
            oklch(97% 0.014 254.604)
          );
          --ui-color-secondary-100: var(
            --color-blue-100,
            oklch(93.2% 0.032 255.585)
          );
          --ui-color-secondary-200: var(
            --color-blue-200,
            oklch(88.2% 0.059 254.128)
          );
          --ui-color-secondary-300: var(
            --color-blue-300,
            oklch(80.9% 0.105 251.813)
          );
          --ui-color-secondary-400: var(
            --color-blue-400,
            oklch(70.7% 0.165 254.624)
          );
          --ui-color-secondary-500: var(
            --color-blue-500,
            oklch(62.3% 0.214 259.815)
          );
          --ui-color-secondary-600: var(
            --color-blue-600,
            oklch(54.6% 0.245 262.881)
          );
          --ui-color-secondary-700: var(
            --color-blue-700,
            oklch(48.8% 0.243 264.376)
          );
          --ui-color-secondary-800: var(
            --color-blue-800,
            oklch(42.4% 0.199 265.638)
          );
          --ui-color-secondary-900: var(
            --color-blue-900,
            oklch(37.9% 0.146 265.522)
          );
          --ui-color-secondary-950: var(
            --color-blue-950,
            oklch(28.2% 0.091 267.935)
          );
          --ui-color-success-50: var(
            --color-green-50,
            oklch(98.2% 0.018 155.826)
          );
          --ui-color-success-100: var(
            --color-green-100,
            oklch(96.2% 0.044 156.743)
          );
          --ui-color-success-200: var(
            --color-green-200,
            oklch(92.5% 0.084 155.995)
          );
          --ui-color-success-300: var(
            --color-green-300,
            oklch(87.1% 0.15 154.449)
          );
          --ui-color-success-400: var(
            --color-green-400,
            oklch(79.2% 0.209 151.711)
          );
          --ui-color-success-500: var(
            --color-green-500,
            oklch(72.3% 0.219 149.579)
          );
          --ui-color-success-600: var(
            --color-green-600,
            oklch(62.7% 0.194 149.214)
          );
          --ui-color-success-700: var(
            --color-green-700,
            oklch(52.7% 0.154 150.069)
          );
          --ui-color-success-800: var(
            --color-green-800,
            oklch(44.8% 0.119 151.328)
          );
          --ui-color-success-900: var(
            --color-green-900,
            oklch(39.3% 0.095 152.535)
          );
          --ui-color-success-950: var(
            --color-green-950,
            oklch(26.6% 0.065 152.934)
          );
          --ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
          --ui-color-info-100: var(
            --color-blue-100,
            oklch(93.2% 0.032 255.585)
          );
          --ui-color-info-200: var(
            --color-blue-200,
            oklch(88.2% 0.059 254.128)
          );
          --ui-color-info-300: var(
            --color-blue-300,
            oklch(80.9% 0.105 251.813)
          );
          --ui-color-info-400: var(
            --color-blue-400,
            oklch(70.7% 0.165 254.624)
          );
          --ui-color-info-500: var(
            --color-blue-500,
            oklch(62.3% 0.214 259.815)
          );
          --ui-color-info-600: var(
            --color-blue-600,
            oklch(54.6% 0.245 262.881)
          );
          --ui-color-info-700: var(
            --color-blue-700,
            oklch(48.8% 0.243 264.376)
          );
          --ui-color-info-800: var(
            --color-blue-800,
            oklch(42.4% 0.199 265.638)
          );
          --ui-color-info-900: var(
            --color-blue-900,
            oklch(37.9% 0.146 265.522)
          );
          --ui-color-info-950: var(
            --color-blue-950,
            oklch(28.2% 0.091 267.935)
          );
          --ui-color-warning-50: var(
            --color-yellow-50,
            oklch(98.7% 0.026 102.212)
          );
          --ui-color-warning-100: var(
            --color-yellow-100,
            oklch(97.3% 0.071 103.193)
          );
          --ui-color-warning-200: var(
            --color-yellow-200,
            oklch(94.5% 0.129 101.54)
          );
          --ui-color-warning-300: var(
            --color-yellow-300,
            oklch(90.5% 0.182 98.111)
          );
          --ui-color-warning-400: var(
            --color-yellow-400,
            oklch(85.2% 0.199 91.936)
          );
          --ui-color-warning-500: var(
            --color-yellow-500,
            oklch(79.5% 0.184 86.047)
          );
          --ui-color-warning-600: var(
            --color-yellow-600,
            oklch(68.1% 0.162 75.834)
          );
          --ui-color-warning-700: var(
            --color-yellow-700,
            oklch(55.4% 0.135 66.442)
          );
          --ui-color-warning-800: var(
            --color-yellow-800,
            oklch(47.6% 0.114 61.907)
          );
          --ui-color-warning-900: var(
            --color-yellow-900,
            oklch(42.1% 0.095 57.708)
          );
          --ui-color-warning-950: var(
            --color-yellow-950,
            oklch(28.6% 0.066 53.813)
          );
          --ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
          --ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
          --ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
          --ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
          --ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
          --ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
          --ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
          --ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
          --ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
          --ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
          --ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
          --ui-color-neutral-50: var(--color-old-neutral-50, oklch(98.5% 0 0));
          --ui-color-neutral-100: var(--color-old-neutral-100, oklch(97% 0 0));
          --ui-color-neutral-200: var(
            --color-old-neutral-200,
            oklch(92.2% 0 0)
          );
          --ui-color-neutral-300: var(--color-old-neutral-300, oklch(87% 0 0));
          --ui-color-neutral-400: var(
            --color-old-neutral-400,
            oklch(70.8% 0 0)
          );
          --ui-color-neutral-500: var(
            --color-old-neutral-500,
            oklch(55.6% 0 0)
          );
          --ui-color-neutral-600: var(
            --color-old-neutral-600,
            oklch(43.9% 0 0)
          );
          --ui-color-neutral-700: var(
            --color-old-neutral-700,
            oklch(37.1% 0 0)
          );
          --ui-color-neutral-800: var(
            --color-old-neutral-800,
            oklch(26.9% 0 0)
          );
          --ui-color-neutral-900: var(
            --color-old-neutral-900,
            oklch(20.5% 0 0)
          );
          --ui-color-neutral-950: var(
            --color-old-neutral-950,
            oklch(14.5% 0 0)
          );
        }
        :root,
        .light {
          --ui-primary: var(--ui-color-primary-500);
          --ui-secondary: var(--ui-color-secondary-500);
          --ui-success: var(--ui-color-success-500);
          --ui-info: var(--ui-color-info-500);
          --ui-warning: var(--ui-color-warning-500);
          --ui-error: var(--ui-color-error-500);
        }
        .dark {
          --ui-primary: var(--ui-color-primary-400);
          --ui-secondary: var(--ui-color-secondary-400);
          --ui-success: var(--ui-color-success-400);
          --ui-info: var(--ui-color-info-400);
          --ui-warning: var(--ui-color-warning-400);
          --ui-error: var(--ui-color-error-400);
        }
      }
    </style>
    <link
      rel="preload"
      as="style"
      onload="this.rel='stylesheet'"
      href="https://fonts.googleapis.com/css2?family=DM Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=DM Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&amp;family=Sofia Sans:ital,wght@0,1..1000;1,1..1000&amp;display=swap"
    />
    <link rel="modulepreload" crossorigin href="/assets/pages-Dj6mI9Yn.js" />
    <link
      rel="modulepreload"
      crossorigin
      href="/assets/WrapperContent-BOiPD5jA.js"
    />
    <script
      defer
      src="https://umami.soubiran.dev/script.js"
      data-website-id="cbe51314-3599-4b9b-957a-322761c07aff"
    ></script>
    <meta name="author" content="Estéban Soubiran" />
    <meta name="color-scheme" content="light dark" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="#ffffff"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="#171717"
    />
    <meta name="twitter:site" content="@soubiran_" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:site_name" content="Estéban's Infra" />
    <meta property="og:type" content="website" />
    <script>
      ;(function () {
        const prefersDark =
          window.matchMedia &&
          window.matchMedia("(prefers-color-scheme: dark)").matches
        const setting = localStorage.getItem("vueuse-color-scheme") || "auto"
        if (setting === "dark" || (prefersDark && setting !== "light"))
          document.documentElement.classList.toggle("dark", true)
      })()
    </script>
    <script type="module" crossorigin src="/assets/app-Cse_x6PQ.js"></script>
    <meta property="og:url" content="https://infra.soubiran.dev" />
    <meta property="og:title" content="Estéban's Infra" />
    <meta name="twitter:title" content="Estéban's Infra" />
    <meta
      name="description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      property="og:description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      name="twitter:description"
      content="The wiki about the infrastructure of the ecosystem of Estéban Soubiran."
    />
    <meta
      property="og:image"
      content="https://infra.soubiran.dev/og/index.png"
    />
    <meta
      name="twitter:image"
      content="https://infra.soubiran.dev/og/index.png"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="canonical" href="https://infra.soubiran.dev" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "Person",
            "@id": "https://infra.soubiran.dev/#/schema/Person/1",
            "name": "Estéban Soubiran",
            "sameAs": [
              "https://x.com/soubiran_",
              "https://www.linkedin.com/in/esteban25",
              "https://www.twitch.tv/barbapapazes",
              "https://www.youtube.com/@barbapapazes",
              "https://github.com/barbapapazes",
              "https://soubiran.dev",
              "https://esteban-soubiran.site",
              "https://barbapapazes.dev"
            ]
          },
          {
            "@type": "WebSite",
            "@id": "https://infra.soubiran.dev/#/schema/WebSite/1",
            "url": "https://infra.soubiran.dev",
            "name": "Estéban's Infra",
            "inLanguage": ["en-US"],
            "publisher": {
              "@id": "https://infra.soubiran.dev/#/schema/Person/1"
            }
          },
          {
            "@type": "WebPage",
            "@id": "https://infra.soubiran.dev",
            "url": "https://infra.soubiran.dev",
            "name": "Estéban's Infra",
            "description": "The wiki about the infrastructure of the ecosystem of Estéban Soubiran.",
            "isPartOf": {
              "@id": "https://infra.soubiran.dev/#/schema/WebSite/1"
            },
            "inLanguage": "en-US",
            "potentialAction": [
              {
                "@type": "ReadAction",
                "target": ["https://infra.soubiran.dev"]
              }
            ]
          }
        ]
      }
    </script>
  </head>

benjamincanac · 2025-11-03T11:07:28Z

@Barbapapazes The tagPriority ensures this <style> block is loaded first, is this an issue for you? 🤔

y-l-g · 2025-11-03T14:11:05Z

It would be nice to add the same check for the inertia stub. Then we could set SSR=true in our .env if needed. (See #5254).

fix: support vite-ssg

ab4a43e

Barbapapazes requested a review from benjamincanac as a code owner October 29, 2025 15:32

github-actions bot added the v4 #4488 label Oct 29, 2025

fix: use .env

37e728c

vercel bot deployed to Preview – ui October 29, 2025 15:48 View deployment

Barbapapazes marked this pull request as draft October 29, 2025 16:19

benjamincanac requested review from antfu and danielroe October 29, 2025 16:19

benjamincanac changed the title ~~fix: support vite-ssg~~ fix(vue): check import.meta.env.SSR to support vite-ssg Oct 29, 2025

This comment was marked as resolved.

Sign in to view

Barbapapazes marked this pull request as ready for review October 29, 2025 18:48

This comment was marked as off-topic.

Sign in to view

Merge branch 'v4' into fix/vite-ssg

c17f082

vercel bot deployed to Preview – ui October 31, 2025 21:43 View deployment

y-l-g mentioned this pull request Nov 3, 2025

Incompatibility with Inertia SSR Server #5254

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(vue): check `import.meta.env.SSR` to support `vite-ssg` #5347

fix(vue): check `import.meta.env.SSR` to support `vite-ssg` #5347

Barbapapazes commented Oct 29, 2025 •

edited by benjamincanac

Loading

Uh oh!

pkg-pr-new bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

This comment was marked as resolved.

This comment was marked as off-topic.

Barbapapazes commented Oct 31, 2025 •

edited

Loading

Uh oh!

benjamincanac commented Nov 3, 2025

Uh oh!

y-l-g commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(vue): check import.meta.env.SSR to support vite-ssg #5347

Are you sure you want to change the base?

fix(vue): check import.meta.env.SSR to support vite-ssg #5347

Conversation

Barbapapazes commented Oct 29, 2025 • edited by benjamincanac Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

pkg-pr-new bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

This comment was marked as off-topic.

Barbapapazes commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac commented Nov 3, 2025

Uh oh!

y-l-g commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(vue): check `import.meta.env.SSR` to support `vite-ssg` #5347

fix(vue): check `import.meta.env.SSR` to support `vite-ssg` #5347

Barbapapazes commented Oct 29, 2025 •

edited by benjamincanac

Loading

pkg-pr-new bot commented Oct 29, 2025 •

edited

Loading

Barbapapazes commented Oct 31, 2025 •

edited

Loading