Is it possible to have two vue.js instances in different windows use the same data?

Question

I would like to be able to use two windows in my vue.js app, one for managing data, and one for presentation of the same data. (Imagine a live presentation where I can change things on the fly in one window on my laptop but my audience sees a simplified presentation of the data—ie, they don't see all the editing tools—in a separate window on a projected screen.)

As a prototype, I've tried implementing a basic todo app, like so:

<html>
<body id="app">

<div id="entry-form">

    <input type="text" placeholder="enter a todo item" v-model="todo">

    <button v-on:click="addTodo">+</button>

</div>

<div id="todo-list">
    <ol>
        <li v-for="t in todos">
            <span>{{ t }}</span><button v-on:click="delTodo">-</button>
        </li>
    </ol>
</div>

<button v-on:click="openViewer">Viewer</button>

<script src="vue.min.js"></script>

<script>
    var stateData = {
        todo : '',
        todos : [],
    }

    new Vue({
       el: '#app',
       data: stateData,

       methods : {
          addTodo : function() {
             if ( this.todo ) {
                this.todos.push(this.todo);
                this.todo = '';
             }
          },

          delTodo : function(index) {
             this.todos.splice(index,1);
          },

          openViewer : function() {
             var w = window.open("viewer.html", "viewer");
             w.getStateData = function() {
                return stateData;
             }
          }
       },
    });
</script>

</body>
</html>

And then a viewer.html (that is opened by the openViewer function in the above file) like so:

<html>
<body id="viewer">

<div id="todo-list">
    <ol>
        <li v-for="t in todos">
            <span>{{ t }}</span>
        </li>
    </ol>
</div>

<script src="vue.min.js"></script>
<script>
    window.onload = function() {
        new Vue({ el: "#viewer", data: getStateData() });
    }
</script>

</body>
</html>

This seems to get me half-way there. I can enter a few todos and click on the Viewer button, and a second window opens up showing the todos as expected. However, when I start entering new todos after opening the viewer window things start behaving strangely. The input fields get cleared upon blur, and the todo list no longer appears in the main window but it still works in the viewer window.

Obviously I'm abusing something about the way vue.js is intended to work. Is what I'm trying to achieve possible with vue.js? If so, please inform me how this would be done in the vue.js way?

Thanks

score 3 · Answer 1 · edited May 23 '17 at 12:07

I think the localStorage API is what you need. localStorage fires an event when data is updated - an event which you can read from other windows.

See a demo: http://html5demos.com/storage-events

Info w/ link to docs: Javascript; communication between tabs/windows with same origin

And a library on github that handles cross-tab communication, if you're interested: https://github.com/diy/intercom.js/

I think you'd want to add a watch function in your Vue component, and whenever the stateData value is updated you want to update a corresponding variable in localStorage. This will send an event to the other window. Something like:

app window:

new Vue({
    el: '#app',
    data: {
        todo : '',
        todos : [],
    },
    methods : {
        addTodo : function() {
            if ( this.todo ) {
                this.todos.push(this.todo);
                this.todo = '';
            }
        },
        delTodo : function(index) {
            this.todos.splice(index,1);
        },
        openViewer : function() {
            window.open("viewer.html", "viewer");
        }
    },
    watch:{
        stateData: {
            deep:true,
            handler:function(newValue){
                window.localStorage.setItem('viewer-demo',newValue);
            }
        }
    }
});

Viewer window:

new Vue({ 
    el: "#viewer", 
    data: {
        stateData: {
            todo : '',
            todos : []
        }
    },
    ready:function(){
        addEvent(window, 'storage', function (event) {
            if (event.key == 'viewer-demo') {
                this.stateData = event.newValue;
            }
        }.bind(this));
    } 
});

don't use obsolete apis, use indexeddb – gurghet Feb 15 '16 at 22:46 — gurghet, Feb 15 '16 at 22:46

Is it possible to have two vue.js instances in different windows use the same data?

1 Answers1