Plugin Usage

To use the JSON editor plugin in your Vue 3 project, follow these steps:

1. Install package from npm:

npm install ramp-json-editor

2. Install the plugin in your Vue app:

import { createApp } from 'vue';
import App from './app.vue';
const app = createApp(App);

import JsonEditor from 'ramp-json-editor'
app.use(JsonEditor);
import 'ramp-json-editor/dist/ramp-json-editor.css';

3. Basic usage:

<script setup lang="ts">
import { ref } from "vue";
import JsonEditor from "ramp-json-editor";

const json = ref(`{
  "hello": "world"
}`);
</script>

<template>
  <JsonEditor
    v-model="json"
    height="400px"
  />
</template>

4. Optional schema validation:

import Ajv from "ajv";
import schema from "./schema.json";

const ajv = new Ajv({ allErrors: true });
const validate = ajv.compile(schema);

<template>
  <JsonEditor
    v-model="json"
    :validator="validate"
  />
</template>

Props

| Prop | Type | Default | Description | | ------------ | ------------------ | --------- | ------------------------------------------------------------------ | | modelValue | string | {} | JSON text content bound with v-model | | height | string | "300px" | Height of the editor container | | lang | string | "en" | UI language for labels and tooltips | | validator | Function \| null | null | Optional compiled AJV validator used for inline schema diagnostics |