Directus Translation Manager Extension

A powerful and modern translation management module for Directus CMS with Excel-like inline editing capabilities.

🚀 Features

✨ Core Features

  • Excel-like Inline Editing: Double-click any cell to edit directly in the table
  • Real-time Search: Search translation keys with instant filtering
  • Multi-language Support: Manage translations for multiple languages simultaneously
  • Server-side Pagination: Efficient handling of large translation datasets
  • Batch Save: Collect multiple changes and save them all at once
  • Modern UI: Clean, professional interface following Directus design patterns

🎯 Advanced Features

  • Dynamic Language Loading: Automatically loads available languages from your Directus instance
  • Alphabetical Sorting: Translation keys are automatically sorted A-Z
  • Visual Change Indicators: Modified cells are highlighted for easy identification
  • Responsive Design: Works seamlessly on desktop and mobile devices
  • Keyboard Navigation: Full keyboard support for efficient editing

📦 Installation

npm install directus-extension-translation

🔧 Setup

  1. Install the extension in your Directus project
  2. Build the extension: 
    pnpm run build
  3. Restart your Directus instance to load the new extension
  4. Access the module via the navigation menu in your Directus admin panel

🎮 Usage

Basic Translation Management

  1. Navigate to “Translation Manager” in your Directus admin panel
  2. Select the languages you want to work with using the checkboxes
  3. Use the search box to filter translation keys
  4. Double-click any cell to edit translations inline
  5. Click “Save All Changes” to commit your modifications

Search and Filter

  • Search Box: Type to filter translation keys in real-time
  • Language Selection: Check/uncheck languages to show/hide columns
  • Pagination: Navigate through large datasets efficiently

Inline Editing

  • Double-click: Activate inline editing for any cell
  • Enter: Save changes and move to next cell
  • Escape: Cancel editing without saving
  • Tab: Navigate between cells

🛠️ Technical Details

API Integration

  • Endpoint: /translations for data retrieval and updates
  • Search: Real-time filtering via API parameters
  • Pagination: Server-side pagination with 50 items per page
  • Authentication: Inherits Directus session management

Architecture

  • Framework: Vue.js 3 with Composition API
  • Styling: SCSS with Directus design system variables
  • Build: Directus Extension SDK
  • TypeScript: Full type safety and IntelliSense support

📋 Requirements

  • Directus 10.10.0 or higher
  • Node.js 18+
  • Modern web browser with ES6+ support

🔄 Development

# Install dependencies
pnpm install

# Development mode with hot reload
pnpm run dev

# Build for production
pnpm run build

# Validate extension
pnpm run validate

🎨 Customization

The extension uses Directus design tokens and can be customized via CSS variables:

// Custom styling example
.translation-manager {
  --theme--primary: #your-color;
  --theme--background: #your-bg;
}

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🆘 Support

For issues and feature requests, please create an issue in the repository.

Built with ❤️ for the Directus community