### Install Project Dependencies

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli3/README.md

Run this command in the project root to install all necessary dependencies.

```bash
npm install
```

--------------------------------

### Vue-CLI 2 Build Setup Commands

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli2/README.md

Install dependencies, run the development server with hot reloading, build for production, or build with a bundle analyzer report.

```bash
npm install
```

```bash
npm run dev
```

```bash
npm run build
```

```bash
npm run build --report
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli4/README.md

Run this command to install all necessary project dependencies after cloning or creating a new Vue.js project.

```bash
yarn install
```

--------------------------------

### Install Dependencies with Yarn, npm, or pnpm

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/nuxt3/README.md

Use these commands to install project dependencies based on your preferred package manager.

```bash
yarn install
```

```bash
npm install
```

```bash
pnpm install --shamefully-hoist
```

--------------------------------

### Start Development Server

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli3/README.md

Compiles and hot-reloads the project for development. Access your application at the specified local URL.

```bash
npm run serve
```

--------------------------------

### Start Development Server

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli4/README.md

Use this command to compile the project and launch a local development server with hot-reloading enabled. This is ideal for active development.

```bash
yarn serve
```

--------------------------------

### Install json-editor-vue with npm

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Use this command to install the library via npm. This is the first step for both Vue 3 and Vue 2.7 projects.

```shell
npm i json-editor-vue
```

--------------------------------

### Start Nuxt 3 Development Server

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/nuxt3/README.md

Command to launch the local development server for a Nuxt 3 project.

```bash
npm run dev
```

--------------------------------

### Install JSON Editor Vue for Vue 2.6 or Earlier

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Install the necessary packages using npm for Vue 2.6 or earlier projects.

```shell
npm i @vue/composition-api json-editor-vue
```

--------------------------------

### Nuxt 2 Build Setup Commands

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/nuxt2+vue2.7/README.md

Essential commands for managing dependencies, running the development server, building for production, and generating a static site for a Nuxt 2 project.

```bash
# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate
```

--------------------------------

### Install lossless-json for BigInt Support

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Install the lossless-json package to enable support for BigInt values within the JSON editor. This is required before configuring the editor.

```shell
npm i lossless-json
```

--------------------------------

### Install Babel Plugins for Vue CLI 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Install Babel plugins for nullish coalescing and optional chaining operators when using Vue CLI 3 with webpack 4.

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

--------------------------------

### Install Babel Core and Loader for Vue CLI 2/1

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Install Babel core and babel-loader for use with Vue CLI 2 & 1 (webpack 3).

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

--------------------------------

### Boolean Property Example

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Illustrates how boolean properties like 'readOnly' can be set. Providing the property without a value implies 'true'.

```vue
<JsonEditorVue readOnly />
```

```vue
<JsonEditorVue :readOnly="true" />
```

--------------------------------

### Nuxt 2 + Vue 2.6 Global Plugin Setup

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Set up the client-side plugin for global registration in Nuxt 2 with Vue 2.6 or earlier. This registers both the composition API and json-editor-vue globally.

```typescript
// ~/plugins/JsonEditorVue.client.js

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

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})
```

--------------------------------

### Nuxt 2 + Vue 2.7 Global Plugin Setup

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Set up the client-side plugin for global registration of json-editor-vue in Nuxt 2 with Vue 2.7. This registers the component globally using Vue.use().

```typescript
// ~/plugins/JsonEditorVue.client.js

