L'architecture en pratique : PrestaShop + Nuxt 3

Comprendre le flux de données

L'architecture headless repose sur trois composants qui ne se connaissent que via l'API :

Client (navigateur)
    ↓ requête HTTP
Nuxt 3 (SSR - port 3000)
    ↓ fetch API REST
PrestaShop WebService (port 8080)
    ↓ requête SQL
MariaDB (port 3306 - interne)

Voici comment chaque composant est configuré :

PrestaShop — Activer le WebService

Dans le back-office PS : Paramètres avancés → Webservice. Créer une clé API avec les permissions adaptées (lecture produits, catégories, clients, commandes). Cette clé est votre pont sécurisé entre les deux systèmes.

Nuxt 3 — Consommer l'API PS

Dans nuxt.config.ts, configurez les variables d'environnement :

runtimeConfig: {
  psApiUrl: process.env.PS_API_URL,
  psApiKey: process.env.PS_API_KEY
}

Dans un server route (server/api/products.ts) :

const config = useRuntimeConfig()
const data = await $fetch(
  `${config.psApiUrl}/api/products`,
  { headers: { 'Authorization': `Basic ${btoa(config.psApiKey + ':')}` } }
)

Le piège du Host header

Dans un environnement Docker, PrestaShop vérifie le Host header. Si Nuxt appelle PS via le réseau Docker interne sans spécifier le bon Host, PS renvoie une redirection 302 en boucle. Toujours forcer le header Host vers le domaine configuré dans PS.

• Nuxt interroge PS via réseau Docker interne (rapide, pas de sortie Internet)
• PS répond en XML ou JSON selon le paramètre output_format=JSON
• Nuxt transforme et sert le HTML pré-rendu au client