Vite and Nuxt Build Configuration

CPR uses Nuxt 4 with Vite as the build tool. All build configuration is centralized in nuxt.config.ts. This document covers each configuration section and the differences between development and production builds.

Full nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@sentry/nuxt/module',
    '@nuxt/eslint',
  ],
  ssr: false,

  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],

  devtools: { enabled: process.env.NODE_ENV !== 'production' },

  runtimeConfig: {
    public: {
      API_URL: process.env.API_URL || 'http://localhost:8000/api/v1',
      SENTRY_DSN: process.env.SENTRY_DSN || '',
      appVersion: process.env.npm_package_version || '1.0.0',
    },
  },

  sourcemap: {
    client: 'hidden',
  },

  vite: {
    esbuild: {
      drop:
        process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
    },
  },

  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-01-01',

  typescript: {
    strict: true,
    shim: false,
  },

  sentry: {
    org: 'larrazabal-eye-group',
    project: 'cpr-frontend',
  },

  tailwindcss: {
    cssPath: '~/assets/css/main.css',
  },

  app: {
    head: {
      title: 'CPR - Computerized Patient Record',
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
    },
  },
});

Configuration Sections Explained

SPA Mode

ssr: false,

CPR runs as a Single-Page Application. All rendering happens in the browser. The server only serves the initial HTML shell and static assets. This simplifies deployment and works well for an internal clinical tool where SEO is not a concern.

Modules

modules: [
  '@nuxtjs/tailwindcss',     // Tailwind CSS integration
  '@pinia/nuxt',             // Pinia state management
  '@sentry/nuxt/module',     // Sentry error monitoring
  '@nuxt/eslint',            // ESLint integration (generates flat config)
],

Each module extends Nuxt's build pipeline:

• @nuxtjs/tailwindcss -- Processes Tailwind CSS, handles purging unused classes in production.
• @pinia/nuxt -- Auto-imports Pinia stores and provides the Pinia plugin.
• @sentry/nuxt/module -- Injects Sentry SDK, uploads source maps during build.
• @nuxt/eslint -- Generates the ESLint flat config at .nuxt/eslint.config.mjs.

Component Auto-Import

components: [
  {
    path: '~/components',
    pathPrefix: false,
  },
],

All components in app/components/ are auto-imported without path prefixes. This means app/components/ui/UiButton.vue is available as <UiButton> in any template, without an import statement.

The pathPrefix: false setting means:

• app/components/ui/UiButton.vue is <UiButton> (not <UiUiButton>)
• app/components/patient/PatientForm.vue is <PatientForm> (not <PatientPatientForm>)

Runtime Config

runtimeConfig: {
  public: {
    API_URL: process.env.API_URL || 'http://localhost:8000/api/v1',
    SENTRY_DSN: process.env.SENTRY_DSN || '',
    appVersion: process.env.npm_package_version || '1.0.0',
  },
},

Public runtime config values are available client-side via useRuntimeConfig(). They are set from environment variables at build time:

// Usage in composables and services
const config = useRuntimeConfig();
const apiUrl = config.public.API_URL as string;

For different environments, set API_URL via environment variables:

# Development (default)
API_URL=http://localhost:8000/api/v1

# Staging
API_URL=https://staging-api.clinic.com/api/v1

# Production
API_URL=https://api.clinic.com/api/v1

Vite / esbuild Configuration

vite: {
  esbuild: {
    drop:
      process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
  },
},

In production builds, esbuild strips all console.* calls and debugger statements from the output. This:

• Reduces bundle size
• Prevents information leakage in production
• Removes debugging artifacts automatically

In development, console.log and debugger work normally.

Source Maps

sourcemap: {
  client: 'hidden',
},

Source maps are generated but not linked in the JavaScript files:

• Development -- Full source maps for debugging in browser DevTools.
• Production -- Hidden source maps are generated for Sentry error reporting but are not served to end users. This prevents exposing source code while still getting meaningful stack traces in error reports.

Nuxt 4 Compatibility

future: {
  compatibilityVersion: 4,
},
compatibilityDate: '2025-01-01',

This opts into Nuxt 4 behaviors:

• app/ is the default source directory (instead of root-level pages/, components/, etc.)
• Updated module resolution
• New default behaviors for composables and middleware

Sentry Configuration

sentry: {
  org: 'larrazabal-eye-group',
  project: 'cpr-frontend',
},

The Sentry module automatically:

• Injects the Sentry SDK into the client bundle
• Uploads source maps during nuxt build for error symbolication
• Captures unhandled errors and rejections

The DSN is provided via the SENTRY_DSN runtime config variable.

Tailwind CSS

tailwindcss: {
  cssPath: '~/assets/css/main.css',
},

Points to the main CSS file that includes Tailwind's base, components, and utilities layers.

App Head

app: {
  head: {
    title: 'CPR - Computerized Patient Record',
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },
},

Sets the default page title and favicon for all pages.

TypeScript

typescript: {
  strict: true,
  shim: false,
},

See TypeScript for details.

DevTools

devtools: { enabled: process.env.NODE_ENV !== 'production' },

Nuxt DevTools are enabled in development for inspecting components, stores, routes, and composables. They are disabled in production.

Development vs Production Differences

Feature	Development	Production
console.* and debugger	Available	Stripped by esbuild
Source maps	Full	Hidden (Sentry only)
Nuxt DevTools	Enabled	Disabled
Tailwind CSS purging	No (all classes available)	Yes (unused classes removed)
Bundle minification	No	Yes (via esbuild)
Code splitting	Yes	Yes (optimized chunks)
Hot Module Replacement	Yes	N/A

Build Commands

# Start development server with HMR
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

# Generate static SPA (for static hosting)
npm run generate

# Prepare Nuxt (generate types, ESLint config)
npm run postinstall  # runs "nuxt prepare"

Environment Variables

Required environment variables for deployment:

Variable	Purpose	Example
API_URL	Backend API base URL	https://api.clinic.com/api/v1
SENTRY_DSN	Sentry project DSN	https://xxx@sentry.io/yyy
NODE_ENV	Build mode	production

These are read at build time and embedded in the client bundle via runtimeConfig.public.