When using Vue, global is not defined

[kielerrr]

I'm getting this error Uncaught ReferenceError: global is not defined at index.mjs:657:16
It happens when trying to do const fiefClient = new Fief()
From what I've read, Vue is trying to load a package written for node and doesn't access global

I've tried a few workarounds like a polyfill that tries renaming global to window with

if (typeof global === "undefined") {
  window.global = window;
}

But to no avail.

Any ideas on how to load the package in a Vue component? I'm using vue and vite
My existing source

<template>
  <div class="top-bar">
    <div class="logo">
      <img src="logo.png" />
    </div>
    <a v-if="!loggedIn" href="#" class="login-link" @click="login">LOGIN</a>
    <div v-else class="user-email">{{ userEmail }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Fief } from '@fief/fief';
import { browser as FiefBrowser } from '@fief/fief';
const FiefAuth = FiefBrowser.FiefAuth;

// Initialize the Fief client
const fiefClient = new Fief({
  baseURL: 'https://mydomain.com', 
  clientId: 'MY_CLIENT_ID', 
});

// Initialize FiefAuth with the Fief client
const fiefAuth = new FiefAuth(fiefClient);

const loggedIn = ref(false);
const userEmail = ref('');

const login = () => {
  fiefAuth.redirectToLogin(window.location.origin + '/callback');
};

const checkLoginStatus = async () => {
  loggedIn.value = await fiefAuth.isAuthenticated();
  const userInfo = await fiefAuth.getUserinfo();
  if (userInfo) {
    userEmail.value = userInfo.email;
  }
};

onMounted(() => {
  checkLoginStatus();
});
</script>

[kielerrr]

npm i @fief/fief@beta helped