Getting Started

Pre-Requisite / Dependencies

Vue 3
Vuedraggable version 4.1.0 or latest (vuedraggable@next)

Installation

npm i v-json-formatter

Global Plugin Registration

<script setup>
import 'v-json-formatter/dist/style.css'
import VJsonFormatterPlugin from 'v-json-formatter';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)
app.use(VJsonFormatterPlugin);
app.mount('#app');
</script>

Global Component Registration

<script setup>
import 'v-json-formatter/dist/style.css'
import { VJsonDrag, VJsonDrop, VJsonDragNDrop, VJsonEditor } from 'v-json-formatter';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)

// Add all these component(s) except if you're going to design your own VJsonDragNDrop component
app.component('VJsonDrag', VJsonDrag);
app.component('VJsonDrop', VJsonDrop);
app.component('VJsonEditor', VJsonEditor);
app.component('VJsonDragNDrop', VJsonDragNDrop);

app.mount('#app');
</script>

Local Registration

<template>
  <v-datatable-plus
    :headers="headers"
    :items="items"/>
</template>

<script setup>
import 'v-datatable-plus/dist/style.css'
import { VDatatablePlus, FilterType, FilterMode } from  'v-datatable-plus';

const headers = ref([
// ...
]);
const items = ref([
// ...
])
</script>

App.vue

<template>
  <div id="app"/>
</template>

<script setup>
import { VDataTable } from 'vuetify/components';
</script>

FilterType

Types	String Value
IsEqualTo	'eq'
IsNotEqualTo	'neq'
StartWith	'starts'
Contains	'contains'
NotContains	'notcontains'
EndWith	'ends'

FilterMode

Modes	String Value	Detail
Selection	'selection'	Set when you need dropdown filter and set filter properties against headers props
Types	'types'