vue-jsoneditor

Vue implementation of JSONEditor

Installation

# npm 
npm install vue-jsoneditor

Using

Import globally

import Vue from 'vue';
import VJsoneditor from 'vue-jsoneditor';
import App from './App';
 
Vue.config.productionTip = false;
Vue.use(VJsoneditor);
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});

Import locally

import VJsoneditor from 'vue-jsoneditor';
 
export default {
  name: 'app',
  components: {
    VJsoneditor,
  },
  data() {
    return {
      json: {
        sucess: true,
      },
    };
  },
  methods: {
    jsonChanged(value) {
      console.log(JSON.stringify(value));
    },
  },
};

Use in template

<template>
  <div id="app">
    <v-jsoneditor v-model="json"
                  @input="jsonChanged">
    </v-jsoneditor>
  </div>
</template>

Include jsoneditor api

Don't forget to include jsoneditor API:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.js"></script>