import JsonEditorVue from 'json-editor-vue'
import Vue from 'vue'

Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})
```

--------------------------------

### Nuxt 2 + Vue 2.6 Global Component Usage

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Example of using json-editor-vue globally in Nuxt 2 with Vue 2.6 or earlier. It uses ClientOnly for client-side rendering and assumes global registration.

```vue
<script>
export default {
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

<template>
  <ClientOnly>
    <JsonEditorVue
      v-model="value"
      v-bind="{/* local props & attrs */}"
    />
  </ClientOnly>
</template>
```

--------------------------------

### Nuxt 2 + Vue 2.7 Local Component Usage

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Example of using json-editor-vue locally within a Vue component in Nuxt 2 with Vue 2.7. It dynamically imports the component for client-side rendering.

```vue
<script setup>
import { ref } from 'vue'

function JsonEditorVue() {
  return process.client
    ? import('json-editor-vue')
    : Promise.resolve({ render: h => h('div') })
}

const value = ref()
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Nuxt 2 + Vue 2.6 Local Component Registration and Usage

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register and use json-editor-vue locally in Nuxt 2 with Vue 2.6 or earlier. This example uses Vue.use() for the composition API and dynamically imports the component.

```vue
<script>
import VCA from '@vue/composition-api'
import Vue from 'vue'

Vue.use(VCA)

export default {
  components: {
    JsonEditorVue: () => process.client
      ? import('json-editor-vue')
      : Promise.resolve({ render: h => h('div') }),
  },
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Nuxt 2 + Vue 2.7 Global Component Usage

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Example of using json-editor-vue globally within a Vue component in Nuxt 2 with Vue 2.7. It uses ClientOnly to ensure it renders on the client side.

```vue
<script setup>
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <ClientOnly>
    <JsonEditorVue
      v-model="value"
      v-bind="{/* local props & attrs */}"
    />
  </ClientOnly>
</template>
```

--------------------------------

### Local Registration in Vue 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Import and use the JsonEditorVue component directly within your Vue 3 setup. This method is suitable for component-specific usage.

```vue
<script setup>
import JsonEditorVue from 'json-editor-vue'

const value = ref()
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Build for Production

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/vue-cli4/README.md

Execute this command to compile and minify the project for production deployment. It creates optimized build artifacts.

```bash
yarn build
```

--------------------------------

### Build Nuxt 3 Application for Production

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/nuxt3/README.md

Command to create a production-ready build of the Nuxt 3 application.

```bash
npm run build
```

--------------------------------

### Preview Nuxt 3 Production Build Locally

Source: https://github.com/cloydlau/json-editor-vue/blob/main/demo/nuxt3/README.md

Command to locally preview the production build of the Nuxt 3 application.

```bash
npm run preview
```

--------------------------------

### Basic Usage with Content Binding

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Demonstrates how to bind content to the JsonEditorVue component and handle updates via the onChange event.

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

--------------------------------

### Specify Dependency Versions (General)

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Use 'overrides' (npm/cnpm/bun), 'resolutions' (yarn/bun), or 'pnpm.overrides' to specify versions for vanilla-jsoneditor and vue-demi.

```json5
// package.json
{
  // npm/cnpm/bun
  "overrides": {
    "vanilla-jsoneditor": "***",
    "vue-demi": "***"
  },
  // yarn/bun
  "resolutions": {
    "vanilla-jsoneditor": "***",
    "vue-demi": "***"
  },
  // pnpm
  "pnpm": {
    "overrides": {
      "vanilla-jsoneditor": "***",
      "vue-demi": "***"
    }
  }
}
```

--------------------------------

### Configure Babel Presets for Vue CLI 2/1

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure babel.config.js to use the @babel/preset-env for Vue CLI 2 & 1.

```javascript
// babel.config.js

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

--------------------------------

### Configure Babel for Vue CLI 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure babel.config.js to include the necessary Babel plugins for Vue CLI 3.

```javascript
// babel.config.js

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

--------------------------------

### Specify Dependency Versions (Scoped to json-editor-vue)

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Specify versions for vanilla-jsoneditor and vue-demi within the context of the json-editor-vue package using 'overrides', 'resolutions', or 'pnpm.overrides'.

```json5
// package.json
{
  // npm/cnpm/bun
  "overrides": {
    "json-editor-vue": {
      "vanilla-jsoneditor": "***",
      "vue-demi": "***"
    }
  },
  // yarn/bun
  "resolutions": {
    "json-editor-vue/vanilla-jsoneditor": "***",
    "json-editor-vue/vue-demi": "***"
  },
  // pnpm
  "pnpm": {
    "overrides": {
      "json-editor-vue>vanilla-jsoneditor": "***",
      "json-editor-vue>vue-demi": "***"
    }
  }
}
```

--------------------------------

### Global Registration as a Module in Nuxt 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure Nuxt 3 to globally register JsonEditorVue as a module.

```ts
// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['json-editor-vue/nuxt'],
})
```

```vue
<script setup>
const value = ref()
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Configure Vue CLI 3 for Transpilation

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure vue.config.js to transpile json-editor-vue in webpack 4 and ensure webpack recognizes .mjs files.

```javascript
// vue.config.js

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

--------------------------------

### Global Registration as a Plugin in Nuxt 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register JsonEditorVue as a plugin for global use in Nuxt 3 applications.

```ts
// ~/plugins/JsonEditorVue.client.ts

import JsonEditorVue from 'json-editor-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(JsonEditorVue, {
    // global props & attrs (one-way data flow)
  })
})
```

```vue
<script setup>
const value = ref()
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Configure Webpack for .mjs files in Vue CLI 2/1

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure webpack.base.conf.js to use babel-loader for .mjs files, specifically for the json-editor-vue module.

```javascript
// webpack.base.conf.js

module.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')],
      },
    ],
  },
}
```

--------------------------------

### Call json-editor-vue Methods

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Access and call methods of the json-editor-vue instance after it has been mounted. Ensure the ref is correctly assigned in your Vue template.

```vue
<script setup>
import { onMounted, useTemplateRef } from 'vue'

