Frameworks

Les exemples sont volontairement indépendants de tout framework : du TypeScript ordinaire qui s'exécute partout. Ces pages sont l'autre moitié, celles qui ne valent que pour un framework. Où se situe la frontière client, quel fichier a besoin de "use client", comment la clé parvient au navigateur, et ce qui casse quand un moteur de rendu rencontre le rendu côté serveur.

Chaque recette montre les deux façons de commencer. La voie du registre copie un composant dans votre projet, où le fichier vous appartient et suit vos jetons de design. La voie du paquet installe un hook ou un composable, ce qui est le bon niveau quand la carte s'insère dans une interface déjà construite. Les onglets retiennent votre choix, sur toutes les pages d'ici.

Recettes

Ajouter une carte à Next.js

Next.js

Une carte dans une page App Router, avec la frontière client déjà gérée.

Ouvrir

Ajouter une carte à React

React

Une carte dans une application React sur Vite, comme composant copié ou comme hook.

Ouvrir

Ajouter une recherche de lieux à React

React

Autocomplétion d'adresses avec anti-rebond qui déplace la carte, comme composant copié ou comme hook.

Ouvrir

Ajouter des itinéraires à React

React

Calculez un trajet entre deux lieux et tracez la ligne, comme panneau copié ou comme hook.

Ouvrir

Ajouter une carte à Vue

Vue

Une carte dans une application Vue 3, comme composant copié ou comme composable.

Ouvrir

Ajouter l'autocomplétion d'adresses à Vue

Vue

Proposez des adresses canadiennes à la saisie, comme composant copié ou comme composable.

Ouvrir

Ajouter une carte à Nuxt

Nuxt

Une carte dans une application Nuxt 3, avec la clé sur la configuration d'exécution et le moteur de rendu hors du serveur.

Ouvrir

Comment le code d'ici est vérifié

Chaque extrait TypeScript, TSX et Vue de ces pages est compilé avec les vrais types des paquets : une option renommée fait donc échouer un test au lieu de pourrir discrètement sur la page. Cela couvre les imports, les appels de hooks et de composables, et les props des composants React.

Deux choses ne sont pas couvertes, et il vaut mieux savoir lesquelles. Les templates Vue demandent le service de langage Vue plutôt que le compilateur TypeScript : une faute dans une liaison :prop vous parviendra donc plutôt qu'à un test. Et les fonctions intégrées de Nuxt, importées automatiquement, sont remplacées par des déclarations locales, même si la forme qu'unmap place sur la configuration d'exécution est vérifiée avec le module lui-même.