Home Blogs NuxtShop : un kit de démarrage Nuxt et Shopify eCommerce
Applications

NuxtShop : un kit de démarrage Nuxt et Shopify eCommerce

About The Author

Outline

NuxtShop est un kit de démarrage open source hautement personnalisable pour la construction de boutiques Shopify sans tête avec Nuxt 3. Il sort de la boîte avec une excellente expérience de développeur et des pratiques de performance intégrées comme base pour un site de commerce électronique de qualité de production.

Déployez en 1 clics

Pourquoi NuxtShop est né

NuxtShop est né d’une nécessité annoncée par les retombées de la pandémie de Covid-19 sur le commerce électronique. Comme l’ont découvert Forrester et Bloomreach, il y a eu une augmentation fulgurante des ventes incrémentielles de commerce électronique et des revenus de marque en 2019, lorsque 83 % des entreprises ont connu une croissance à deux chiffres des revenus numériques, contre seulement 9 %.

Au cours de cette période, Universal Standard, la marque de mode la plus inclusive au monde, a fermé tous les espaces de vente au détail. Universal Standard a migré avec succès vers une architecture sans tête construite avec NuxtJS et Shopify, avec 100% des revenus entrants provenant des ventes en ligne malgré la taille relativement réduite de l’équipe de développement et leur budget modeste.

Non seulement la société de vêtements a constaté une hausse de 200 % du taux de conversion mobile et un jour de chiffre d’affaires sans précédent avec la migration, mais la vélocité de l’équipe s’est également améliorée.

Suite au succès de la migration, Justin Metros, responsable de la technologie chez Universal Standard, a décidé de créer NuxtShop, un kit de démarrage qu’il aurait souhaité avoir lors de la migration d’Universal Standard. NuxtShop explique comment Universal Standard a conçu la migration et résolu les principaux défis du commerce sans tête, notamment :

  • Communication inter-domaines pour la gestion des chariots
  • Optimisation des paramètres vitaux Web de base
  • Mise en cache du client Apollo et de l’API GraphQL (bientôt disponible)
  • Synchronisation des données CDN en temps réel
  • Productivité des développeurs
  • Optimisation des performances

Le projet Open Source fournit une migration transparente et des techniques éprouvées pour le rendu côté serveur (SSR), la mise en cache, l’optimisation des performances et les déploiements, en mettant l’accent sur l’expérience des développeurs.

Ce qu’est NuxtShop et ce qu’il n’est pas

NuxtShop est un kit de démarrage open-source pour développer le commerce électronique sans tête sur Shopify avec vue 3, Nuxt 3, Apollo, Tailwind 3 et Pinia. Il vous permet d’utiliser les dernières technologies comme Nuxt3 et Tailwind 3, avec moins de dépendances pour un site de commerce électronique performant. Si vous avez écrit un Nuxt, vous serez chez vous avec NuxtShop.

NuxtShop est:

  • un point de départ léger
  • configuré pour vous aider à être productif rapidement
  • design minimaliste avec fonctionnalités de base prêtes à être étendues
  • avis, mais pas prescriptif
  • Un point de départ pour Nuxt + Shopify eCommerce à la périphérie avec Layer0
  • Un projet de fonctionnalité de commerce électronique de base avec une structure qui encourage les bonnes pratiques de développement
  • Conçu pour les développeurs se lançant dans le commerce électronique sans tête Shopify avec Nuxt

NuxtShop n’est pas:

  • Un thème Shopify
  • une solution plug-and-play complète/un magasin prêt pour la production
  • système de conception
  • étroitement couplé à n’importe quel outil – échangez ce que vous voulez, ajoutez ce dont vous avez besoin

Sur quelles technologies NuxtShop s’appuie-t-il ?

Au cœur de NuxtShop se trouvent le minimalisme et la simplicité. Il est construit sur les technologies nécessaires pour fonctionner sans sacrifier ou compromettre la qualité. Il est également à l’épreuve du temps car il est construit avec les dernières technologies à la pointe de l’innovation.

Nuxt 3 en tant que vue Framework

