Nuxt config

Le fichier nuxt.config.ts est le cœur de la configuration de l'application Nuxt 3. Il définit toutes les options, modules, plugins et paramètres nécessaires au bon fonctionnement de l'application e-commerce B2B Djust Front Partners Starter.

Architecture de Configuration

graph TB
    subgraph "Configuration Nuxt"
        APP[Configuration Application]
        MODULES[Modules Nuxt]
        RUNTIME[Runtime Config]
        VITE[Configuration Vite]
        PLUGINS[Plugins]
    end

    subgraph "Modules Intégrés"
        UI[@nuxt/ui]
        I18N[@nuxtjs/i18n]
        STORYBLOK[@storyblok/nuxt]
        PINIA[@pinia/nuxt]
        IMAGE[@nuxt/image]
        ICON[@nuxt/icon]
        FONTS[@nuxt/fonts]
        ESLINT[@nuxtjs/eslint-module]
    end

    APP --> MODULES
    MODULES --> UI
    MODULES --> I18N
    MODULES --> STORYBLOK
    MODULES --> PINIA
    MODULES --> IMAGE
    MODULES --> ICON
    MODULES --> FONTS
    MODULES --> ESLINT

    style APP fill:#e1f5fe
    style MODULES fill:#f3e5f5
    style RUNTIME fill:#fff3e0

Configuration de Base

1. Configuration Application

export default defineNuxtConfig({
  // Désactive le Server-Side Rendering
  ssr: false,

  // Configuration de l'application
  app: {
    baseURL: process.env.BASE_URL,
    head: {
      title: "Djust Front Partners Starter",
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: "/favicon.ico",
        },
      ],
    },
  },

  // Date de compatibilité Nuxt
  compatibilityDate: "2024-09-23",
});

Options Détaillées

Option	Valeur	Description	Impact
`ssr`	`false`	Désactive le rendu côté serveur	Application SPA uniquement
`app.baseURL`	`process.env.BASE_URL`	URL de base de l'application	Routing et assets
`app.head.title`	`'Djust Front Partners Starter'`	Titre par défaut	SEO et navigation
`compatibilityDate`	`'2024-09-23'`	Version de compatibilité Nuxt	Fonctionnalités disponibles

2. Outils de Développement

{
  // Désactive les devtools Nuxt
  devtools: {
    enabled: false,
  },

  // Configuration des sourcemaps
  sourcemap: {
    server: true,
    client: true,
  },
}

Option	Valeur	Description	Usage
`devtools.enabled`	`false`	Désactive l'interface devtools	Performance en développement
`sourcemap.server`	`true`	Active les sourcemaps serveur	Debug côté serveur
`sourcemap.client`	`true`	Active les sourcemaps client	Debug côté client

Configuration des Imports

Auto-imports

{
  imports: {
    dirs: ['shared', 'shared/**/*', 'composables/**/*'],
  },
}

Description : Configure l'auto-import pour les composables et utilitaires partagés.

Dossiers inclus :

shared/ : Types et utilitaires partagés
shared/**/* : Tous les sous-dossiers shared
composables/**/* : Tous les composables de l'application

Avantages :

✅ Import automatique des composables
✅ Pas besoin d'imports explicites
✅ Meilleure DX (Developer Experience)

Configuration Nitro (Serveur)

Options Nitro

{
  nitro: {
    experimental: {
      openAPI: true,
    },
    payloadExtraction: false,
    routeRules: {
      '/': {
        cors: {
          origin: ['*'],
          methods: ['POST', 'OPTIONS'],
          allowHeaders: ['Content-Type', 'Authorization'],
        },
      },
      '/api/impersonate': {
        cors: {
          origin: ['*'],
          methods: ['POST', 'OPTIONS'],
          allowHeaders: ['Content-Type', 'Authorization'],
        },
      },
    },
  },
}

Configuration CORS

Route	Configuration	Description
`/`	`origin: ['*']`	Autorise toutes les origines
`/api/impersonate`	`methods: ['POST', 'OPTIONS']`	Méthodes autorisées
Toutes	`allowHeaders: ['Content-Type', 'Authorization']`	Headers autorisés

