fossabot/json-editor-vuePublic

forked fromcloydlau/json-editor-vue

NotificationsYou must be signed in to change notification settings
Fork0
Star0

JSON editor & viewer for Vue 2.6/2.7/3 & Nuxt 2/3.

cloydlau.github.io/demo/json-editor-vue.html

License

MIT license

0 stars 29 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 445 Commits
.github/workflows		.github/workflows
.husky		.husky
.vitepress		.vitepress
__tests__		__tests__
demo		demo
docs		docs
src		src
.commitlintrc.ts		.commitlintrc.ts
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
auto-imports.d.ts		auto-imports.d.ts
index.html		index.html
nuxt.ts		nuxt.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
rome.json		rome.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Repository files navigation

JSON Editor Vue

JSON editor & viewer for Vue 2.6/2.7/3 & Nuxt 2/3.
English |简体中文
 🕹 Playground

Features

Support Vue 2.6/2.7/3
Support SSR (Nuxt 2/3)
Support Vite, Vue CLI, webpack, CDN...
Support microfrontends (wujie,qiankun,single-spa...)
Edit mode two-way binding
Local registration & configuration, or global registration & configuration (Powered byvue-global-config)

Install

Peer Dependencies

vue
vanilla-jsoneditor: Standalone bundle provided bysvelte-jsoneditor (successor tojsoneditor)
~~@vue/composition-api~~: Only for Vue 2.6 or earlier

Vue 3

npm i json-editor-vue vanilla-jsoneditor

Local Registration

<template>  <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"  /></template><script setup>importJsonEditorVuefrom'json-editor-vue'constvalue=ref()</script>

Global Registration

import{createApp}from'vue'importJsonEditorVuefrom'json-editor-vue'createApp().use(JsonEditorVue,{// global props & attrs (one-way data flow)}).mount('#app')

CDN + ESM

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scripttype="importmap">{"imports":{"vue":"https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js","vue-demi":"https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs","vanilla-jsoneditor":"https://cdn.jsdelivr.net/npm/vanilla-jsoneditor","json-editor-vue":"https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"}}</script><scripttype="module">import{createApp,ref}from'vue'importJsonEditorVuefrom'json-editor-vue'createApp({setup:()=>({value:ref()})}).use(JsonEditorVue).mount('#app')</script></body></html>

CDN + IIFE

⚠ Not yet supported because vanilla-jsoneditor does not export IIFE or UMD, please leave a messagehere if you need it.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script><script>const{ createApp, ref}=VuecreateApp({setup:()=>({value:ref(),}),}).component('json-editor-vue',JsonEditorVue).mount('#app')</script></body></html>

Vue 2.7

npm i json-editor-vue vanilla-jsoneditor

Local Registration

<template>  <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"  /></template><script setup>importJsonEditorVuefrom'json-editor-vue'constvalue=ref()</script>

Global Registration

importVuefrom'vue'importJsonEditorVuefrom'json-editor-vue'Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})

CDN + ESM

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scripttype="importmap">{"imports":{"vue":"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js","vue-demi":"https://cdn.jsdelivr.net/npm/vue-demi/lib/v2.7/index.mjs","vanilla-jsoneditor":"https://cdn.jsdelivr.net/npm/vanilla-jsoneditor","json-editor-vue":"https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"}}</script><scripttype="module">importVuefrom'vue'importJsonEditorVuefrom'json-editor-vue'newVue({components:{ JsonEditorVue},data(){return{value:undefined,}},}).$mount('#app')</script></body></html>

CDN + IIFE

⚠ Not yet supported because vanilla-jsoneditor does not export IIFE or UMD, please leave a messagehere if you need it.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script><script>newVue({components:{ JsonEditorVue},data(){return{value:undefined,}},}).$mount('#app')</script></body></html>

Vue 2.6 or Earlier

npm i json-editor-vue vanilla-jsoneditor @vue/composition-api

Local Registration

<template>  <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"  /></template><script>importVuefrom'vue'importVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'Vue.use(VCA)exportdefault {  components: { JsonEditorVue },data() {return {      value:undefined,    }  },}</script>

Global Registration

