@toneflix/vue-dataviewer
v1.3.0
Published
Quickly view data from an object with little to no tinkering on vue 3.
Downloads
122
Readme
Vue Dataviewer
Quickly view data from an object with little to no tinkering on vue 3. - See a live demo here.
Documentation
Read the full documentation here
Installation
npm install @toneflix/vue-dataviewer
#or
yarn add @toneflix/vue-dataviewer
#or
pnpm add @toneflix/vue-dataviewer
Usage
Global Registration
You can make Vue Dataviewer available throughout your Vue project.
main.js or main.ts
import '@toneflix/vue-dataviewer/dist/lib/style.css'
import { createApp } from 'vue'
import App from './app.vue'
import DataViewer from '@toneflix/vue-dataviewer'
const app = createApp(App)
app.use(DataViewer)
app.mount('#app')
Local Registration
You can also import the component in your Vue component.
SomeComponent.vue
<script setup>
import '@toneflix/vue-dataviewer/dist/lib/style.css'
import { DataViewer } from '@toneflix/vue-dataviewer'
</script>
Use the Registered Component in Your Vue Template (Dialog Mode)
SomeComponent.vue
<script setup lang="ts">
import '@toneflix/vue-dataviewer/dist/lib/style.css'
import { DataViewer } from '@toneflix/vue-dataviewer'
import { reactive } from 'vue'
const data = reactive({
name: 'John Doe',
email: '[email protected]',
accept: false,
category: 'home',
safe_mode: true,
country: 'Nigeria',
address: '',
message: 'Hello my people',
imageUrl: 'https://www.tailwind-kit.com/images/person/6.jpg'
})
</script>
<template>
<div style="display: flex; flex-direction: row;">
<DataViewer
shadow
rounded
bordered
separator
:data="data"
v-slot="{ toggleDialog }"
:boolean-labels="{
accept: ['Accepted', 'Rejected']
}"
>
<TBtn label="View Data" @click="toggleDialog(data, 'view')" />
</DataViewer>
</div>
</template>
Use the Registered Component in Your Vue Template (Flat Mode)
SomeComponent.vue
<script setup lang="ts">
import '@toneflix/vue-dataviewer/dist/lib/style.css'
import { MainContent } from '@toneflix/vue-dataviewer'
import { reactive } from 'vue'
const data = reactive({
name: 'John Doe',
email: '[email protected]',
accept: false,
category: 'home',
safe_mode: true,
country: 'Nigeria',
address: '',
message: 'Hello my people',
imageUrl: 'https://www.tailwind-kit.com/images/person/6.jpg'
})
</script>
<template>
<div style="display: flex; flex-direction: row;">
<MainContent
shadow
rounded
bordered
separator
:data="data"
:boolean-labels="{
accept: ['Accepted', 'Rejected'],
safe_mode: ['Enabled', 'Disabled']
}"
/>
</div>
</template>