Overview
The FUDataView component is a wrapper that displays form data in read-only mode. It uses FormKit schemas to render output components, perfect for displaying user profiles, order details, or any data that shouldn't be edited.
INFO
Read-Only Display: FUDataView is designed for displaying data, not editing it. Use FUDataEdit for editable forms.
Basic Usage
vue
<template>
<FUDataView v-model="userData" :schema="schema" />
</template>
<script setup lang="ts">
const userData = ref({
name: 'John Doe',
email: 'john@example.com',
status: 'Active'
})
const schema = [
{
$formkit: 'nuxtUIOutputText',
name: 'name',
label: 'Full Name'
},
{
$formkit: 'nuxtUIOutputText',
name: 'email',
label: 'Email Address',
leadingIcon: 'i-lucide-mail'
},
{
$formkit: 'nuxtUIOutputText',
name: 'status',
label: 'Status',
color: 'success'
}
]
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Props
data
- Type:
Object - Default:
null - Description: The data object to display. This will be used as the initial value for the
v-model.
vue
<FUDataView :data="{ name: 'John', email: 'john@example.com' }" />1
schema
- Type:
FormKitSchemaDefinition - Default:
null - Description: The FormKit schema definition that describes how to render the data. Use output components like
nuxtUIOutputText,nuxtUIOutputDate, etc.
typescript
const schema = [
{
$formkit: 'nuxtUIOutputText',
name: 'name',
label: 'Name'
},
{
$formkit: 'nuxtUIOutputDate',
name: 'createdAt',
label: 'Created',
dateStyle: 'medium'
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
formClass
- Type:
String - Default:
'' - Description: CSS class(es) to apply to the form element.
vue
<FUDataView form-class="space-y-4 p-6 bg-gray-50 rounded-lg" />1
debugData
- Type:
Boolean - Default:
false - Description: When
true, displays a debug panel showing the current form data in JSON format. Useful for development and troubleshooting.
vue
<FUDataView :data="userData" :schema="schema" debug-data />1
debugSchema
- Type:
Boolean - Default:
false - Description: When
true, displays a debug panel showing the schema definition in JSON format. Helpful for understanding the schema structure during development.
vue
<FUDataView :data="userData" :schema="schema" debug-schema />1
Model Value
The component uses v-model to bind to the data being displayed:
vue
<FUDataView v-model="userData" :schema="schema" />1
The model value is of type Record<string, unknown> and represents the data object being displayed.
Complete Example
vue
<template>
<div class="max-w-2xl mx-auto p-6">
<h1 class="text-2xl font-bold mb-6">User Profile</h1>
<FUDataView
v-model="userData"
:schema="profileSchema"
form-class="space-y-4 bg-white p-6 rounded-lg shadow"
/>
<div class="mt-6 flex gap-4">
<UButton @click="editMode = true">Edit Profile</UButton>
<UButton color="secondary" @click="toggleDebug">Toggle Debug</UButton>
</div>
<FUDataView
v-if="showDebug"
v-model="userData"
:schema="profileSchema"
debug-data
debug-schema
/>
</div>
</template>
<script setup lang="ts">
const userData = ref({
name: 'Alice Johnson',
email: 'alice@example.com',
phone: '+1 (555) 123-4567',
role: 'Administrator',
status: 'Active',
joinDate: '2024-01-15',
bio: 'Passionate software developer with 10 years of experience in web development.',
isVerified: true
})
const showDebug = ref(false)
const editMode = ref(false)
const profileSchema = [
{
$formkit: 'nuxtUIOutputText',
name: 'name',
label: 'Full Name',
size: 'lg',
leadingIcon: 'i-lucide-user'
},
{
$formkit: 'nuxtUIOutputText',
name: 'email',
label: 'Email Address',
leadingIcon: 'i-lucide-mail',
color: 'blue'
},
{
$formkit: 'nuxtUIOutputText',
name: 'phone',
label: 'Phone Number',
leadingIcon: 'i-lucide-phone'
},
{
$formkit: 'nuxtUIOutputText',
name: 'role',
label: 'Role',
leadingIcon: 'i-lucide-shield',
color: 'purple'
},
{
$formkit: 'nuxtUIOutputBoolean',
name: 'isVerified',
label: 'Verified',
trueValue: 'Verified',
falseValue: 'Not Verified',
trueIcon: 'i-lucide-check-circle',
falseIcon: 'i-lucide-x-circle',
color: 'success'
},
{
$formkit: 'nuxtUIOutputDate',
name: 'joinDate',
label: 'Join Date',
dateStyle: 'long',
leadingIcon: 'i-lucide-calendar'
},
{
$formkit: 'nuxtUIOutputText',
name: 'bio',
label: 'Biography'
}
]
const toggleDebug = () => {
showDebug.value = !showDebug.value
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
Using with Output Components
FUDataView is designed to work seamlessly with output components:
typescript
const schema = [
// Text output
{
$formkit: 'nuxtUIOutputText',
name: 'title',
label: 'Title'
},
// Boolean output
{
$formkit: 'nuxtUIOutputBoolean',
name: 'published',
label: 'Published',
trueValue: 'Yes',
falseValue: 'No'
},
// Date output
{
$formkit: 'nuxtUIOutputDate',
name: 'createdAt',
label: 'Created',
dateStyle: 'full'
},
// Number output
{
$formkit: 'nuxtUIOutputNumber',
name: 'price',
label: 'Price',
formatOptions: {
style: 'currency',
currency: 'USD'
}
},
// Link output
{
$formkit: 'nuxtUIOutputLink',
name: 'website',
label: 'Website',
target: '_blank'
},
// List output
{
$formkit: 'nuxtUIOutputList',
name: 'tags',
label: 'Tags',
listType: 'comma'
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Slots
Default Slot
You can add additional content after the schema:
vue
<FUDataView v-model="data" :schema="schema">
<div class="mt-4 p-4 bg-blue-50 rounded">
<p class="text-sm text-blue-800">Additional information or notes</p>
</div>
</FUDataView>1
2
3
4
5
2
3
4
5
Use Cases
User Profile Display
vue
<FUDataView
v-model="userProfile"
:schema="profileSchema"
form-class="max-w-2xl mx-auto"
/>1
2
3
4
5
2
3
4
5
Order Details
vue
<FUDataView
v-model="orderData"
:schema="orderSchema"
form-class="space-y-6"
/>1
2
3
4
5
2
3
4
5
Settings Preview
vue
<FUDataView
v-model="settings"
:schema="settingsSchema"
form-class="bg-gray-50 p-4 rounded"
/>1
2
3
4
5
2
3
4
5
Tips
INFO
Development Tips:
- Use
debug-dataduring development to inspect the data structure - Use
debug-schemato verify your schema configuration - Combine with FUDataEdit for a complete view/edit workflow
Related Components
- FUDataEdit - Editable form version
- Output Components - All available output components
- Schema Forms - Learn about schema-based forms