importVuefrom'vue'importVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'Vue.use(VCA)Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})

CDN + ESM

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><script>window.process={env:{NODE_ENV:'production'}}</script><scripttype="importmap">{"imports":{"vue":"https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.esm.browser.min.js","@vue/composition-api":"https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs","@vue/composition-api/dist/vue-composition-api.mjs":"https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs","vue-demi":"https://cdn.jsdelivr.net/npm/vue-demi/lib/v2/index.mjs","vanilla-jsoneditor":"https://cdn.jsdelivr.net/npm/vanilla-jsoneditor","json-editor-vue":"https://cdn.jsdelivr.net/npm/json-editor-vue@0.10/dist/json-editor-vue.mjs"}}</script><scripttype="module">import{createApp,ref}from'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'constapp=createApp({setup:()=>({value:ref(),}),})app.use(JsonEditorVue)app.mount('#app')</script></body></html>

CDN + IIFE

⚠ Not yet supported because vanilla-jsoneditor does not export IIFE or UMD, please leave a messagehere if you need it.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.10"></script><script>const{ createApp, ref}=VueCompositionAPIconstapp=createApp({setup:()=>({value:ref(),}),})app.use(VueCompositionAPI)app.component('json-editor-vue',JsonEditorVue)app.mount('#app')</script></body></html>

Nuxt 3

npm i json-editor-vue vanilla-jsoneditor

Local Registration

<!-- ~/components/JsonEditorVue.client.vue--><template>  <JsonEditorVuev-bind="attrs" /></template><script setup>importJsonEditorVuefrom'json-editor-vue'constattrs=useAttrs()</script>

<template>  <client-only>    <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"    />  </client-only></template><script setup>constvalue=ref()</script>

Global Registration as a Module

// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['json-editor-vue/nuxt'],})

<template>  <client-only>    <JsonEditorVuev-model="value" />  </client-only></template><script setup>constvalue=ref()</script>

Global Registration as a Plugin

// ~/plugins/JsonEditorVue.client.tsimportJsonEditorVuefrom'json-editor-vue'exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(JsonEditorVue,{// global props & attrs (one-way data flow)})})

<template>  <client-only>    <JsonEditorVuev-model="value" />  </client-only></template><script setup>constvalue=ref()</script>

Nuxt 2 + Vue 2.7

npm i json-editor-vue vanilla-jsoneditor

Local Registration

// nuxt.config.jsexportdefault{build:{// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}

<template>  <client-only>    <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"    />  </client-only></template><script setup>import {ref }from'vue'constJsonEditorVue= ()=>process.client?import('json-editor-vue'):Promise.resolve({render: (h)=>h('div') })constvalue=ref()</script>

Global Registration

// nuxt.config.jsexportdefault{plugins:['~/plugins/JsonEditorVue.client'],build:{// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}

// ~/plugins/JsonEditorVue.client.jsimportVuefrom'vue'importJsonEditorVuefrom'json-editor-vue'Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})

<template>  <client-only>    <JsonEditorVuev-model="value" />  </client-only></template><script setup>import {ref }from'vue'constvalue=ref()</script>

Nuxt 2 + Vue 2.6 or Earlier

npm i json-editor-vue vanilla-jsoneditor @vue/composition-api

Local Registration

// nuxt.config.jsexportdefault{build:{// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}

<template>  <client-only>    <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}"    />  </client-only></template><script>importVuefrom'vue'importVCAfrom'@vue/composition-api'Vue.use(VCA)exportdefault {  components: {JsonEditorVue: ()=>process.client?import('json-editor-vue'):Promise.resolve({render: (h)=>h('div') }),  },data() {return {      value:undefined,    }  },}</script>

Global Registration

// nuxt.config.jsexportdefault{plugins:['~/plugins/JsonEditorVue.client'],build:{// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}

// ~/plugins/JsonEditorVue.client.jsimportVuefrom'vue'importVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'Vue.use(VCA)Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})

<template>  <client-only>    <JsonEditorVuev-model="value" />  </client-only></template><script>exportdefault {data() {return {      value:undefined,    }  },}</script>

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)

≥ v4.5.15

