NuxtShop ist ein hochgradig anpassbares Open-Source-Starterkit für den Aufbau von Headless Shopify Shops mit Nuxt 3. Es ist sofort einsatzbereit und bietet eine hervorragende Entwicklererfahrung und integrierte Leistungspraktiken als Grundlage für eine eCommerce-Website in Produktionsqualität.
Warum NuxtShop geboren wurde
NuxtShop entstand aus einer Notwendigkeit, die durch die Folgen der COVID-19-Pandemie für den eCommerce ausgelöst wurde. Forrester und Bloomreach haben festgestellt, dass 2019 ein kometenhafter Anstieg des E-Commerce-Umsatzes und des Markenumsatzes zu verzeichnen war, als 83 % der Unternehmen im Vergleich zu lediglich 9 % ein zweistelliges Wachstum bei den digitalen Umsätzen verzeichneten.
Während dieser Zeit hat Universal Standard, die weltweit größte Marke für Mode, alle Verkaufsflächen geschlossen. Universal Standard migrierte erfolgreich zu einer Headless-Architektur, die mit NuxtJS und Shopify aufgebaut wurde. Trotz der relativ geringen Größe des Entwicklungsteams und ihres bescheidenen Budgets entfielen 100 % des Umsatzes auf den Online-Verkauf.
Das Bekleidungsunternehmen verzeichnete nicht nur eine Steigerung der mobilen Konversionsrate um 200 % und einen beispiellos hohen Umsatzentag mit der Migration, sondern auch eine Verbesserung der Teamgeschwindigkeit.
Nach dem erfolgreichen Migrationserfolg entwickelte Justin Metros – Head of Technology, Universal Standard – NuxtShop, ein Starterkit, das er bei der Migration von Universal Standard hätte haben sollen. NuxtShop ist eine Destillation darüber, wie Universal Standard die Migration konzipiert und die wichtigsten Herausforderungen im kopflosen Handel gelöst hat, darunter:
- Domänenübergreifende Kommunikation für die Warenkorbverwaltung
- Optimierung für Core Web Vitals
- Apollo-Client- und GraphQL-API-Caching (demnächst verfügbar)
- Echtzeit-CDN-Datensynchronisierung
- Entwicklerproduktivität
- Leistungsoptimierung
Das Open Source-Projekt bietet eine nahtlose Migration und bewährte Techniken für serverseitiges Rendering (SSR), Caching, Leistungsoptimierung und Bereitstellungen mit Schwerpunkt auf Entwicklererfahrung.
Was NuxtShop ist und was nicht
NuxtShop ist ein Open-Source-Starterkit für die Entwicklung von Headless eCommerce auf Shopify mit Vue 3, Nuxt 3, Apollo, Tailwind 3 und Pinia. Sie ermöglicht Ihnen die Verwendung der neuesten Technologien wie Nuxt3 und Tailwind 3 mit weniger Abhängigkeiten für eine leistungsfähige E-Commerce-Website. Wenn Sie Nuxt geschrieben haben, sind Sie mit NuxtShop zu Hause.
NuxtShop ist:
- Ein leichter Ausgangspunkt
- So konfiguriert, dass Sie schnell produktiv arbeiten können
- Minimales Design mit grundlegenden Funktionen, die erweitert werden können
- Eigenwillig, aber nicht präskriptiv
- Ein Ausgangspunkt für Nuxt + Shopify eCommerce mit Layer0 am Rande
- Ein Projekt für grundlegende E-Commerce-Funktionen mit einer Struktur, die hervorragende Entwicklungspraktiken fördert
- Entwickelt für Entwickler, die sich mit Headless beschäftigen Shopify eCommerce mit Nuxt
NuxtShop ist nicht:
- A Shopify Design
- Eine Plug-and-Play-Lösung mit vollem Funktionsumfang/produktionsreife Filiale
- Ein Konstruktionssystem
- Eng an ein Werkzeug gekoppelt – tauschen Sie aus, was Sie möchten, fügen Sie hinzu, was Sie benötigen
Auf welchen Technologien basiert NuxtShop?
Im Kern von NuxtShop stehen Minimalismus und Einfachheit. Es basiert auf den erforderlichen Technologien, um ohne Qualitätseinbußen oder -Abstriche zu machen. Sie ist auch zukunftssicher, da sie mit den neuesten Technologien auf dem neuesten Stand der Innovation gebaut wird.
Nuxt 3 als Vue Framework
Nuxt 3 wurde mit einem kleineren Kern neu konzipiert und für schnellere Leistung und bessere Entwicklererfahrung optimiert. NuxtShop basiert auf der Zukunft von Nuxt mit Nuxt 3 (derzeit in der Beta-Version).
Staatsmanagement mit Pinia
NuxtShop verwaltet staaten mit Pinia. Es ist intuitiv, typsicher, erweiterbar, extrem leicht, modular aufgebaut und unterstützt devtools.
CSS-Styling mit Tailwind CSS
NuxtShop ist mit Tailwind CSS sofort einsatzbereit, einem hochgradig anpassbaren Utility-First CSS-Framework, das die Stilkomposition direkt in Ihrem Markup ermöglicht, ohne sich mit semantischen Klassennamen auseinandersetzen zu müssen.
Apollo für GraphQL
NuxtShop nutzt Apollo zur Verwaltung von APIs mit GraphQL. Mit Apollo [Studio] sind Sie nicht nur in der Lage, den Lebenszyklus Ihrer GraphQL-APIs zu verwalten, sondern können auch die Aktivitäten entwickeln, bereitstellen und beobachten.
Hosting über Layer0
Standardmäßig wird in NuxtShop Layer0 als Hosting-Plattform geliefert, da es viele Funktionen bietet, die Universal Standard unterstützen. Funktionen wie Core Web Vitals und Real User Monitoring, GraphQL Caching, Sicherheit (DDOS-Schutz, WAF und Bot Management)
Shopify für Headless eCommerce und als Kassensystem.
NuxtShop basiert auf einer dezentralen Headless-Architektur, die über APIs miteinander verbunden ist. Es bietet eine Storefront-API mit primitiven Funktionen und Funktionen wie Einkaufswagen, Kasse usw., damit Sie sofort loslegen können. Mit dem Headless-Ansatz können Sie alles austauschen, was Sie benötigen, und neue Services wie ein Zahlungs-Gateway, Headless-CMS oder ein Kassensystem nicht oder einfach in Ihren Stapel einführen.
Typescript-Unterstützung
NuxtShop wird mit TypeScript für die statische Typprüfung geliefert.
Funktionen
Einfache Einrichtung/erste Schritte
Die Installation und Ausführung von NuxtShop ist unkompliziert mit dem Shopify und App Setup oder die Bereitstellung auf Layer0 mit einem Klick, wodurch das Projekt auch in Ihr GitHub Konto geklont wird.
Minimaler Externer Gehäuseabdruck
NuxtShop nutzt nur die Dienste, die für die Ausführung erforderlich sind, und bringt Sie hinter die Kontrolle.
Minimale Vorläufige Formate
NuxtShop ist nicht nur der kleinste gemeinsame Nenner, sondern bietet auch ein minimales Design, sodass Sie die Kontrolle über Ihr Design übernehmen können, wie Sie es bei einem neuen Nuxt-Projekt gewohnt wären.
Headless-Architektur
NuxtShop ist API-gesteuert. Beginnen Sie mit einem schlanken API-Footprint, und tauschen Sie Services nach Belieben aus und ersetzen Sie sie.
Hosting über Layer0
NuxtShop wird werkseitig mit einem Klick auf Layer0 bereitgestellt, einer Edge-Plattform, die Edge-Logik in den App-Code integriert und den Edge-Bereich auf den Browser ausdehnt. Mit Funktionen, die von Core Web Vitals und Real User Monitoring, GraphQL Caching, Edge Experiments bis hin zu Sicherheit reichen, können Sie schneller erstellen, bereitstellen und versenden.
Erste Schritte
Besuchen Sie die folgenden Links, um zu beginnen.
- Das Projekt auf GitHub
- So richten Sie Shopify mit NuxtShop ein
- So richten Sie NuxtShop ein
- Klicken Sie auf „Bereitstellen“ auf „Layer0/Edgio“
Beiträge
Möchten Sie zu NuxtShop beitragen?
- Verlinken Sie NuxtShop auf Ihr GitHub-Konto und klonen Sie es auf Ihr lokales Gerät.
- Erstellen Sie eine neue Verzweigung `git Checkout -b <Branch-Name>`
- Richten Sie Ihren Shopify Store ein
- Benennen Sie im lokalen Klon `.env.sample` in `.env` um
- Fügen Sie den Shopify Access Token und die *.myshopify URL zu den .env -Variablen hinzu
- Führen Sie `YARN` aus, um Abhängigkeiten zu installieren
- Führen Sie `YARN dev` aus, um Ihre Anwendung auf einem lokalen Entwicklungsserver zu starten
Öffnen Sie eine Pull-Anforderung
Pull-Anträge sollten gegen die Hauptniederlassung gestellt werden.
Probleme
Haben Sie Probleme mit NuxtShop gefunden? Erstellen Sie ein neues Problem
