Vue component interop with vanilla code

Question

I'm trying to fit Vue.js inside an existing project that doesn't use Vue. But I could not find any resource or documentation on how I can write a Vue component that have an API that can be used by code outside of the Vue world. Everything is focused on apps built with Vue from top to bottom.

var MyV = Vue.extend({
  template: `
    <div>
        <h4>{{ message }}</h4>
        <ul>
            <li v-for="item in items">
                {{item}}
                <button v-on:click="remove(item)">-</button>
            </li>
        </ul>
        <button v-on:click="add">add</button>
    </div>
    `,
  data() {
    return {
      message: 'Hello Vue.js!',
      items: ['foo', 'bar'],
    };
  },
  methods: {
    add() {
      this.items.push(Math.random());
    },
    remove(item) {
      this.items.splice(this.items.indexOf(item), 1);
    }
  }
});

var v = new MyV({
  el: c1
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="c1"></div>

What I already figured out just by playing around:

From outside of Vue, I can just mutate the v instance and the view changes according.

// everything works
v.message = "Hi there!";
v.items.push('hello');
v.items.add();

How I'm I supposed to listen to a "onchange" event? I can se a few ways of implementing this, but there's an "official" way?

Setting stuff is pretty straightforward, I can just set any property, or initialize it while instantiating, but how do I can get data back from this view?

Let's say I'm building a dropdown menu with Vue, I can populate this "component" just by setting a property.

If there's like a "submit" button inside this view, how I can notify the code outside of the view the user clicked on it?

If the view provides UI for the user modify its internal state (this.data) how code outside can be notified that the data has been modified, and it can then get the content of it again?

What change do you want to listen for, and what is going to listen? — bbsimonbb
– bbsimonbb, Commented Nov 22, 2017 at 13:12
I removed the Backbone tag and you should just remove any references to Backbone from your question since it's unrelated. You're asking about Vue.js and change events, only focus on that. — Emile Bergeron
– Emile Bergeron, Commented Nov 22, 2017 at 15:14
When you say listen for changes, do you mean outside of Vue? As in Vue notifies some external code about a change? — Bert
– Bert, Commented Nov 22, 2017 at 15:16
Exactly, I'm not building an app with vue just part of it, so I need to make it "talk" with other code. — Victor
– Victor, Commented Nov 22, 2017 at 15:32

Roy J · Accepted Answer · 2017-11-22 15:45:36Z

4

In the same way that you can call v.add() from outside the Vue code, you can watch value members from outside:

v.$watch('items', (newValue) => { console.log("Items changed!", newValue); });

You could also use v.$emit and v.$on to send and receive custom events, since every Vue instance is an event bus.

answered Nov 22, 2017 at 15:45

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Over a year ago

that is very enlightening, very similar to backbone views, that also have a view.on and view.trigger. do you think this is a good way to interface with a component?

Roy J Over a year ago

That's what those tools are there for.

Collectives™ on Stack Overflow

Vue component interop with vanilla code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related