Utilité :

✅ API ouverte : Permet les appels cross-origin
✅ Impersonation : Support des changements de compte
✅ Sécurité : Headers contrôlés

Modules Nuxt

Liste des Modules

{
  modules: [
    '@nuxt/ui',              // Interface utilisateur
    '@nuxt/icon',            // Gestion des icônes
    '@nuxtjs/i18n',          // Internationalisation
    '@storyblok/nuxt',       // CMS Storyblok
    '@pinia/nuxt',           // Gestion d'état
    '@nuxtjs/eslint-module', // Linting
    '@nuxt/image',           // Optimisation images
    '@nuxt/fonts',           // Gestion des polices
  ],
}

Configuration Détaillée des Modules

1. Nuxt UI & Interface

{
  // Mode couleur
  colorMode: {
    preference: 'light',
  },

  // Configuration des icônes
  icon: {
    customCollections: [
      {
        prefix: 'djust-icon',
        dir: './assets/icons',
      },
    ],
  },

  // Configuration des polices
  fonts: {
    families: [
      { name: 'Inter', provider: 'google' },
      { name: 'Roboto', provider: 'google' },
    ],
  },
}

2. Nuxt Image

{
  image: {
    storyblok: {
      baseURL: 'https://a.storyblok.com',
    },
  },
}

Fonction : Optimisation automatique des images depuis Storyblok CMS.

3. Internationalisation (i18n)

{
  i18n: {
    lazy: true,
    langDir: 'locales',
    strategy: 'prefix_except_default',
    defaultLocale: process.env.LOCALE === 'en-GB' ? 'en-GB' : 'fr-FR',
    locales: [
      {
        code: 'fr-FR',
        file: 'fr-FR.json',
        label: 'Francais',
        icon: 'cif:fr',
        abbr: 'fr'
      },
      {
        code: 'en-GB',
        file: 'en-GB.json',
        label: 'English',
        icon: 'cif:gb',
        abbr: 'en'
      },
    ],
  },
}

Configuration i18n :

Option	Valeur	Description
`lazy`	`true`	Chargement paresseux des traductions
`strategy`	`prefix_except_default`	Pas de préfixe pour la langue par défaut
`defaultLocale`	Variable d'environnement	Langue par défaut dynamique

4. Storyblok CMS

{
  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
    componentsDir: '~/components/storyblok',
    devtools: false,
    apiOptions: {
      cache: { type: 'memory', clear: 'manual' },
    },
  },
}

Fonctionnalités :

✅ CMS Headless : Gestion de contenu
✅ Composants dédiés : Dossier séparé
✅ Cache mémoire : Performance optimisée

5. Pinia (State Management)

{
  pinia: {
    storesDirs: ['./stores/**'],
  },
}

Organisation : Auto-découverte des stores dans le dossier stores/.

Configuration des Composants

Auto-registration

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

Structure :

Dossier	Configuration	Usage
`~/components/storyblok`	`global: true`	Composants CMS globaux
`~/components`	`pathPrefix: false`	Composants app sans préfixe

Avantages :

✅ Import automatique des composants
✅ Organisation claire CMS vs App
✅ Disponibilité globale

Assets et Styles

Configuration CSS

{
  css: [
    '~/assets/css/variables.scss',
    '~/assets/css/main.css'
  ],
}

Fichiers chargés globalement :

variables.scss : Variables CSS/SCSS personnalisées
main.css : Styles principaux (Tailwind CSS)

Plugins

Liste des Plugins

{
  plugins: [
    '~/plugins/djust-user.ts',
    '~/plugins/djust-cart.ts',
    '~/plugins/djust-buyingList.ts'
  ],
}

Plugins Djust :

Plugin	Fonction	Timing
`djust-user.ts`	Initialisation utilisateur	Startup
`djust-cart.ts`	Initialisation panier	Startup
`djust-buyingList.ts`	Initialisation liste d'achat	Startup

Runtime Configuration

Configuration Publique

