Vue.js Plugin

If you're a Vue.js user, you're gonna love how easy it's to integrate Socketize with your Vue.js app.

Socketize makes it super easy to sync your model with Socketize. Data in your Vue Model gets persisted and synced in the cloud automatically so that you can just focus on changing data in the frontend and forget about the backend.

It can be that easy:

// Your Vue model
var vm = new Vue({...});
// Setup sync
vm.$socketizeSync();

Check the full example

Plugin is open source on GitHub.

Installation

First create a Socketize account and include socketize.js and then create a socketize object in your JavaScript. See all the details here.

Note: Socketize needs a logged in user, to write data in the cloud. You can ask your user to register/login. Or you can bypass this by logging in your default admin user, as explained here.

Include SocketizeVue plugin like this:

<script src="https://socketize.com/v1/socketize-vue.min.js"></script>

If you don't have your Vue object in global scope then you have to install the plugin like this:

Vue.install(SocketizeVue);

Usage

Get your Vue Model ready, for example:

var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            list_name: 'Default List Name',
            selected: null,
            values: [1, 2, 3]
        };
    },
    components: ...
});

You have to specify all the values in your data object. Dynamically "created" properties under data don't get synced. Vue.js also recommends this practice.

Then just do this:

vm.$socketizeSync();

This assumes you have your socketize instance/object in global scope. If it's not, you have to define in the options, details below.

Options

include

By default the plugin will sync all the properties specified in you data object. If you want to change this behavior then you can specify which properties to include. Example:

vm.$socketizeSync({
    include: ['list_name', 'values'],
    // Or
     include: '*', // All properties, which is default
});

exclude

Specify the properties to exclude. Example:

vm.$socketizeSync({
    include: '*',
    exclude: ['full_name'], // Sync all but `full_name`
});

scope

Specify the Socketize database scope. Default is member.

socketize_instance

If you have your socketize object/instance available globally then you don't need to specify anything here, but if you don't have it globally then you must specify it here. Example:

function() {
    var socketize = new Socketize.client({...});
    vm.$socketizeSync({
        socketize_instance: socketize
    });
}

Events

Socketize fires some Vue events, when a property is saved to the database and when a property is retrieved from the database. You can listen to these events like this:

// When retrieved
vm.$on('socketize.YourPropertyName.get', function (YourPropertyValue) {
    console.log(YourPropertyValue);
});

// When saved
vm.$on('socketize.YourPropertyName.set', function () {
    console.log('Saved');
});

Full Example

<script src="https://socketize.com/v1/socketize.min.js"></script>
<script src="vue.min.js"></script>
<script src="https://socketize.com/v1/socketize-vue.min.js"></script>

<script>
    var socketize = new Socketize.client({
        public_key: 'your_public_key',
        auth_params: {
            username: 'admin',
            payload: 'generated_payload'
        }
    });

    var vm = new Vue({
        el: '#app',
        // app initial state
        data: function() {
            return {
                todoLists: {
                    title: 'Default List'
                },
                selectedList: 0
            }
        }
    });

    vm.$socketizeSync({
        exclude: ['selectedList']
    });

    // Listen to an event
    vm.$on('socketize.todoLists.get', function (todoLists) {
        // todoLists is successfully retrieved from Socketize database
        console.log(todoLists);
    });

</script>