Trix: Trix doesn't play well with VueJS

Created on 3 Jun 2017 · 6Comments · Source: basecamp/trix

When trix is spawned within a VueJS

Steps to Reproduce

Open this skeleton in browser:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.10.1/trix.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.10.1/trix.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="app">
            <input type="hidden" id="test" />
            <trix-editor input="test"></trix-editor>
        </div>
        <script>
var app = new Vue({
    el: "#app",
});
        </script>
    </body>
</html>

Result:
trix_vue_bug

Expected:
trix_not_buggy

NB: Works well with firefox 53.0.2

Details

Trix version: 0.10.1
VueJS version: 2.3.3
Browser name and version: Chrome 58.0.3029.110 (64-bit)
Operating system: Ubuntu 16.04.2 LTS

Source

mota

👍3

Most helpful comment

Alternatively, you could use a template:

<div id="editor"></div>
<script>
  var app = new Vue({
    el: "#editor",
    template: "<trix-editor></trix-editor>"
  })
</script>

javan on 11 Jun 2017

👍8 🎉1

All 6 comments

I think both Vue and trix listens dom changes at some point.

I created a demo for quick fix. Hope it helps.

http://jsbin.com/qayogecogi/1/edit?html,output

(worked well on windows)

onurozkan on 6 Jun 2017

👍1

Looks great, simple solution!
Too bad they don't interact natively though.

mota on 7 Jun 2017

Alternatively, you could use a template:

<div id="editor"></div>
<script>
  var app = new Vue({
    el: "#editor",
    template: "<trix-editor></trix-editor>"
  })
</script>

javan on 11 Jun 2017

👍8 🎉1

@onurozkan Could you repost the jsbin please? It has been expired.

ghost on 2 Aug 2017

Similar to @javan you can also make a component with the template being <trix-editor></trix-editor>, no javascript configuration is required for the component. You can then use your custom component tag in place of <trix-editor>.