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

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

📸 Media Management

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.

Working with Media

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:
- Use "Organize Media" to sort images by:
  - Creation date (year/month structure)
  - File type (format-based directories)
  - Tags (tag-based directories)
- Configure media directories in settings:
```
{
  "connuxt.mediaDirectories": ["public/images", "content/images"]
}
```

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

Connuxt - Nuxt Content Studio for VSCode

Mashed Potato Studios

Connuxt - Nuxt Content Studio for VSCode

Features

🌲 Content Explorer

📝 Rich Content Editor

👁️ Live Preview

⚡ Component Integration

🪝 Content Hooks

📊 Schema Management

🎯 Quick Actions

🧭 Navigation

📸 Media Management

🔍 Advanced Query Builder

🌐 Content Internationalization (i18n)

Configuration

Creating Translations

Managing Translations

Using Translations in Nuxt Content

Getting Started

Installation

Quick Setup

Usage

Opening the Content Explorer

Creating New Content

Editing Content

Previewing Content

Working with Hooks

Working with Schemas

Working with Media

Using the Advanced Query Builder

Extension Settings

Keyboard Shortcuts

Example Guide

Content Hooks in Detail

Types of Hooks

Available Hooks

Hook Templates

Alignment with Nuxt Content Documentation

Example: Adding Reading Time

Example: Using Hook Data in Components

Known Issues

Contributing

About Nuxt Content

License