NuxtShop est un kit de démarrage open source hautement personnalisable pour la création de boutiques Shopify sans tête avec Nuxt 3. Il est prêt à l’emploi 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.
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 hausse fulgurante des ventes incrémentielles et du chiffre d’affaires des marques en 2019, lorsque 83 % des entreprises ont connu une croissance à deux chiffres du chiffre d’affaires numérique, 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 headless construite avec NuxtJS et Shopify, avec 100% des revenus entrants provenant des ventes en ligne malgré la taille relativement petite de l’équipe de développement et leur budget modeste.
Non seulement la société de vêtements a vu une hausse de 200 % du taux de conversion mobile et un jour de revenu 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, Universal Standard, a entrepris de créer NuxtShop, un kit de démarrage qu’il aurait souhaité avoir lors de la migration d’Universal Standard. NuxtShop est une distillation de la manière dont 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 pour Core Web Vitals
- Client Apollo et mise en cache de l’API GraphQL (bientôt disponible)
- Synchronisation de 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 du Nuxt, vous serez chez vous avec NuxtShop.
NuxtShop est:
- un point de départ allégé
- configuré pour vous aider à être productif rapidement
- style minimaliste avec des fonctionnalités de base prêtes à être étendues
- opiniâtre, 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 de bonnes pratiques de développement
- Conçu pour les développeurs qui se lancent dans le commerce électronique sans tête Shopify avec Nuxt
NuxtShop n’est pas:
- Un thème Shopify
- solution prête à l’emploi/solution prête à l’emploi complète
- 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 est-il construit ?
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 comme le cadre vue
Nuxt 3 a été remodelé avec un cœur plus petit et optimisé pour des performances plus rapides et une meilleure expérience des développeurs. NuxtShop est construit sur le futur de Nuxt avec Nuxt 3 (actuellement en version bêta).
Gestion de l’état avec Pinia
NuxtShop gère les états avec Pinia. Il est intuitif, sûr, extensible, extrêmement léger, modulaire par conception, et a la prise en charge de devtools.
CSS Styling avec Tailwind CSS
NuxtShop sort de la boîte avec Tailwind CSS, un framework CSS hautement personnalisable qui permet la composition de style directement dans votre balisage sans avoir à traiter les 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 pourrez également 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, Security (protection DDOS, WAF et Bot Management)
Shopify pour Headless eCommerce 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 StoreFront avec des primitives et des capacités telles que le panier, la caisse, etc, pour que vous puissiez vous lancer sur le terrain. Avec l’approche headless, vous pouvez échanger ce dont vous avez besoin et ne pas 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 de type statique.
Fonctionnalités
Facile à configurer/à démarrer
Installer et exécuter NuxtShop est simple à installer et à exécuter avec la configuration Shopify et App ou à déployer sur Layer0 avec un déploiement en 1 clic qui clone également le projet sur votre compte GitHub.
Encombrement minimal de l’emballage externe
NuxtShop emploie les services de seulement les forfaits nécessaires 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 généralement 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 fabriqué en usine avec un déploiement en 1 clic sur Layer0, une plateforme Edge qui intègre la logique Edge dans le code de l’application et étend la périphérie au navigateur. Il vous aide à créer, déployer et expédier plus rapidement, avec des fonctionnalités allant de Core Web Vitals et Real User Monitoring, GraphQL Caching, Edge Experiments, à la sécurité.
Mise en route
Consultez les liens ci-dessous pour commencer.
- Le projet sur GitHub
- Comment configurer Shopify avec NuxtShop
- Comment configurer NuxtShop
- Déploiement en 1 clic sur Layer0/Edgio
Contributions
Voulez-vous contribuer à NuxtShop?
- Fork NuxtShop à votre compte GitHub et clonez-le sur votre appareil local.
- Créez une nouvelle branche `git checkout -b <nom-branche> `
- Configurez votre boutique Shopify
- Dans le clone local, renommez `.env.sample` en `.env`
- Ajoutez votre jeton d’accès Shopify et votre URL *.myshopify aux variables .env
- Exécutez `YARN` pour installer les dépendances
- 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 rencontré des problèmes avec NuxtShop ? Créer un nouveau problème
