DOCSEARCHbyAlgolia
Submit Docs

json-editor-vue

repository·main·Indexed 20 days ago

https://github.com/cloydlau/json-editor-vue

A high-performance, isomorphic JSON editor, viewer, formatter, and validator for Vue 2 and Vue 3 applications. It supports large datasets up to 512 MB and provides multiple edit modes including text, tree, and table. The library features two-way binding for parsed objects or stringified strings, supports 7 primitive data types (including BigInt and Symbol), and is compatible with Nuxt 2/3/4, Vite, Vue CLI, and webpack.

Tokens
5.3K
Snippets
30
Records
37
Agent score
68%

What's inside json-editor-vue

  1. Overview of JSON Editor Vue

    main

    JSON Editor Vue is a high-performance, universal JSON editing and preview tool designed for Vue 2 and Vue 3 applications. It supports large JSON documents (up to 512 MB) and provides multiple modes for interacting with data.

    Key Features

    • High Performance: Uses destr for deserialization, which can be up to 35.96x faster than JSON.parse.
    • Powerful Toolset: Supports previewing, editing, formatting, validation, compression, sorting, querying, filtering, transformation, repairing, and syntax highlighting.
    • Data Types: Supports 7 primitive data types, including BigInt and Symbol.
    • Editing Modes:
      • Text Mode: Standard text-based editing.
      • Tree Mode: Hierarchical tree structure view.
      • Table Mode: Tabular data view.
    • Themes: Supports both Light and Dark themes.
    • Two-way Binding: Supports binding to either parsed JSON objects or stringified JSON strings.
    • Flexibility: Works with Vue 2.6/2.7/3, Nuxt 2/3/4 (SSR support), Vite, Vue CLI, webpack, and CDN. It is compatible with micro-frontends and both PC and mobile platforms.

  2. Understand Nuxt 2 special directories

    main

    The Nuxt 2 demo uses several special directories that dictate application behavior. While pages is the only required directory, others provide specific functionality:

    • assets: Stores uncompiled assets like Stylus, Sass, images, or fonts.
    • components: Contains reusable Vue.js components.
    • layouts: Used to define different structural templates (e.g., sidebars, mobile vs. desktop views).
    • pages: Contains *.vue files that Nuxt automatically uses to configure Vue Router routes.
    • plugins: Contains JavaScript files to run before the root Vue application is instantiated. Use this for Vue.use() calls. Note: You must add the plugin path to nuxt.config.js.
    • static: Contains static files mapped to the root /. For example, static/robots.txt is accessible at /robots.txt.
    • store: Contains Vuex store files. Creating files here automatically activates Vuex.

  3. Understand the relationship between mode and bound values

    main

    The type of data returned or accepted depends on the current mode.

    Important behaviors:

    • Tree Mode: The output value is always parsed JSON (any data type). If a string is passed as input in tree mode, it is treated as a plain string.
    • Text Mode: The output value is stringified JSON (a string). If a string is passed as input in text mode, it is treated as stringified JSON.

    How to keep parsed JSON in Text Mode: If you want to maintain a parsed JSON object as the bound value even when using text mode, set :stringified="false".

    CAUTION
    • This has poor performance for large JSON documents.
    • Adjust the debounce value based on your JSON size.
    • If the input value is invalid JSON, the output will be undefined.
    <script setup>
import { Mode } from 'vanilla-jsoneditor'
</script>

<template>
  <!-- Keeps the bound value as parsed JSON even in text mode -->
  <JsonEditorVue :mode="Mode.text" :stringified="false" />
</template>

  4. Understand Nuxt 2 special directory structures

    main

    The Nuxt 2 demo uses standard Nuxt directory conventions. While pages is the only required directory, others provide specific functionality:

    • assets: Stores uncompiled assets like Sass, Stylus, images, or fonts.
    • components: Stores reusable Vue.js components.
    • layouts: Defines page templates (e.g., for sidebars or mobile/desktop variations).
    • pages: Contains application views; Nuxt automatically configures Vue Router based on the *.vue files here.
    • plugins: For JavaScript plugins to run before the root Vue instance is created. Use this for Vue.use() calls and register the file paths in nuxt.config.js.
    • static: Contains static files mapped to the root /. For example, static/robots.txt is served at /robots.txt.
    • store: Contains Vuex store files. Creating a file here automatically activates Vuex.

  7. Install and use json-editor-vue in Nuxt 2 (Vue 2.7)

    main

    When using Nuxt 2 with Vue 2.7, you must transpile json-editor-vue in your nuxt.config.js and configure Webpack to recognize .mjs files. It is recommended to use a client-side plugin and wrap the component in <ClientOnly> to avoid SSR issues.

    // nuxt.config.js
export default {
  plugins: ['~/plugins/JsonEditorVue.client'],
  build: {
    transpile: ['json-editor-vue'],
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}

  10. Register JsonEditorVue globally in Vue 3

    main

    Register the component globally using app.use(). You can pass an options object to provide global props and attributes (following a one-way data flow).

    import JsonEditorVue from 'json-editor-vue'
import { createApp } from 'vue'

createApp()
  .use(JsonEditorVue, {
    // 全局 props & attrs（单向数据流）
  })
  .mount('#app')

  11. Use Vuex Store with Nuxt.js in json-editor-vue

    main
    In the Nuxt.js framework implementation, you can use a Vuex Store to manage state. To activate the Vuex Store option, simply create a file within the store/ directory. The framework automatically detects and activates the store based on the presence of files in this directory. Note that this directory is optional and can be deleted if you do not require state management.

  12. Register JsonEditorVue globally in Vue 2.6 or earlier

    main

    First, register the @vue/composition-api plugin, then register JsonEditorVue using Vue.use().

    import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'
import Vue from 'vue'

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // 全局 props & attrs（单向数据流）
})