Got undefined variables when using .vue instead of .js file!!

[KiddoV]

Question

I have a .vue file like this:

<template>
    <div ref="editorEl"></div>
</template>

<script type="module">
import * as monaco from 'monaco-editor';
const testStr = "Test String";

export default {
    mounted() {
        console.log(test); // <= ``undefined``
        console.log(monaco); // <= ``undefined``
    }
}
</script>

Every variable defined outside of export default will be undefined.

But when I have a .js file:

import * as monaco from 'monaco-editor';

const test = "Test String";

export default {
    template: `
    <div ref="editorEl"></div>
    `,
    mounted() {
        console.log(test); // <= work!!!
        console.log(monaco); // <= work!!
    }
}

How can I defined global element scope for my vue file then?
Thanks,

[falkoschindler]

Hi @KiddoV,

I think this is because such import statements are currently not supported in Vue components. See #1198 for more information.

[KiddoV]

Thanks for the info!