Json Editor Vue

Overview

The JSONEditorVue is a versatile Vue component that allows users to view, edit, format, validate, and manipulate JSON data. It offers various features such as different edit modes, support for large JSON documents, compatibility with different versions of Vue, and integration with popular tools and frameworks.

Features

• View, edit, format, validate, compact, sort, query, filter, transform, repair, highlight JSON
• 3 edit modes: text mode, tree mode, and table mode
• 2 themes: light theme and dark theme
• Handle large JSON documents up to 512 MB
• Support for all 7 primitive data types, including BigInt and Symbol
• Vue 2.6/2.7/3 isomorphic
• Support for SSR (Nuxt 2/3 isomorphic)
• Support for Vite, Vue CLI, webpack, CDN
• Support for microfrontends (wujie, qiankun, single-spa)
• Local registration & configuration, or global registration & configuration (Powered by vue-global-config)

Installation

To install the JSONEditorVue component, you can follow these steps:

1. As of version 0.11, it is no longer necessary to explicitly install vanilla-jsoneditor.

2. If you want to specify dependency versions, use one of the available installation options:

   • Vue 3

     • Local Registration: npm install vue-jsoneditor@0.11.1
     • Global Registration: npm install vue-jsoneditor@0.11.1
     • CDN + ESM: <script type="module" src="https://unpkg.com/vue-jsoneditor@0.11.1/dist/vue-jsoneditor.es.js"></script>
     • CDN + IIFE: <script src="https://unpkg.com/vue-jsoneditor@0.11.1/dist/vue-jsoneditor.min.js"></script>

   • Vue 2.7

     • Local Registration: npm install vue-jsoneditor@0.11.1
     • Global Registration: npm install vue-jsoneditor@0.11.1
     • CDN + ESM: <script type="module" src="https://unpkg.com/vue-jsoneditor@0.11.1/dist/vue-jsoneditor.es.js"></script>
     • CDN + IIFE: <script src="https://unpkg.com/vue-jsoneditor@0.11.1/dist/vue-jsoneditor.min.js"></script>

   • Vue 2.6 or Earlier

     • Local Registration: npm install vue-jsoneditor@0.10.1
     • Global Registration: npm install vue-jsoneditor@0.10.1
     • CDN + ESM: <script type="module" src="https://unpkg.com/vue-jsoneditor@0.10.1/dist/vue-jsoneditor.es.js"></script>
     • CDN + IIFE: <script src="https://unpkg.com/vue-jsoneditor@0.10.1/dist/vue-jsoneditor.min.js"></script>

   • Nuxt 3

     • Local Registration: npm install vue-jsoneditor@0.11.1
     • Global Registration as a Module: npm install vue-jsoneditor@0.11.1
     • Global Registration as a Plugin: npm install vue-jsoneditor@0.11.1

   • Nuxt 2 + Vue 2.7

     • Local Registration: npm install vue-jsoneditor@0.11.1
     • Global Registration: npm install vue-jsoneditor@0.11.1

   • Nuxt 2 + Vue 2.6 or Earlier

     • Local Registration: npm install vue-jsoneditor@0.10.1
     • Global Registration: npm install vue-jsoneditor@0.10.1

   • Vite

     • Ready to use right out of the box

   • Vue CLI 5 (webpack 5)

     • Ready to use right out of the box

   • Vue CLI 4 (webpack 4)

     • Version greater than or equal to 4.5.15: npm install vue-jsoneditor@0.11.1
     • Version less than 4.5.15: npm install vue-jsoneditor@0.11.0

   • Vue CLI 3 (webpack 4)

     • npm install vue-jsoneditor@0.11.0

   • Vue CLI 2 & 1 (webpack 3)

     • Vue CLI 2 & 1 pull the template from vuejs-templates/webpack.

3. For props and binding values, refer to the documentation for detailed information.

Summary

The JSONEditorVue component is a powerful and flexible Vue component for handling JSON data. With its various features such as multiple edit modes, support for large JSON documents, compatibility with different versions of Vue, and seamless integration with popular tools and frameworks, it provides developers with a versatile tool for working with JSON data in Vue applications. Whether you need to view, edit, format, validate, or manipulate JSON, the JSONEditorVue component has you covered.