// Vue ≥ v3.5
const jsonEditorVueRef = useTemplateRef('jsonEditorVueRef')
// Vue < v3.5
// const jsonEditorVueRef = ref()

onMounted(() => {
  jsonEditorVueRef.value.jsonEditor.focus()
})
</script>

<template>
  <JsonEditorVue ref="jsonEditorVueRef" />
</template>
```

--------------------------------

### Update json-editor-vue Dependency

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Remove and reinstall the json-editor-vue package to ensure the latest version is used.

```shell
npm rm json-editor-vue && npm i json-editor-vue
```

--------------------------------

### CDN + ESM Usage for Vue 2.6

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate JsonEditorVue using CDN links with ESM for Vue 2.6 applications.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script> window.process = { env: { NODE_ENV: 'production' } } </script>
    <script type="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.18/dist/json-editor-vue.mjs"
        }
      }
    </script>
    <script type="module">
      import { createApp, ref } from '@vue/composition-api'
      import JsonEditorVue from 'json-editor-vue'

      const app = createApp({
        setup: () => ({
          value: ref(),
        }),
      })

      app.use(JsonEditorVue)
      app.mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### Vue CLI 4 (webpack 4) Configuration (≥ v4.5.15)

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure vue.config.js for Vue CLI 4 (webpack 4) projects using version 4.5.15 or later. This involves transpiling dependencies.

```javascript
// vue.config.js

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

--------------------------------

### CDN + ESM Usage in Vue 2.7

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate json-editor-vue in Vue 2.7 using CDN links for Vue, vue-demi, vanilla-jsoneditor, and the component itself, with ESM module loading.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script type="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.18/dist/json-editor-vue.mjs"
        }
      }
    </script>
    <script type="module">
      import Vue from 'vue'
      import JsonEditorVue from 'json-editor-vue'

      new Vue({
        components: { JsonEditorVue },
        data() {
          return {
            value: undefined,
          }
        },
      }).$mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### CDN + IIFE Usage for Vue 2.6

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate JsonEditorVue using CDN links with IIFE for Vue 2.6 applications. Note: This method is not yet fully supported due to vanilla-jsoneditor limitations.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
    <!-- TODO -->
    <script src="./vanilla-jsoneditor.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
    <script>
      const { createApp, ref } = VueCompositionAPI

      const app = createApp({
        setup: () => ({
          value: ref(),
        }),
      })

      app.use(VueCompositionAPI)
      app.use(JsonEditorVue)
      app.mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### CDN + ESM Usage in Vue 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate json-editor-vue in Vue 3 using CDN links for Vue, vue-demi, vanilla-jsoneditor, and the component itself, with ESM module loading.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script type="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.18/dist/json-editor-vue.mjs"
        }
      }
    </script>
    <script type="module">
      import { createApp, ref } from 'vue'
      import JsonEditorVue from 'json-editor-vue'

      createApp({
        setup: () => ({
          value: ref(),
        }),
      })
        .use(JsonEditorVue)
        .mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### CDN + IIFE Usage in Vue 2.7

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate json-editor-vue in Vue 2.7 using CDN links for Vue, vue-demi, vanilla-jsoneditor, and the component itself, with IIFE module loading. Note: vanilla-jsoneditor does not currently export IIFE or UMD.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
    <!-- TODO -->
    <script src="./vanilla-jsoneditor.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
    <script>
      new Vue({
        components: { JsonEditorVue },
        data() {
          return {
            value: undefined,
          }
        },
      }).$mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### Enable BigInt Support in json-editor-vue

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure the JsonEditorVue component to use custom parsing and stringifying functions from lossless-json for BigInt support. This is done by passing an object with 'parse' and 'stringify' properties to the :parser prop.

