Import and use Vue.js package from CDN

I am importing Vue.js & Vue-Toastify from a CDN to use on a SPA. I only need a couple of reactive components therefore am importing from CDN.

Vue Toastify

I am fairly new to Vue and am trying to use Vue-Toastify using the CDN // rather than installing and importing from npm. I have the correct CDN link but how do I import it to use in the .vue file. As I have not created a Vue.js project I do not have a main.js file nor can I use the import method.

Is this at all possible? If I console.log(window) I can see VueToastify in the list of modules but I am unable to use or access it from my .vue file.

Code samples currently installed via cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>

but then the issue I have is then adding it into my .vue file. Currently I have:

let contactForm = new Vue({
    delimiters: ['[[', ']]'],
    el: '#contact-form',
    data: {
        form: new Form({
            name: '',
            email_address: '',
            message:''
        })
    },
    methods: {
        submit(){
            let formdata = new FormData()
            formdata.append('name', this.form.fields.name)
            formdata.append('email_address', this.form.email_address)
            formdata.append('message', this.form.fields.message)
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
            axios.post('/', formdata)
                .then((response) => {
                    if (response.data.status !== 200){
                        this.form.errors.set(response.data.errors)
                        console.log(window['vue-toastify'])
                    } else {

                    }
            })
        }
    },
})

I would like to show a toast at the response. This is in a single file with a couple of classes for form and form errors, and vue dev tools are the only thing that is enabled.

In your case you cannot use .vue file instead you can just use .js file.

Since VueToastify export the module as a plugin (some libraries might export as a component you can indicate it from exported object, for plugin it will have install function). So you have to install it first.

Vue.use(window['vue-toastify'].default)

Then you just call it when you want to use.

this.$vToastify.success('some-text')

Example