{
  runtimeConfig: {
    public: {
      // === STORYBLOK === //
      storyblokVersion: process.env.STORYBLOK_VERSION || 'published',
      storyblokStories: process.env.STORYBLOK_STORIES_LIST || '',

      // === API DJUST === //
      apiBaseUrl: process.env.VITE_API_BASE_URL,
      djApiClient: process.env.VITE_DJ_API_CLIENT,
      djApiKey: process.env.VITE_DJ_API_KEY,
      djStoreId: process.env.STORE_ID,
      djStoreViewId: process.env.STORE_VIEW_ID,

      // === LOCALISATION === //
      locale: process.env.LOCALE,
      currency: process.env.DEFAULTCURRENCY,
      currencies: process.env.CURRENCIES ?? process.env.DEFAULTCURRENCY,

      // === APPLICATION === //
      defaultIdType: process.env.DEFAULT_ID_TYPE,
      defaultPaginationSize: process.env.DEFAULT_PAGINATION_SIZE || '20',
      frontMode: process.env.FRONT_MODE || 'private',
      multiStores: process.env.MULTI_STORES === 'true',
      applicationEnv: process.env.APPLICATION_ENV,
      clientName: process.env.CLIENT_NAME,
      sentryDsn: process.env.SENTRY_DSN,
      appVersion: pkg.version,
    },
  }
}

Configuration Privée (Serveur)

{
  runtimeConfig: {
    // Accessible uniquement côté serveur
    apiBaseUrl: process.env.VITE_API_BASE_URL,
    djApiClient: process.env.VITE_DJ_API_CLIENT,
    djApiKey: process.env.VITE_DJ_API_KEY,
    djStoreId: process.env.STORE_ID,
    djStoreViewId: process.env.STORE_VIEW_ID,
    currency: process.env.DEFAULTCURRENCY,
    currencies: process.env.CURRENCIES ?? process.env.DEFAULTCURRENCY,
    locale: process.env.LOCALE,
    defaultPaginationSize: process.env.DEFAULT_PAGINATION_SIZE || '20',
    frontMode: process.env.FRONT_MODE || 'private',
  }
}

Tableau des Variables Runtime

Catégorie	Variable	Public	Privé	Description
Storyblok	`storyblokVersion`	✅	❌	Version du contenu
API Djust	`apiBaseUrl`	✅	✅	URL de base API
API Djust	`djApiClient`	✅	✅	ID Client
API Djust	`djApiKey`	✅	✅	Clé API
Magasin	`djStoreId`	✅	✅	ID Magasin
Localisation	`locale`	✅	✅	Langue par défaut
Application	`appVersion`	✅	❌	Version de l'app

Configuration Vite

Options Vite

{
  vite: {
    // Configuration SSR
    ssr: {
      external: ['@sentry/node'],
    },

    // Alias de résolution
    resolve: {
      alias: {
        '~': fileURLToPath(new URL('./', import.meta.url)),
      },
    },

    // Plugins Vite
    plugins: [
      svgLoader(),      // Chargement des SVG
      tailwindcss()     // Tailwind CSS
    ],

    // Assets inclus
    assetsInclude: ['**/*.mdx'],

    // Préprocesseurs CSS
    css: {
      preprocessorOptions: {
        sass: {
          api: 'modern',
        },
        scss: {
          api: 'modern',
        },
      },
    },
  },
}

Détails Configuration Vite

Plugins Intégrés

Plugin	Fonction	Source
`svgLoader()`	Import SVG comme composants	`vite-svg-loader`
`tailwindcss()`	Support Tailwind CSS	`@tailwindcss/vite`

Préprocesseurs CSS

css: {
  preprocessorOptions: {
    sass: { api: 'modern' },    // API Sass moderne
    scss: { api: 'modern' },    // API SCSS moderne
  },
}

Avantages :

✅ Performance : API moderne plus rapide
✅ Compatibilité : Support des dernières fonctionnalités
✅ Stabilité : API recommandée

Variables d'Environnement Utilisées

Tableau Complet