```vue
<script setup>
import JsonEditorVue from 'json-editor-vue'
import { parse, stringify } from 'lossless-json'
</script>

<template>
  <JsonEditorVue :parser="{ parse, stringify }" />
</template>
```

--------------------------------

### CDN + IIFE Usage in Vue 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Integrate json-editor-vue in Vue 3 using CDN links for Vue, vue-demi, vanilla-jsoneditor, and the component itself, with IIFE module loading. Note: vanilla-jsoneditor does not currently export IIFE or UMD.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <json-editor-vue v-model="value"></json-editor-vue>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
    <!-- TODO -->
    <script src="./vanilla-jsoneditor.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
    <script>
      const { createApp, ref } = Vue

      createApp({
        setup: () => ({
          value: ref(),
        }),
      })
        .use(JsonEditorVue)
        .mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### Apply Dark Theme to json-editor-vue

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Apply the dark theme to the JsonEditorVue component by importing the dark theme CSS and adding the 'jse-theme-dark' class to the component. This will change the visual appearance of the editor.

```vue
<script setup>
import JsonEditorVue from 'json-editor-vue'
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
</script>

<template>
  <JsonEditorVue class="jse-theme-dark" />
</template>
```

--------------------------------

### Vue CLI 4 (webpack 4) Configuration (＜ v4.5.15)

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure vue.config.js for Vue CLI 4 (webpack 4) projects older than version 4.5.15. This includes transpilation and specific webpack module rules for .mjs files.

```javascript
// vue.config.js

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

--------------------------------

### Nuxt 2 + Vue 2.7 Global Registration Configuration

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure nuxt.config.js for global registration of json-editor-vue in Nuxt 2 with Vue 2.7. This involves setting up plugins and build configurations similar to local registration.

```typescript
// nuxt.config.js

export default {
  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 4
    transpile: ['json-editor-vue'],
    extend(config) {
      // Getting webpack to recognize the `.mjs` file
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}
```

--------------------------------

### Local Registration in Nuxt 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register the JsonEditorVue component locally within a Nuxt 3 application using a client-side component.

```vue
<!-- ~/components/JsonEditorVue.client.vue -->

<script setup>
import JsonEditorVue from 'json-editor-vue'

const attrs = useAttrs()
</script>

<template>
  <JsonEditorVue v-bind="attrs" />
</template>
```

```vue
<script setup>
const value = ref()
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Nuxt 2 + Vue 2.7 Local Registration Configuration

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configure nuxt.config.js for local registration of json-editor-vue in Nuxt 2 with Vue 2.7. This includes transpiling the package and ensuring webpack recognizes .mjs files.

```typescript
// nuxt.config.js

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

--------------------------------

### Using Text Mode with Parsed JSON Output

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Configures the JsonEditorVue to operate in text mode while ensuring the output remains as parsed JSON, not stringified. This is useful for maintaining data structure integrity. Note the performance considerations for large JSON documents and the 'debounce' property.

```javascript
import { Mode } from 'vanilla-jsoneditor'

```

```vue
<template>
  <JsonEditorVue :mode="Mode.text" :stringified="false" />
</template>
```

--------------------------------

### Global Registration in Vue 2.6

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Globally register the JsonEditorVue component for use throughout a Vue 2.6 application.

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

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})
```

--------------------------------

### Local Registration in Vue 2.6

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register the JsonEditorVue component locally within a Vue 2.6 component.

```vue
<script>
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'
import Vue from 'vue'

Vue.use(VCA)

export default {
  components: { JsonEditorVue },
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

<template>
  <JsonEditorVue
    v-model="value"
    v-bind="{/* local props & attrs */}"
  />
</template>
```

--------------------------------

### Global Registration in Vue 3

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register the JsonEditorVue component globally for your Vue 3 application. This makes the component available in all templates without explicit imports.

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

createApp()
  .use(JsonEditorVue, {
    // global props & attrs (one-way data flow)
  })
  .mount('#app')
```

--------------------------------

### Global Registration in Vue 2.7

Source: https://github.com/cloydlau/json-editor-vue/blob/main/README.md

Register the JsonEditorVue component globally for your Vue 2.7 application. This makes the component available in all templates without explicit imports.

```ts
import JsonEditorVue from 'json-editor-vue'
import Vue from 'vue'

Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.