How do I import Penumbra properly in my Vue application?

[boriskogan81]

I am building a Vue application with Quasar, using Vite to serve.

It is showing up as null in the console log.

Is there some other way I should be importing/instantiating?

<template>
  <q-card-section >
    <q-btn  @click="saveFile()">
      Try Penumbra
    </q-btn>
  </q-card-section>
</template>

<script>
import {
  ref,
  defineComponent,
  onMounted
} from "vue";
import { penumbra } from '@transcend-io/penumbra';

export default defineComponent ({
  name: "S3Display",
  setup() {
    const saveFile = async() => {
      try{
        console.log(penumbra);
        const file = await penumbra
          .get({
            url: 'https://ofanymdev.s3.eu-west-1.amazonaws.com/files/1685975915857-Capture.JPG',
            mimetype: 'image/jpeg',
            decryptionOptions: {
              key: '6245cb9b8dab1c1630bb3283063f963574d612ca6ec60bc8a5d1e07ddd3f7c53',
              iv: '6lNU+efb2da92cff888c9c295dc4ee682789c'
            },
          })
          await penumbra.save(file);
      }
      catch (e) {
        console.log("penumbra error: ", e)
      }
    }
    return {
      ref,
      saveFile
    }
  }
})
</script>