Customize files and components edition with Nuxt Studio

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.

2. Integrate in Markdown

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

3. Edit with our Studio editors

You can choose between two distinct editors on Studio for content creation and management: the Markdown editor and the Visual editor.

You can select your favorite editor from the settings page of your project.

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

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

Demo