Connuxt - Nuxt Content Studio for VSCode
Connuxt is a VSCode extension that brings Nuxt Content management directly into your editor with Studio-like capabilities. This extension makes it easier to work with Nuxt Content files (Markdown, YAML, JSON) by providing a rich editing experience, preview functionality, and content management tools.
Features
🌲 Content Explorer
The Content Explorer provides a tree view of your content files, making it easy to navigate and manage your Nuxt Content. It automatically detects content files in your project's content directory.
- Displays all content files by type (Markdown, YAML, JSON)
- Quick access to create new content files
- Visual indicators for different file types
- Organize content into collections
📝 Rich Content Editor
Edit your content files with a rich editing experience that understands Nuxt Content's structure:
- Frontmatter Form Editor: Edit frontmatter fields with a user-friendly form interface
- Visual Markdown Editor: Edit Markdown content with inline preview
- Structured Data Editing: Edit YAML and JSON files with proper validation
- Add Custom Fields: Easily add custom fields to your frontmatter
👁️ Live Preview
Preview your content as it will appear in your Nuxt application:
- Side-by-side Preview: See your changes instantly with live preview
- Rendered Markdown: Preview Markdown with proper styling
- Structured Data View: Visualize your YAML and JSON data
- Component Preview: See your components rendered in real-time
⚡ Component Integration
Work with Vue components in your Markdown content:
- Component Explorer: Browse available components in your project
- Component Insertion: Easily insert components into your Markdown content
- Component Props: Edit component properties in a user-friendly interface
- MDC Syntax Support: Full support for Markdown Components syntax
🪝 Content Hooks
Extend and customize your content with Nuxt Content hooks:
- Hooks Explorer: Browse available hooks and templates
- Build Time Hooks: Add hooks to your nuxt.config.ts
- Runtime Hooks: Create server plugins with hooks
- Hook Templates: Ready-to-use templates for common use cases
- Wizard-based Generation: Create hooks with a step-by-step wizard
📊 Schema Management
Define and validate your content structure with JSON Schema:
- Schema Explorer: Browse and manage content schemas
- Schema Creation: Create schemas for different content types
- Content Validation: Validate content against schemas
- Content Generation: Generate content files based on schemas
- Schema Documentation: Example pages to help you get started with schemas
🎯 Quick Actions
Access all features quickly through the Actions Panel:
- Create Content: Start new content files with a single click
- Insert Components: Add Vue components to your content
- Generate Navigation: Create navigation structures automatically
- Table of Contents: Generate ToC for your documents
- Content Transformers: Apply transformations to your content
- Generate Hooks: Create hooks to extend your content
🧭 Navigation
Manage your content structure with powerful navigation tools:
- Navigation Explorer: Visualize your content hierarchy
- Auto-generation: Generate navigation from your content structure
- Custom Organization: Manually organize your content navigation
Comprehensive media management tools for your content:
- Media Library: Browse and manage all media assets in a dedicated view
- Image Optimization: Automatically optimize images with configurable settings
- Transformation Tools: Resize, rotate, flip, and convert images
- Metadata Management: Add titles, descriptions, alt text, and tags
- Asset Organization: Organize media by date, type, or custom tags
🔍 Advanced Query Builder
Build and test Nuxt Content queries with a visual interface:
- Visual Query Construction: Drag-and-drop interface for building complex queries
- Interactive Components: Easily add filters, sorting, and field selection
- Live Query Preview: See your query code update in real-time
- Code Generation: Generate client-side, server-side, or composable query code
- Query Testing: Preview query results directly in the editor
- Field Auto-detection: Automatically detect available fields from your content
🌐 Content Internationalization (i18n)
Basic internationalization support for your content:
- Translations Explorer: View and manage translations in a dedicated sidebar view
- Translation Creation: Create new translation files from existing content
- Side-by-side Editor: Edit translations with source and target content displayed together
- Multi-format Support: Work with translations in Markdown, JSON, and YAML formats
- Locale Configuration: Configure default and supported locales
- Quick Translation: Create translations directly from the context menu
Configuration
Configure your locales in your VS Code settings:
{
"connuxt.i18n": {
"defaultLocale": "en",
"locales": ["en", "fr", "es", "de"],
"i18nDir": "i18n",
"contentDirectories": ["content"]
}
}
Creating Translations
- Right-click on a content file in the Explorer or Content Explorer
- Select "Create Translation" and choose the target locale
- Edit the translation in the side-by-side editor
Managing Translations
Use the Translations Explorer in the sidebar to:
- Browse all translation files
- Create new translations
- Open the translation editor for any file
Using Translations in Nuxt Content
<template>
<article>
<ContentDoc :path="path" :locale="locale" v-slot="{ doc }">
<h1>{{ doc.title }}</h1>
<div class="content">
<ContentRenderer :value="doc" />
</div>
</ContentDoc>
</article>
</template>
<script setup>
const route = useRoute();
const { locale } = useI18n();
const path = computed(() => route.params.slug.join("/"));
</script>
Getting Started
Installation
- Open VSCode
- Go to Extensions (Ctrl+Shift+X)
- Search for "Connuxt"
- Click Install
Quick Setup
Run the "Connuxt: Setup Content Environment" command to automatically:
- Install Nuxt Content in your project
- Configure your
nuxt.config.ts
- Create necessary directories
- Add example content with documentation
Usage
Opening the Content Explorer
- Click on the Connuxt icon in the activity bar
- Browse your content files in the Content Explorer view
- Use the Actions Panel for quick access to features
Creating New Content
- Click the "Create New Content" button in the Content Explorer
- Choose content type (Markdown, YAML, JSON)
- Enter a filename
- Edit your new content in the editor
Editing Content
- Open a content file from the Content Explorer
- Use the rich editing interface to modify frontmatter fields
- Edit content in the Markdown editor (for Markdown files)
- Click "Save" to save your changes
Previewing Content
- While editing a content file, click the "Preview" button
- View your content in a side-by-side preview
- The preview updates automatically as you edit
Working with Hooks
- Open the Content Hooks view in the Connuxt Explorer
- Browse available hooks and templates
- Click on a hook to insert its code
- Use the "Generate Hook" command for a step-by-step wizard
- Create example hooks page for comprehensive documentation
Working with Schemas
Connuxt provides tools for managing content schemas to ensure your content follows a consistent structure:
- Create a Schema: Use the "Create New Schema" command in the Schema Explorer to create a new schema for a content type.
- Define Schema Properties: Edit the schema file to define the properties, types, and validation rules for your content.
- Generate Content: Right-click on a schema in the Schema Explorer and select "Generate Content from Schema" to create a new content file based on the schema.
- Validate Content: Open a content file and use the "Validate Content Against Schema" command to check if it follows the schema.
- Create Example Page: Use the "Create Schema Example Page" command to generate an example page demonstrating schema usage.
The Media Management feature provides powerful tools for handling media assets in your Nuxt Content project:
Browsing Media:
- Open the Media Library view in the Connuxt Explorer
- Browse images organized by directory
- View image details including dimensions, size, and metadata
Optimizing Images:
- Right-click an image and select "Optimize Image"
- Images are optimized according to your configuration:
{
"connuxt.imageOptimization": {
"quality": 85,
"maxWidth": 1920,
"maxHeight": 1080,
"format": "webp"
}
}
Transforming Images:
- Use the "Transform Image" command to:
- Resize images with preserved aspect ratio
- Rotate images by any angle
- Flip images horizontally or vertically
- Convert between formats (WebP, AVIF, PNG, JPEG)
Managing Metadata:
- Edit image metadata including:
- Title and alt text for accessibility
- Description for content management
- Tags for organization
- Metadata is stored in
.meta.json
files alongside images
Organizing Assets:
Using the Advanced Query Builder
The Advanced Query Builder helps you construct and test Nuxt Content queries visually:
- Open the Query Builder by clicking the "Open Advanced Query Builder" button in the Content Explorer view
- Select a collection from the sidebar or dropdown
- Build your query using the interactive components:
- Add filters by clicking "Add Filter" or dragging fields from the sidebar
- Add sorting criteria by clicking "Add Sort" or dragging fields
- Set limit and skip values for pagination
- Select fields to include or exclude using the "Only" and "Without" tabs
- Preview your query code in real-time
- Test your query by clicking "Preview Results"
- Generate code for your application by clicking "Generate Code" and selecting the desired format
The Query Builder supports all Nuxt Content query operators and can generate code for client-side, server-side, and composable usage patterns.
Extension Settings
This extension contributes the following settings:
connuxt.enableAutoPreview
: Enable/disable automatic preview when editing content files
connuxt.defaultContentType
: Set the default content type for new files (md, yaml, json)
connuxt.contentDirectories
: Configure directories to scan for content files
connuxt.componentDirectories
: Configure directories to scan for Vue components
Keyboard Shortcuts
- Create New Content:
Cmd/Ctrl + Shift + N
- Preview Content:
Cmd/Ctrl + Shift + V
- Insert Component:
Cmd/Ctrl + Shift + C
- Generate Table of Contents:
Cmd/Ctrl + Shift + T
Example Guide
Check out the built-in guide at content/guide.md
after running the setup command. It provides:
- Complete feature documentation
- Real-world examples
- Best practices
- Tips and tricks
For hooks documentation, see the content/examples/content-hooks.md
guide created by the "Create Hooks Example Page" command.
Content Hooks in Detail
Nuxt Content hooks allow you to modify your content during the build process or at runtime. With Connuxt, you can easily create and manage these hooks directly from VSCode.
Types of Hooks
Connuxt supports two types of hooks:
- Build Time Hooks: Added to your
nuxt.config.ts
file, these hooks run during the Nuxt build process.
- Runtime Hooks: Created in
server/plugins/content.ts
, these hooks run during the Nitro runtime.
Available Hooks
- content:file:beforeParse: Called before content is parsed, allowing you to modify raw content.
- content:file:afterParse: Called after content is parsed, allowing you to modify the parsed content or add metadata.
Hook Templates
Connuxt provides ready-to-use templates for common use cases:
- Reading Time Hook: Calculates and adds reading time based on word count.
- Cover Image Hook: Extracts the first image from content and sets it as cover image.
- Git Metadata Hook: Adds creation and modification dates from Git history.
Alignment with Nuxt Content Documentation
The hooks implementation in Connuxt follows the official Nuxt Content hooks documentation. Our extension makes it easier to:
- Discover Available Hooks: Browse all available hooks in the Content Hooks Explorer.
- Implement Hooks Correctly: Use templates and wizards to ensure proper implementation.
- Learn Best Practices: Access comprehensive documentation and examples.
- Integrate with Your Project: Automatically create or update the necessary files.
The hooks feature is designed to work seamlessly with Nuxt Content's hook system, providing a user-friendly interface for what would otherwise require manual code editing and documentation lookup.
Example: Adding Reading Time
// In nuxt.config.ts
export default defineNuxtConfig({
hooks: {
"content:file:afterParse": (file) => {
if (file._id.endsWith(".md")) {
const wordCount = file.body.split(/\s+/).length;
const readingTime = Math.ceil(wordCount / 200);
file.readingTime = readingTime;
}
},
},
});
Example: Using Hook Data in Components
<template>
<article>
<h1>{{ data.title }}</h1>
<!-- Display reading time added by hook -->
<div v-if="data.readingTime" class="reading-time">
Reading time: {{ data.readingTime }} min
</div>
<ContentRenderer :value="data" />
</article>
</template>
<script setup>
const { data } = await useAsyncData("article", () =>
queryContent("/articles/my-article").findOne()
);
</script>
Known Issues
- Component previews are currently limited to basic rendering
- Some advanced MDC (Markdown Components) features may not be fully supported in the preview
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
)
- Commit your changes (
git commit -m 'Add some amazing feature'
)
- Push to the branch (
git push origin feature/amazing-feature
)
- Open a Pull Request
About Nuxt Content
Nuxt Content is a git-based headless CMS for Nuxt that allows you to write content in Markdown, CSV, YAML, or JSON, with a powerful MongoDB-like API to query your content with ease.
This extension aims to provide a Studio-like experience directly within VSCode, making it easier to manage your Nuxt Content without switching between tools.
License
MIT