Nuxt SmartScript

Smart typography transformations for Nuxt - automatic superscript, subscript, and symbol formatting.

• ✨  Release Notes
• 📖  Documentation
• 🏀  Playground

Features

• 🔤 Trademark, Registered & Copyright Symbols - Converts (TM) → ™, (R) → ®, and (C) → ©
• 🔢 Ordinal Numbers - 1st, 2nd, 3rd with proper superscript
• 🧪 Chemical Formulas - H2O, CO2 with subscripts
• 📐 Mathematical Notation - x^2 superscript, x_1 subscript
• 🚀 Full SSR/SSG Support - Server-side rendering and static generation (v0.4.0+)
• 🎯 30+ HTML Elements - Headings, paragraphs, lists, tables, links, and more
• ⚡ Performance Optimized - Debounced processing, batch updates, caching
• 🎨 Fully Customizable - CSS variables and configurable selectors
• ♿ Accessible - Proper ARIA labels for screen readers
• 🔧 TypeScript Support - Full type safety with module builder

Quick Setup

Install the module:

# npm
npm install @mitre/nuxt-smartscript

# pnpm
pnpm add @mitre/nuxt-smartscript

# yarn
yarn add @mitre/nuxt-smartscript

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@mitre/nuxt-smartscript']
})

That's it! The plugin will automatically process your content ✨

Architecture

The module follows a modular architecture for maintainability:

src/runtime/
├── plugin.ts                 # Main plugin orchestrator
├── composables/
│   └── useSmartScript.ts    # Vue composable for components
└── smartscript/
    ├── types.ts             # TypeScript interfaces
    ├── config.ts            # Configuration management
    ├── patterns.ts          # Regex patterns & matchers
    ├── processor.ts         # Text processing logic
    ├── dom.ts               # DOM manipulation utilities
    ├── engine.ts            # Core processing engine
    ├── errors.ts            # Error handling & recovery
    └── index.ts             # Public API exports

Configuration

Customize the behavior in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@mitre/nuxt-smartscript'],
  
  smartscript: {
    // Customize positioning for your font
    positioning: {
      trademark: {
        body: '-0.5em',
        headers: '-0.7em'
      },
      registered: {
        body: '-0.25em',
        headers: '-0.45em'
      }
    },
    
    // Performance tuning
    performance: {
      debounce: 100,
      batchSize: 50
    }
  }
})

Vue Composable

Use in your components:

<script setup>
const { process, stats, isProcessing } = useSmartScript()

// Manually trigger processing
onMounted(() => {
  process()
})
</script>

<template>
  <div>
    <p>Processed: {{ stats.total }} transformations</p>
  </div>
</template>

Contributing

We welcome contributions! Please see CONTRIBUTING.md for detailed guidelines.

Development

This module is built using @nuxt/module-builder for proper TypeScript support and Nuxt ecosystem compatibility.

# Install dependencies
pnpm install

# Prepare development (generates types and stubs)
pnpm dev:prepare

# Run development playground
pnpm dev

# Run tests
pnpm test

# Build module
pnpm prepack

# Lint code
pnpm lint

For Contributors: This module uses a two-type system (ModuleOptions for users, SuperscriptConfig for runtime) to handle Nuxt's configuration transformation. See Contributing Guide and TypeScript Architecture for details.

License

Apache-2.0 - MITRE Corporation