LukeHagar.com/src/routes/+layout.svelte

<script>
  import "$lib/theme-luke.css";
  import "@skeletonlabs/skeleton/styles/all.css";
  import "../app.postcss";
  import { AppShell } from "@skeletonlabs/skeleton";
  import Header from "$lib/Header.svelte";
  import { inject } from "@vercel/analytics";
  import { env as dynamicEnv } from "$env/dynamic/public";
  import { browser } from "$app/environment";
  import { webVitals } from "$lib/vitals";
  import { page } from "$app/stores";

  console.log(import.meta.env.VERCEL_ANALYTICS_ID);
  console.log(dynamicEnv);
  console.log(import.meta.env);
  console.log(import.meta.env.VITE_VERCEL_ANALYTICS_ID);

  inject();

  let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;

  $: if (browser && analyticsId) {
    webVitals({
      path: $page.url.pathname,
      params: $page.params,
      analyticsId,
    });
  }
</script>

<!-- App Shell -->
<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
  <svelte:fragment slot="header">
    <!-- App Bar -->
    <Header />
  </svelte:fragment>
  <!-- Page Route Content -->
  <slot />
</AppShell>