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

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

["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) — apple apple, Jun 14 '21 at 17:35
I don't want to add any dependency to the external tools and plugins.. still, the attached post doesn't have any accepted answer. — Rashik, Jun 14 '21 at 17:44
@ aakash, no accepted answer simply because OP don't select one. — apple apple, Jun 14 '21 at 17:48
i don't know how it call in the .net application, i tried may ways but non of the solution is working — Rashik, Jun 14 '21 at 17:58
`wwwroot` is your root folder for static files. Don't include it in path. path should `https://localhost:44307/js/toaster-message.js` — Mat J, Jun 14 '21 at 18:05
I have the js files in the wwwroot folder, how to include that, in the import? — Rashik, Jun 14 '21 at 18:07

score 1 · Answer 1 · answered Jun 14 '21 at 16:53

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>
}

I have this implemented on ASP .net application. But this didn't work I have tried this too. — Rashik, Jun 14 '21 at 16:56

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

1 Answers1