Awesome Open Source
Awesome Open Source

Build Status

Serialized Editor

A Vue.js component for editing data that has been serialized in PHP.



npm install @deliciousbrains/serialized-editor
// or
yarn add @deliciousbrains/serialized-editor


The package comes in two parts

  1. A SerializedParser class to convert a PHP serialized string into JSON
  2. A SerializedEditor vue.js component

First you need to import the components:

import { SerializedParser, SerializedEditor } from '@deliciousbrains/serialized-editor';

Next you need to convert the serialized data into JSON:

computed: {
    parsedData() {
        var sp = new SerializedParser(serializedString);

        try {
            var json = sp.parse();
            return JSON.parse(json);
        } catch (e) {

        return {};

Then you can pass the json-data into the component:

<serialized-editor :json-data="parsedData" @output="updateOutput"></serialized-editor>



Name Type Description
json-data Object The JSON data returned from the SerializedParser class


Name Description
output Triggered when any data changes. Returns the new value in the PHP serialized format.


Serialized Editor was created by Gilbert Pellegrom from Delicious Brains. Released under the MIT license.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
php (16,077
vue (4,125
vue-component (98
serialize (20

Find Open Source By Browsing 7,000 Topics Across 59 Categories