Vite Plugin

The nexa-vite-plugin transforms .nexa Single-File Components into JavaScript during development and build.

Setup

// vite.config.ts
import { defineConfig } from 'vite'
import { nexaPlugin } from 'nexa-vite-plugin'

export default defineConfig({
  plugins: [nexaPlugin()],
})

What It Does

1. Resolves .nexa imports — Handles module resolution for .nexa files
2. Compiles SFC — Transforms <script setup>, <template>, and <style scoped> blocks into JavaScript
3. Scoped CSS — Generates unique scope IDs and injects scoped styles at runtime
4. HMR — Hot Module Replacement with component state preservation
5. Source Maps — Maps compiled output back to original .nexa source

HMR (Hot Module Replacement)

HMR is automatically enabled in development mode. When you edit a .nexa file:

• The component is recompiled
• The new version replaces the old one in-place
• Component state (signals) is preserved
• Styles are hot-updated without page reload

Import Resolution

The plugin resolves imports in the following order:

1. .nexa files → compiled via nexa-compiler
2. .js files → if not found, tries .ts extension (for TypeScript projects)
3. All other files → delegated to Vite's default resolver

Build for Production

vite build

In production mode, the plugin:

• Generates optimized component code
• Strips HMR code (import.meta.hot blocks)
• Inlines scoped styles

Security Note

The plugin reads .nexa files from the filesystem and compiles them. Only files within your project directory should be compiled. Never serve .nexa compilation as a user-facing API.