Vue: Problem with ignoredElements (with trix editor)

[yuters]

I'm not sure if this is a vue.js or trix.js bug, sorry about that :)

Vue.js version

2.1.6

Reproduction Link

http://jsfiddle.net/5yy9xcpq/

Steps to reproduce

1. Load basecamp trix-editor (trix.js) and vue.js
2. add the <trix-editor></trix-editor> tag in html inside the #app element
3. Add trix-editor to Vue.config.ignoredElements
4. new Vue({el: '#app'})

What is Expected?

The trix-editor should be ignored.

What is actually happening?

The trix-editor seems to load two times (2 toolbars appears) when loading the vue app.

[yyx990803]

Vue replaces the element you are mounting to, but trix-editor seems to populate the element on the page before Vue is mounted, and then populates again when Vue actually renders the app.

One suggestion is moving the app template into a template or a string: http://jsfiddle.net/5yy9xcpq/1/

Or, include trix.js after you have mounted the Vue app.