Vue3 settings not working

[Recze]

Hello, i've got an issue with 3.0.3 package.

main.js

/* eslint-disable import/order */
// import '@/@fake-db/db'
import '@/@iconify/icons-bundle'
import App from '@/App.vue'
import ability from '@/plugins/casl/ability'
import i18n from '@/plugins/i18n'
import layoutsPlugin from '@/plugins/layouts'
import vuetify from '@/plugins/vuetify'
import { loadFonts } from '@/plugins/webfontloader'
import router from '@/router'
import { abilitiesPlugin } from '@casl/vue'
import '@core/scss/template/index.scss'
import '@styles/styles.scss'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import "toastr/build/toastr.min.css"
import { createStore } from 'vuex'
import FileManager from 'laravel-file-manager'

loadFonts()

// Create vue app
const app = createApp(App)

const store = createStore()

// Use plugins
app.use(vuetify)
app.use(createPinia())
app.use(router)
app.use(layoutsPlugin)
app.use(i18n)
app.use(abilitiesPlugin, ability, {
  useGlobalProperties: true,
})

app.use(store)
app.use(FileManager, { store })

// Mount vue app
app.mount('#app')

FileManagerPage.vue

<script>
/* eslint-disable */
import { useDefaultStore } from "@/stores/defaultStore"
import i18n from "@/plugins/i18n"
import { computed } from "vue"

useDefaultStore().setBreadcrumb(i18n.global.t("Media"))

export default {
  name: "Media",
  computed: {
    settings () {
      return {
        lang: 'en',
        baseUrl: import.meta.env.VITE_APP_LFM_AXIOS_BASE_URL,
        headers:
          {
            "X-Requested-With": "XMLHttpRequest",
            Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
          },
      }
    },
  },
}
</script>

<template>
  <section>
    <VCard>
      <VCardText class="d-flex flex-wrap gap-4">
        <VRow>
          <VCol
            cols="12"
          >
            <file-manager :settings="settings" />
          </VCol>
        </VRow>
      </VCardText>
    </VCard>
  </section>
</template>

<style scoped>
.fm {
  min-height: 600px;
}

.fm .fm-body {
  min-height: 600px;
}
</style>

.env

VITE_APP_LFM_AXIOS_BASE_URL=http://liquid.local/file-manager/ VITE_APP_LFM_CSRF_TOKEN=OFF

And yet file manager still tries to connect to localhost:

How can i resolve this issue?

[gazben]

I faced a similar issue. I don't see how the axios instance should get the set variables. I just see that the values are in the store.

What I did in my component:

import fileManagerAxios from 'laravel-file-manager/src/http/axios'

....

  beforeCreate () {
    fileManagerAxios.defaults.baseURL = '/file-manager/'
  },