How to use global value with Vue3?

[paulocoutinhox]

Hi,

How to use inside <script setup> instead of:

<script>
export default {
    data() {
        return {
            loader: this.$loading.show({
                container: null,
                canCancel: false,
                backgroundColor: '#000000',
                opacity: 0.5,
                color: '#ffffff'
            })
        };
    },
};
</script>

?

I want use like this:

<script setup>
import { onMounted } from 'vue';
import { RouterLink, RouterView } from "vue-router";
import EventBus from "./classes/eventbus";
import FileHelper from "./classes/sqlitedb";

const loader = this.$loading.show({
    container: null,
    canCancel: false,
    backgroundColor: '#000000',
    opacity: 0.5,
    color: '#ffffff'
});

onMounted(() => {
    EventBus.$on("wasm-module-loaded", () => {
        loader.hide();
    });
});
</script>

But im getting error:

Uncaught TypeError: Cannot read properties of undefined (reading '$loading')
    at setup (App.vue:7:21)

[ankurk91]

You must use composition api inside setup script