How to call the function in a separate JS file through a vue instances [duplicate]

Question

I have a javascript function in a separate js file toaster-message.js, the file is in wwwroot/js of ASP.net application, which calls the bootstrap toaster.

toaster-message.js.

showCompleteToast: (message) => {

    const toastElm = document.getElementById('#complete-toast');
    const toast = new bootstrap.Toast(toastElm)

    toast.show();
}

I want to call the showCompleteToast() from my vue instances. I am creating the vue instances with Direct script Include.

I don't want to add any Vue dependency to the function outside the Vue instances. So what is the proper way to call the function in the external js file that is outside the Vue instances?

@section scripts {

    <script>

        const app = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            methods: {
                showToast: function(){
                   //I want to call the show toast from here
                },
                submit: async function () {
                    try {

                        this.showToast();

                    } catch (error) {
                      
                        console.log(error)
                    }
                }
            }

        });
    </script>
}

When i try to import using:

import { showCompleteToast } from "~/lib/js/toater-message.js"

while using:

export default {
   showCompleteToast: (message) => {

       const toastElm = document.getElementById('#complete-toast');
       const toast = new bootstrap.Toast(toastElm)

       toast.show();
   },
   // ... other methods here
};

I get the error as:

“Uncaught SyntaxError: Cannot use import statement outside a module”

I tried to to import using:

<script type="module">
    import { showCompleteToast } from "../../wwwroot/js/toaster-message.js"
    alert(showCompleteToast)
</script>

This gave the error as:

GET https://localhost:44307/wwwroot/js/toaster-message.js net::ERR_ABORTED 404

Answer 1

I'm not very familiar with php but typically you can import JavaScript files and then work with their contents. The only requirement is that the imported files need to have exporting defined.

// toaster-message.js

export default {
   showCompleteToast: (message) => {

       const toastElm = document.getElementById('#complete-toast');
       const toast = new bootstrap.Toast(toastElm)

       toast.show();
   },
   // ... other methods here
};

Then pull it into your Vue file like this:

@section scripts {

    <script>
        import { showCompleteToast } from "..path/to/toaster-message.js"
        const app = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            methods: {
                showToast: function(){
                   //I want to call the show toast from here
                   showCompleteToast();
                },
                submit: async function () {
                    try {

                        this.showToast();

                    } catch (error) {
                      
                        console.log(error)
                    }
                }
            }

        });
    </script>
}