Vue

What it does

This skill enables AI agents to render Vue components within Nuxt Content Studio, allowing dynamic frontend development directly inside the CMS interface. It bridges the gap between static markdown content and interactive web experiences by injecting Vue logic into the editor environment.

When to use it

• Building interactive documentation pages that require state management or reactive data updates.
• Creating custom UI components for Nuxt Content collections without leaving the Studio workspace.
• Prototyping frontend features rapidly using Vue syntax while managing content via markdown files.
• Developing rich, component-based layouts that react to user inputs within the CMS preview.

Key capabilities

• Renders Vue.js components directly inside the Nuxt Content Studio editor.
• Supports dynamic data binding and reactive state within content pages.
• Facilitates the creation of reusable UI elements for markdown-driven sites.
• Integrates seamlessly with the nuxt-content/nuxt-studio ecosystem for a unified workflow.

Example prompts

• "Create a Vue component that displays a list of blog posts fetched from my Nuxt Content collection."
• "Add an interactive search bar to my documentation page using Vue and Nuxt Content Studio."
• "Build a dynamic card layout in the CMS that changes based on user-selected filters."

Tips & gotchas

Ensure your project is initialized with both nuxt-content and nuxt-studio dependencies before attempting to use this skill. While powerful, complex Vue logic may require careful testing within the Studio preview to ensure it renders correctly alongside static markdown content.