// vue.config.jsmodule.exports={// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpileDependencies:['json-editor-vue'],}

＜ v4.5.15

// vue.config.jsmodule.exports={// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpileDependencies:['json-editor-vue'],configureWebpack:{module:{rules:[// Getting webpack to recognize the `.mjs` file{test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',},],},},}

Vue CLI 3 (webpack 4)

npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D

// babel.config.jsmodule.exports={plugins:['@babel/plugin-proposal-nullish-coalescing-operator','@babel/plugin-proposal-optional-chaining',],}

// vue.config.jsmodule.exports={// Vite 4 (Rollup 3) uses ES2020 as compiler target by default// Therefore Vite-4-built outputs should be transpiled in webpack 4transpileDependencies:['json-editor-vue'],chainWebpack(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rule('mjs').include.add(/node_modules/).type('javascript/auto').end()},}

Vue CLI 2 & 1 (webpack 3)

Vue CLI 2 & 1 pull the template fromvuejs-templates/webpack.

npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D

// babel.config.jsmodule.exports={presets:['@babel/preset-env',],}

// webpack.base.conf.jsmodule.exports={module:{rules:[// Getting webpack to recognize the `.mjs` file{test:/\.mjs$/,loader:'babel-loader',include:[resolve('src'),resolve('test'),resolve('node_modules/json-editor-vue')],},],},}

Props

Name	Description	Type	Default
v-model / modelValue (Vue 3) / value (Vue 2)	binding value	any
mode / v-model:mode (Vue 3) / :mode.sync (Vue 2)	edit mode	Mode	`'tree'`
...	properties ofsvelte-jsoneditor

⚠ kebab-case is required for tag & prop name when using from CDN.

Binding value difference between svelte-jsoneditor and json-editor-vue

svelte-jsoneditor: An object contains a stringified JSON or a parsed JSON, will doJSON.parse when passing as a stringified JSON.
json-editor-vue: JSON itself. What you see is what you get.

If you prefer the behavior of svelte-jsoneditor:

<JsonEditorVue:content="content":onChange="(updatedContent) => {    content = updatedContent  }"/>

Seejosdejong/svelte-jsoneditor#166 for more details.

Boolean properties

Including the boolean properties of svelte-jsoneditor likereadOnly with no value will implytrue:

✔️<JsonEditorVue readOnly />
✔️<JsonEditorVue :readOnly="true" />

Expose

Name	Description	Type
jsonEditor	JSONEditor instance	object

Types

typeMode='tree'|'text'|'table'

Dark Theme

<template>  <JsonEditorVueclass="jse-theme-dark" /></template><script setup>import'vanilla-jsoneditor/themes/jse-theme-dark.css'importJsonEditorVuefrom'json-editor-vue'</script>

Changelog

Detailed changes for each release are documented in therelease notes.

Develop

Install Deno
Runnpm i -g @cloydlau/scripts
Runcl i and choose pnpm
Runcl dev3 /cl dev2.7 /cl dev2.6

License

About

JSON editor & viewer for Vue 2.6/2.7/3 & Nuxt 2/3.

cloydlau.github.io/demo/json-editor-vue.html

Releases

34tags

Packages

No packages published

Languages

TypeScript91.6%
Shell4.9%
HTML3.5%

Movatterモバイル変換

License

fossabot/json-editor-vue

Folders and files

Latest commit

History

Repository files navigation

JSON Editor Vue

Features

Install

Peer Dependencies

Vue 3

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Vue 2.7

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Vue 2.6 or Earlier

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Nuxt 3

Local Registration

Global Registration as a Module

Global Registration as a Plugin

Nuxt 2 + Vue 2.7

Local Registration

Global Registration

Nuxt 2 + Vue 2.6 or Earlier

Local Registration

Global Registration

Vite

Vue CLI 5 (webpack 5)

Vue CLI 4 (webpack 4)

Vue CLI 3 (webpack 4)

Vue CLI 2 & 1 (webpack 3)

Props

Binding value difference between svelte-jsoneditor and json-editor-vue

Boolean properties

Expose

Types

Dark Theme

Changelog

Develop

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages0

Languages

Packages