Skip to content

A jsoneditor of vue 3 (next) - (fork vue-json-editor)

License

Notifications You must be signed in to change notification settings

North-al/vue3-json-editor

This branch is 1 commit ahead of, 5 commits behind joaomede/vue3-json-editor:master.

Folders and files

NameName
Last commit message
Last commit date
Oct 4, 2022
Jun 30, 2021
May 26, 2021
Mar 18, 2022
May 26, 2021
May 26, 2021
May 26, 2021
Mar 16, 2022
May 26, 2021
Mar 18, 2022
May 26, 2021
Mar 16, 2022
May 26, 2021
Jun 29, 2021
May 26, 2021
Mar 18, 2022
Mar 18, 2022
Jun 29, 2021
May 26, 2021
May 26, 2021
Jun 29, 2021
Mar 16, 2022

Repository files navigation

vue3-json-editor

(fork vue-json-editor - credits original: https://github.com/dirkliu/vue-json-editor)

A json editor of vue.js

Support

  • Module ESM: Yes
  • Unpkg: Yes
  • CommonJS: Yes

How to run DEMO

# install
npm install

# for vue 3.x app
npm run dev

# for vite 3.x
npm run dev_vite

Component properties

v-model:bind the [json object]
:show-btns: boolean, show the save button, default: true
:expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false
:mode: string, default: tree
:lang: string, default: en
@json-change: on json changed
@json-save: on json save
@has-error: on error

How to use

1. Install using npm

npm install vue3-json-editor --save

2. Use vue-json-editor in the vue component

<template>
  <div>
    <p>vue-json-editor</p>
    <Vue3JsonEditor
      v-model="json"
      :show-btns="true"
      :expandedOnStart="true"
      @json-change="onJsonChange"
    />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'

export default defineComponent({
  components: {
    Vue3JsonEditor
  },
  setup () {
    function onJsonChange (value) {
      console.log('value:', value)
    }

    const state = reactive({
      json: {}
    })

    return {
      ...toRefs(state),
      onJsonChange
    }
  }
})
</script>

3. Vue Vite Example

<template>
  <Vue3JsonEditor v-model="json" :show-btns="true" @json-change="onJsonChange"/>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Vue3JsonEditor } from '../dist/vue3-json-editor.esm'

export default defineComponent({
  name: 'App',
  components: {
    Vue3JsonEditor
  },
  setup () {
    function onJsonChange () {
      //
    }

    const state = reactive({
      json: {}
    })

    return {
      ...toRefs(state),
      onJsonChange
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

About

A jsoneditor of vue 3 (next) - (fork vue-json-editor)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.3%
  • CSS 1.3%
  • Other 0.4%