Variable	Obligatoire	Défaut	Description
`BASE_URL`	❌	`undefined`	URL de base application
`LOCALE`	❌	`'fr-FR'`	Langue par défaut
`VITE_API_BASE_URL`	✅	-	URL API Djust
`VITE_DJ_API_CLIENT`	✅	-	Client ID Djust
`VITE_DJ_API_KEY`	✅	-	Clé API Djust
`STORE_ID`	✅	-	ID Magasin
`STORE_VIEW_ID`	✅	-	ID Vue Magasin
`DEFAULTCURRENCY`	❌	`'EUR'`	Devise par défaut
`CURRENCIES`	❌	`DEFAULTCURRENCY`	Devises supportées
`DEFAULT_PAGINATION_SIZE`	❌	`'20'`	Taille pagination
`FRONT_MODE`	❌	`'private'`	Mode frontend
`MULTI_STORES`	❌	`'false'`	Support multi-magasins
`APPLICATION_ENV`	❌	-	Environnement app
`CLIENT_NAME`	❌	-	Nom client
`SENTRY_DSN`	❌	-	URL Sentry
`STORYBLOK_ACCESS_TOKEN`	❌	-	Token Storyblok
`STORYBLOK_VERSION`	❌	`'published'`	Version contenu

Optimisations et Performance

1. Désactivation SSR

ssr: false;

Raisons :

✅ SPA Mode : Application client-side uniquement
✅ Simplicité : Pas de rendu serveur
✅ Performance : Moins de complexité

2. Lazy Loading

i18n: {
  lazy: true,  // Chargement paresseux des traductions
}

3. Cache Storyblok

storyblok: {
  apiOptions: {
    cache: { type: 'memory', clear: 'manual' },
  },
}

4. Extraction de Payload

nitro: {
  payloadExtraction: false,  // Désactive l'extraction
}

Sécurité

1. Configuration CORS

routeRules: {
  '/': {
    cors: {
      origin: ['*'],                              // ⚠️ Attention en production
      methods: ['POST', 'OPTIONS'],
      allowHeaders: ['Content-Type', 'Authorization'],
    },
  },
}

2. Variables Sensibles

runtimeConfig: {
  // Côté serveur uniquement (sécurisé)
  djApiKey: process.env.VITE_DJ_API_KEY,

  public: {
    // Accessible côté client (non sensible)
    appVersion: pkg.version,
  }
}

Exemples d'Usage

1. Accès à la Configuration Runtime

// Dans un composable ou composant
const config = useRuntimeConfig();

// Côté client et serveur
const apiUrl = config.public.apiBaseUrl;

// Côté serveur uniquement
const apiKey = config.djApiKey;

2. Utilisation des Modules

// Auto-import des composables i18n
const { locale, t } = useI18n();

// Auto-import des stores Pinia
const userStore = useUserStore();

// Auto-import des composants
<template>
  <UButton>Bouton Nuxt UI</UButton>
  <Icon name="djust-icon:logo" />
</template>;

Maintenance et Évolution

1. Ajout de Modules

modules: [
  // Modules existants...
  '@nouveau/module',
],

2. Nouvelles Variables

runtimeConfig: {
  public: {
    // Variables existantes...
    nouvelleVariable: process.env.NOUVELLE_VAR,
  }
}

3. Configuration Conditionnelle

{
  // Configuration basée sur l'environnement
  devtools: {
    enabled: process.env.NODE_ENV === 'development',
  },
}

Bonnes Pratiques

1. Sécurité

✅ Variables sensibles côté serveur uniquement
✅ CORS configuré selon les besoins
✅ Tokens protégés dans runtimeConfig privé

2. Performance

✅ Lazy loading activé pour i18n
✅ Cache mémoire pour Storyblok
✅ Sourcemaps en développement

3. Maintenabilité

✅ Configuration centralisée dans .env
✅ Valeurs par défaut définies
✅ Documentation des options

Cette configuration nuxt.config.ts fournit une base solide pour une application e-commerce B2B moderne avec toutes les fonctionnalités nécessaires intégrées et optimisées.