Developers

Content

Browse the content folder and ustomize the Studio editor.

customize studio interface as a developer

Browse files

All files located in the /content folder of your repository are accessible in the Content tab of the Studio editor. Within this interface, you can reorder files (using drag and drop), create new files, rename, or delete existing ones.

The interface is designed to be intuitive for non-technical users but it can be seen as a user friendly IDE.

Customize file edition

Our Notion-like editor provides all the standard text editing features you’d expect from a standard editor, with added enhancements for editing Markdown files.

Nuxt Content supports a convenient syntax for integrating Vue components into Markdown files, known as MDC syntax.

Here’s how you can leverage this syntax to allow non-technical users to edit and embed Vue components:

1. Create vue components

You can create Vue components and integrate them into Markdown. They just need to be located in the /components/content folder to be available.

vue component

2. Integrate in Markdown

Integrate these components easily within any Markdown file using MDC syntax.

vue component in Markdown

3. Edit with Studio

Nuxt Studio simplifies even further the component edition, allowing you to integrate and edit them directly in the editor. Non technical users can play with slots and props without any technical knowledge.

vue component edition on Studio

The editor is directly transforming your content back to Markdown. You can review the generated code on the review page.

All components in the /components/content folder are available in the editor. Simply type / anywhere while editing to access the list of available components.

Take a look at this section to validate your Vue component integration in the editor in local development.

Demo