Failed to mount component

[wgohier]

Hi I'm using Boostrap + VueJS and i'm trying to use your component in my standalone app (i don't know yet how to use webpack or others).

So i load your script like this

Then I declared the component in my js file, like this (before declaring my vue)

Vue.component('click-confirm', clickConfirm);

And i use it in my html file like this <click-confirm> <button type="button" aria-label="Close" class="close" @click="hideModalProfile( $event, modal.profile)">×</button> </click-confirm>

but i got this error :

[Vue warn]: Failed to mount component: template or render function not defined.

found in

Did i miss something in my integration ? Thanks in advance

[GregPeden]

This package is not really designed to be used in this way, it's meant to be imported as a named asset in your app's bundling environment.

Just now I did some quick Google research on this.

This article presents a possible solution however this seems very non-spec and I don't like it. https://stackoverflow.com/questions/44877904/how-do-you-import-a-javascript-package-from-a-cdn-script-tag-in-react

This article alludes to a recent change to spec which allows external sources to be imported as a module. https://stackoverflow.com/questions/34607252/es6-import-module-from-url

A detailed article which discusses how to implement this solution in modern browsers, remember this will mean your app does not work in legacy browsers including all versions of Internet Explorer. https://jakearchibald.com/2017/es-modules-in-browsers/

Generally I discourage this use method, you are creating an additional source dependency and thus an additional point of failure. This also means another HTTP request for your client which is quite wasteful given the small size of this package as well as likely others which you are importing the same way. Best method is to create your your own app bundle with the code you need included,

import Vue from 'vue'
import ClickConfirm from 'click-confirm'

Vue.component('clickConfirm', ClickConfirm);

[wgohier]

OK. That's so sad, it doesn't work like this. It was almost perfect :)

Great component mate !

[GregPeden]

Well, no... I am saying that you're doing it wrong. In particular:

Vue.component('click-confirm', clickConfirm);

This will never work in your example because 'clickConfirm' is undefined. There's no reason to expect the DOM to understand that "clickConfirm" is meant to refer to the script you loaded. Nothing about the load method you propose solves this.

[wgohier]

OK i find my solution, this works