Nuxt 3 a été restructuré avec un cœur plus petit et optimisé pour des performances plus rapides et une meilleure expérience de développement. NuxtShop est construit sur le futur de Nuxt avec Nuxt 3 (qui est actuellement en version bêta).

Gestion de l’État avec Pinia

NuxtShop gère les États avec Pinia. Il est intuitif, sûr de type, extensible, extrêmement léger, modulaire par conception, et a le support devtools.

Style CSS avec CSS Tailwind

NuxtShop sort de la boîte avec TailwindCSS , un framework CSS utilitaire hautement personnalisable qui permet la composition de style directement dans votre balisage sans avoir à traiter avec des noms de classes sémantiques.

Apollo pour GraphQL

NuxtShop utilise Apollo pour gérer les API avec GraphQL. Avec Apollo [Studio], non seulement vous serez en mesure de gérer le cycle de vie de vos API GraphQL, mais vous serez également en mesure de développer, livrer et observer ses activités.

Hébergement via Layer0

Par défaut, NuxtShop est livré avec Layer0 comme plate-forme d’hébergement car il offre de nombreuses fonctionnalités qui alimentent Universal Standard. Fonctionnalités telles que Core Web Vitals et Real User Monitoring, GraphQL Caching, sécurité (protection DDOS, WAF et gestion des bots)

Shopify pour le commerce électronique Headless et comme système de paiement.

NuxtShop est alimenté par une architecture sans tête décentralisée interconnectée par des API. Il offre une API de vitrine avec des primitives et des capacités telles que le panier, la caisse, etc., pour que vous fassiez le plein pied. Avec l’approche headless, vous pouvez échanger ce dont vous avez besoin et ce que vous n’avez pas besoin ou introduire facilement de nouveaux services dans votre pile comme une passerelle de paiement, un CMS headless ou un système de paiement.

Prise en charge de TypeScript

NuxtShop est livré avec TypeScript pour la vérification statique des types.

Fonctionnalités

Facile à configurer/à démarrer

Obtenir NuxtShop et l’exécuter est simple à installer et à exécuter avec la configuration de Shopify et de l’application ou à déployer sur Layer0 avec un déploiement en 1 clics qui clone également le projet sur votre compte GitHub.

Encombrement minimal du boîtier externe

NuxtShop emploie les services de seulement les paquets nécessaires requis pour fonctionner, vous mettant derrière les roues du contrôle.

Styles préliminaires minimaux

Non seulement NuxtShop est construit pour être le plus petit dénominateur commun, mais il est également livré avec un style minimal, vous permettant de prendre le contrôle de votre conception comme vous le feriez habituellement avec un nouveau projet Nuxt.

Architecture sans tête

NuxtShop est conçu pour être piloté par API. Commencez avec une empreinte API allégée et échangez et remplacez les services comme bon vous semble.

Hébergement via Layer0

NuxtShop est livré en usine avec un déploiement en 1 clics sur Layer0, une plate-forme de périphérie qui intègre la logique de périphérie dans le code de l’application et étend la périphérie au navigateur. Il vous aide à construire, déployer et expédier plus rapidement, avec des fonctionnalités allant de Core Web Vitals et Real User Monitoring, GraphQL Caching, Edge Experiments et Security.

Mise en route

Cliquez sur les liens ci-dessous pour commencer.

Contributions

Voulez-vous contribuer à NuxtShop?

  1. Fork NuxtShop à votre compte GitHub et clonez-le sur votre appareil local.
  2. Créez une nouvelle branche `git checkout -b <nom-branche>`
  3. Configurez votre boutique Shopify
  4. Dans le clone local, renommez `.env.sample` en `.env`
  5. Ajoutez votre jeton d’accès Shopify et votre URL *.myshopify aux variables .env
  6. Exécutez `YARN` pour installer les dépendances
  7. Exécutez `Yarn dev` pour démarrer votre application sur un serveur de développement local

Ouvrez une demande de collecte

Les requêtes pull doivent être faites contre la branche `main`.

Problèmes

Vous avez trouvé des problèmes avec NuxtShop? Créez un nouveau problème