Quick Start

Get up and running with Nuxt SmartScript in under 2 minutes.

Installation

npm

npm install @mitre/nuxt-smartscript

pnpm

pnpm add @mitre/nuxt-smartscript

yarn

yarn add @mitre/nuxt-smartscript

Basic Setup

Add the module to your nuxt.config.ts:

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

That's it! SmartScript is now active and will automatically process your content.

What Happens Next?

Once installed, SmartScript will:

1. Scan your content - Automatically detects typography patterns
2. Transform text - Applies smart replacements and formatting
3. Watch for changes - Updates dynamically as content changes
4. Maintain accessibility - Adds proper ARIA labels

Try It Out

Add this content to any page in your Nuxt app:

<template>
  <div>
    <h1>Welcome to Our Product(TM)</h1>
    <p>This is the 1st example of SmartScript!</p>
    <p>Chemical formula: H2O and CO2</p>
    <p>Math equation: E=mc^2</p>
    <p>Copyright(C) 2024 - All rights reserved(R)</p>
  </div>
</template>

You'll see the content automatically transformed with proper typography!

Default Transformations

Out of the box, SmartScript handles:

Pattern	Input	Output
Trademark	(TM) or TM	™
Registered	(R)	®
Copyright	(C)	©
Ordinals	1st, 2nd, 3rd	1st, 2nd, 3rd
Chemicals	H2O, CO2	H2O, CO2
Math Super	x^2, x^{10}	x2, x10
Math Sub	x_1, x_{n}	x1, xn

Basic Configuration

Want to customize the behavior? Add options to your config:

export default defineNuxtConfig({
  modules: ['@mitre/nuxt-smartscript'],
  
  smartscript: {
    // Enable SSR for static sites (v0.4.0+)
    ssr: true,
    
    // Disable specific transformations
    transformations: {
      ordinals: false
    },
    
    // Adjust performance settings
    performance: {
      debounce: 200,  // Wait 200ms before processing
      batchSize: 100   // Process 100 nodes at a time
    }
  }
})

Using in Components

Access SmartScript functionality in your Vue components:

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

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

// Check statistics
console.log(`Transformed ${stats.value.total} items`)
</script>

Excluding Content

To prevent processing of specific content:

<template>
  <!-- This WILL be processed -->
  <p>Product(TM) is great!</p>
  
  <!-- This will NOT be processed -->
  <pre class="no-superscript">
    Keep (TM) as-is in code blocks
  </pre>
  
  <!-- Using data attribute -->
  <div data-no-superscript>
    Raw (R) symbols here
  </div>
</template>

Next Steps

• Configure positioning for your fonts
• Learn Vue integration patterns
• Explore examples of common use cases
• Add custom patterns

Need Help?

• Review deployment modes for configuration options
• View architecture documentation
• Report issues on GitHub