Skip to content

Commit 8705675

Browse files
cloydlaucloydlau
committed
wip: stash
1 parent 7665924 commit 8705675

36 files changed

+73443
-38
lines changed

‎README.md‎

Lines changed: 121 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ English | [简体中文](./docs/README.zh-CN.md)
22

33
# json-editor-vue
44

5-
JSON editor & viewer for Vue 2.6 / 2.7 / 3, powered by [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor).
5+
JSON editor & viewer for Vue 2.6 / 2.7 / 3 and Nuxt 2 / 3, powered by [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor).
66

77
> svelte-jsoneditor is the successor of [jsoneditor](https://github.com/josdejong/jsoneditor), which ['has become hard to maintain, and the architecture needed a big overhaul'](https://github.com/josdejong/jsoneditor/issues/1223).
88
@@ -17,6 +17,7 @@ JSON editor & viewer for Vue 2.6 / 2.7 / 3, powered by [svelte-jsoneditor](https
1717
## Features
1818

1919
- Support Vue 2.6 / 2.7 / 3
20+
- Support SSR (Nuxt 2 / 3)
2021
- Edit mode two-way binding
2122
- Local registration + local configuration, can also be global registration + global configuration (Powered by [vue-global-config](https://github.com/cloydlau/vue-global-config))
2223

@@ -36,19 +37,6 @@ JSON editor & viewer for Vue 2.6 / 2.7 / 3, powered by [svelte-jsoneditor](https
3637
npm add json-editor-vue vanilla-jsoneditor
3738
```
3839

39-
#### Global Registration
40-
41-
```ts
42-
import { createApp } from 'vue'
43-
import JsonEditorVue from 'json-editor-vue'
44-
45-
createApp()
46-
.use(JsonEditorVue, {
47-
// global props & attrs (one-way data flow)
48-
})
49-
.mount('#app')
50-
```
51-
5240
#### Local Registration
5341

5442
```vue
@@ -63,6 +51,19 @@ const value = ref()
6351
</script>
6452
```
6553

54+
#### Global Registration
55+
56+
```ts
57+
import { createApp } from 'vue'
58+
import JsonEditorVue from 'json-editor-vue'
59+
60+
createApp()
61+
.use(JsonEditorVue, {
62+
// global props & attrs (one-way data flow)
63+
})
64+
.mount('#app')
65+
```
66+
6667
#### CDN
6768

6869
```html
@@ -103,17 +104,6 @@ const value = ref()
103104
npm add json-editor-vue vanilla-jsoneditor
104105
```
105106

106-
#### Global Registration
107-
108-
```ts
109-
import Vue from 'vue'
110-
import JsonEditorVue from 'json-editor-vue'
111-
112-
Vue.use(JsonEditorVue, {
113-
// global props & attrs (one-way data flow)
114-
})
115-
```
116-
117107
#### Local Registration
118108

119109
```vue
@@ -128,6 +118,17 @@ const value = ref()
128118
</script>
129119
```
130120

121+
#### Global Registration
122+
123+
```ts
124+
import Vue from 'vue'
125+
import JsonEditorVue from 'json-editor-vue'
126+
127+
Vue.use(JsonEditorVue, {
128+
// global props & attrs (one-way data flow)
129+
})
130+
```
131+
131132
#### CDN
132133

133134
```html
@@ -170,19 +171,6 @@ const value = ref()
170171
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
171172
```
172173

173-
#### Global Registration
174-
175-
```ts
176-
import Vue from 'vue'
177-
import VCA from '@vue/composition-api'
178-
import JsonEditorVue from 'json-editor-vue'
179-
180-
Vue.use(VCA)
181-
Vue.use(JsonEditorVue, {
182-
// global props & attrs (one-way data flow)
183-
})
184-
```
185-
186174
#### Local Registration
187175

188176
```vue
@@ -208,6 +196,19 @@ export default {
208196
</script>
209197
```
210198

199+
#### Global Registration
200+
201+
```ts
202+
import Vue from 'vue'
203+
import VCA from '@vue/composition-api'
204+
import JsonEditorVue from 'json-editor-vue'
205+
206+
Vue.use(VCA)
207+
Vue.use(JsonEditorVue, {
208+
// global props & attrs (one-way data flow)
209+
})
210+
```
211+
211212
#### CDN
212213

213214
> It's quite messy this way due to `vanilla-jsoneditor` does not export UMD.
@@ -249,6 +250,88 @@ export default {
249250

250251
<br>
251252

253+
### Nuxt 3
254+
255+
```vue
256+
<!-- ~/components/JsonEditorVue.client.vue -->
257+
258+
<template>
259+
<JsonEditorVue v-model="value" />
260+
</template>
261+
262+
<script setup>
263+
import JsonEditorVue from 'json-editor-vue'
264+
265+
const value = ref()
266+
</script>
267+
```
268+
269+
```vue
270+
<!-- app.vue -->
271+
272+
<template>
273+
<JsonEditorVue />
274+
</template>
275+
```
276+
277+
<br>
278+
279+
### Nuxt 2 with Vue 2.7
280+
281+
```vue
282+
<template>
283+
<client-only>
284+
<JsonEditorVue v-model="value" />
285+
</client-only>
286+
</template>
287+
288+
<script setup>
289+
import Vue, { ref } from 'vue'
290+
291+
import JsonEditorVue from 'json-editor-vue'
292+
293+
Vue.use(() => process.client
294+
? import('json-editor-vue')
295+
: Promise.resolve({ render: h => h('div') }))
296+
// const JsonEditorVue =
297+
298+
const value = ref(undefined)
299+
</script>
300+
```
301+
302+
<br>
303+
304+
### Nuxt 2 with Vue 2.6
305+
306+
```vue
307+
<template>
308+
<client-only>
309+
<JsonEditorVue v-model="value" />
310+
</client-only>
311+
</template>
312+
313+
<script>
314+
import Vue from 'vue'
315+
import VueCompositionAPI from '@vue/composition-api'
316+
Vue.use(VueCompositionAPI)
317+
318+
export default {
319+
components: {
320+
JsonEditorVue: () => process.client
321+
? import('json-editor-vue')
322+
: Promise.resolve({ render: h => h('div') }),
323+
},
324+
data() {
325+
return {
326+
value: undefined,
327+
}
328+
},
329+
}
330+
</script>
331+
```
332+
333+
<br>
334+
252335
## Props
253336

254337
| Name | Description | Type | Default |

‎demo/nuxt2+vue2.6/.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎demo/nuxt2+vue2.6/.gitignore‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Created by .ignore support plugin (hsz.mobi)
2+
### Node template
3+
# Logs
4+
/logs
5+
*.log
6+
npm-debug.log*
7+
yarn-debug.log*
8+
yarn-error.log*
9+
10+
# Runtime data
11+
pids
12+
*.pid
13+
*.seed
14+
*.pid.lock
15+
16+
# Directory for instrumented libs generated by jscoverage/JSCover
17+
lib-cov
18+
19+
# Coverage directory used by tools like istanbul
20+
coverage
21+
22+
# nyc test coverage
23+
.nyc_output
24+
25+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26+
.grunt
27+
28+
# Bower dependency directory (https://bower.io/)
29+
bower_components
30+
31+
# node-waf configuration
32+
.lock-wscript
33+
34+
# Compiled binary addons (https://nodejs.org/api/addons.html)
35+
build/Release
36+
37+
# Dependency directories
38+
node_modules/
39+
jspm_packages/
40+
41+
# TypeScript v1 declaration files
42+
typings/
43+
44+
# Optional npm cache directory
45+
.npm
46+
47+
# Optional eslint cache
48+
.eslintcache
49+
50+
# Optional REPL history
51+
.node_repl_history
52+
53+
# Output of 'npm pack'
54+
*.tgz
55+
56+
# Yarn Integrity file
57+
.yarn-integrity
58+
59+
# dotenv environment variables file
60+
.env
61+
62+
# parcel-bundler cache (https://parceljs.org/)
63+
.cache
64+
65+
# next.js build output
66+
.next
67+
68+
# nuxt.js build output
69+
.nuxt
70+
71+
# Nuxt generate
72+
dist
73+
74+
# vuepress build output
75+
.vuepress/dist
76+
77+
# Serverless directories
78+
.serverless
79+
80+
# IDE / Editor
81+
.idea
82+
83+
# Service worker
84+
sw.*
85+
86+
# macOS
87+
.DS_Store
88+
89+
# Vim swap files
90+
*.swp

‎demo/nuxt2+vue2.6/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# nuxt2
2+
3+
## Build Setup
4+
5+
```bash
6+
# install dependencies
7+
$ npm install
8+
9+
# serve with hot reload at localhost:3000
10+
$ npm run dev
11+
12+
# build for production and launch server
13+
$ npm run build
14+
$ npm run start
15+
16+
# generate static project
17+
$ npm run generate
18+
```
19+
20+
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
21+
22+
## Special Directories
23+
24+
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
25+
26+
### `assets`
27+
28+
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
29+
30+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
31+
32+
### `components`
33+
34+
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
35+
36+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
37+
38+
### `layouts`
39+
40+
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
41+
42+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
43+
44+
45+
### `pages`
46+
47+
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
48+
49+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
50+
51+
### `plugins`
52+
53+
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
54+
55+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
56+
57+
### `static`
58+
59+
This directory contains your static files. Each file inside this directory is mapped to `/`.
60+
61+
Example: `/static/robots.txt` is mapped as `/robots.txt`.
62+
63+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
64+
65+
### `store`
66+
67+
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
68+
69+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

0 commit comments

Comments
 (0)