Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit baeb89f

Browse files
larbishlarbish
authored
docs(changelog): drafted version form customization
1 parent 7552090 commit baeb89f

File tree

5 files changed

+111
-4
lines changed

5 files changed

+111
-4
lines changed

‎docs/content/changelog/frontmatter-form.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
name: Visual front-matter edition
3-
title: Visual front-matter edition
3+
title: Visual Front-matter Edition
44
description: Your page metadata is now editable through a visual interface instead of YAML.
5-
date: '2024-10-17T00:00:00.000Z'
5+
date: 2024-10-17T00:00:00.000Z
66
image:
77
src: /blog/frontmatters.png
88
authors:
@@ -57,7 +57,7 @@ We're actively working on the next major update of Nuxt Content which will bring
5757

5858
A key challenge with Nuxt Content v2 was the large bundle size required to store all content files. It was an issue when deploying to edge platforms like [NuxtHub](https://hub.nuxt.com/).
5959

60-
To address this, Nuxt Content v3 moves away from the file based storing in production and leverage SQL database system. This switch is transparent to users. We're providing a zero config support for development mode, static generation, server rendering and edge deployments with NuxtHub.
60+
To address this, Nuxt Content v3 moves away from the file based storing in production and leverage SQL database system. This switch is transparent to users. We're providing a zero config support for development mode, static generation, server rendering and edge deployments with NuxtHub.
6161

6262
### Introducing Collections
6363

‎docs/content/changelog/studio-customisation.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
name: Studio Frontmatter Customization
3+
title: Studio Form Customisation
4+
description: Studio forms are dynamically generated based on the collection
5+
schema defined in your content configuration file.
6+
date: 2025-02-20T01:00:00.000Z
7+
image:
8+
src: /blog/frontmatter-form-generation.png
9+
alt: Frontmatter form generation based on collection schema
10+
authors:
11+
- name: Baptiste Leproux
12+
to: https://x.com/_larbish
13+
avatar:
14+
src: https://avatars.githubusercontent.com/u/7290030?v=4
15+
category: content
16+
draft: true
17+
---
18+
19+
The [Studio](https://nuxt.studio) forms are dynamically generated based on the collection schema defined in your content configuration file. This behaviour applies whether you’re editing the [frontmatter](/docs/files/markdown#frontmatter) of a `Markdown` file or a `JSON` / `YAML` file.
20+
21+
:video{autoplay controls poster="https://res.cloudinary.com/nuxt/video/upload/v1739982761/frontmatterform_yjafgt.png" src="https://res.cloudinary.com/nuxt/video/upload/v1739982761/frontmatterform_yjafgt.mp4"}
22+
23+
## **Defining your form with** `zod` Schema
24+
25+
Nuxt Content leverages [zod](https://github.com/colinhacks/zod) to let you define a type-safe schema for your content. This schema not only validates your data but also powers the form generation in **Studio**.
26+
27+
### **Built-in zod Helpers**
28+
29+
You can define your Content schema by adding the `schema` property to your collection and by using a [zod](https://github.com/colinhacks/zod) schema.
30+
31+
`@nuxt/content` exposes a `z` object that contains a set of [Zod](/) utilities for common data types.
32+
33+
::prose-code-group
34+
```ts [content.config.ts]
35+
export default defineContentConfig({
36+
collections: {
37+
posts: defineCollection({
38+
type: 'page',
39+
source: 'blog/*.md',
40+
schema: z.object({
41+
draft: z.boolean().default(false),
42+
category: z.enum(['Alps', 'Himalaya', 'Pyrenees']).optional(),
43+
date: z.date(),
44+
image: z.object({
45+
src: z.string().editor({ input: 'media' }),
46+
alt: z.string(),
47+
}),
48+
slug: z.string().editor({ hidden: true }),
49+
icon: z.string().optional().editor({ input: 'icon' }),
50+
authors: z.array(z.object({
51+
slug: z.string(),
52+
username: z.string(),
53+
name: z.string(),
54+
to: z.string(),
55+
avatar: z.object({
56+
src: z.string(),
57+
alt: z.string(),
58+
}),
59+
})),
60+
}),
61+
}),
62+
},
63+
})
64+
```
65+
66+
:::preview-card{icon="i-lucide-eye" label="Generated Form"}
67+
![Form preview](/blog/generated-form.png)
68+
:::
69+
::
70+
71+
### **Native Inputs Mapping**
72+
73+
Primitive Zod types are automatically mapped to appropriate form inputs in **Studio**:
74+
75+
- **String** → Text input
76+
- **Date** → Date picker
77+
- **Number** → Number input (counter)
78+
- **Boolean** → Toggle switch
79+
- **Enum** → Select dropdown
80+
81+
### Custom Inputs Mapping
82+
83+
Content goes beyond primitive types. You can customise form fields using the `editor` method, which extends Zod types with metadata to empower editor interface.
84+
85+
This allows you to define custom inputs or hide fields.
86+
87+
#### Usage
88+
89+
```ts [content.config.ts]
90+
mainScreen: z.string().editor({ input: 'media' })
91+
```
92+
93+
#### Options
94+
95+
#### `input: 'media' | 'icon'`
96+
97+
You can set the editor input type. Currently both icon and media are available since there are handled in Studio editor.
98+
99+
#### `hidden: Boolean`
100+
101+
This option can be set to avoid the display of a field in the Studio editor.
102+
103+
::prose-tip
104+
Studio inputs are fully extensible. We can create as many input as we want based on our users needs.
105+
::
106+
107+
###

‎docs/content/changelog/yaml-json-form.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
name: Visual YAML and JSON File Edition
33
title: Visual YAML and JSON File Edition
44
description: Edit YAML and JSON files with an automatically generated form.
5-
date: '2024-10-28T01:00:00.000Z'
5+
date: 2024-10-28T01:00:00.000Z
66
image:
77
src: /docs/studio/json-yml-forms.png
88
authors:

‎docs/public/blog/frontmatter-form-generation.png

1.15 MB
Loading

‎docs/public/blog/generated-form.png

155 KB
Loading

0 commit comments

Comments
 (0)