2. Configure Content Types

Vue Headless CMS is highly configurable, so you can easily tailor it to your particular needs. Most configuration options can be set by simply editing public/data.json.

Content types

Each category in the CMS can have its own content type (and corresponding input form). To create a new content type, create a new object under content_types where each key is the name of the field, and the value is the field type, e.g.:

{
"title": "text",
"body": "richtext",
"main_image": "image"
}

If you use an underscore in the field name, it becomes a space in the CMS. So main_image in the example above becomes main image in the interface.

Available field types

• text - normal input field
• textarea - textarea
• richtext - rich text editor
• markdown - markdown editor with full screen preview
• image - single image input. Images will be automatically resized to the size defined in settings.image_width in data.json.
• gallery - image gallery (with reorder and delete). Images will be automatically resized to the size defined in settings.gallery_width in data.json.
• switch - a true/false switch

Special fields

Each post should at least have a title-field, and preferably a body as well, as these two fields are shown in the navbar. The CMS automatically generates a slug based on the title field.

If you define a draft field with a type of switch ("draft": "switch"), the post will be shown as a draft in the interface.