NuxtShop è uno starter kit open source altamente personalizzabile per la costruzione di headless Shopify store con Nuxt 3. È pronto all’uso e offre un’esperienza di sviluppo eccellente e pratiche di performance integrate come base per un sito di e-commerce di qualità produttiva.
Perché è nato NuxtShop
NuxtShop è nato da una necessità annunciata dalle conseguenze della pandemia di COVID-19 sull’eCommerce. Come scoperto da Forrester e Bloomreach, nel 2019 si è registrato un aumento vertiginoso delle vendite incrementali e dei ricavi del marchio dell’e-commerce, quando il 83% delle aziende ha registrato una crescita a due cifre dei ricavi digitali rispetto a un solo 9%.
Durante questo periodo, Universal Standard, il marchio di moda più tagliente al mondo, ha chiuso tutti gli spazi al dettaglio. Universal Standard è migrato con successo a un’architettura headless realizzata con NuxtJS e Shopify, con il 100% dei ricavi in entrata dalle vendite online nonostante le dimensioni relativamente ridotte del team di sviluppo e il budget modesto.
Non solo l’azienda di abbigliamento ha visto un aumento del 200% del tasso di conversione mobile e un giorno di fatturato senza precedenti con la migrazione, ma anche la velocità del team è migliorata.
Dopo il successo della migrazione, Justin Metros, responsabile della tecnologia, Universal Standard, ha deciso di creare NuxtShop, uno starter kit che avrebbe voluto avere quando Universal Standard è stato migrato. NuxtShop è una sintesi del modo in cui Universal Standard ha progettato la migrazione e ha risolto le principali sfide del commercio headless, tra cui:
- Comunicazione tra domini per la gestione dei carrelli
- Ottimizzazione per i principali parametri vitali Web
- Client Apollo e cache API GraphQL (presto disponibile)
- Sincronizzazione dei dati CDN in tempo reale
- Produttività degli sviluppatori
- Ottimizzazione delle prestazioni
Il progetto open source offre una migrazione senza soluzione di continuità e tecniche collaudate per il rendering lato server (SSR), il caching, l’ottimizzazione delle prestazioni e le distribuzioni, con particolare attenzione all’esperienza degli sviluppatori.
Ciò che NuxtShop è e ciò che non è
NuxtShop è uno starter kit open source per lo sviluppo di eCommerce headless su Shopify con Vue 3, Nuxt 3, Apollo, Tailwind 3 e Pinia. Consente di utilizzare le tecnologie più recenti come Nuxt3 e Tailwind 3, con meno dipendenze per un sito eCommerce performante. Se hai scritto qualsiasi Nuxt, sarai a casa con NuxtShop.
NuxtShop è:
- un punto di partenza leggero
- configurate per aiutarvi a essere produttivi rapidamente
- design minimalista con funzionalità di base pronte all’uso
- opinionata, ma non prescrittiva
- Un punto di partenza per Nuxt + Shopify eCommerce all’edge con Layer0
- Un progetto per funzionalità di eCommerce di base con una struttura che incoraggia pratiche di sviluppo eccellenti
- Creato per gli sviluppatori che si imbarcano su headless Shopify eCommerce con Nuxt
NuxtShop non è:
- Un tema Shopify
- un punto vendita pronto per la produzione/soluzione plug-and-play completa
- un sistema di progettazione
- strettamente accoppiato a qualsiasi strumento – scambiare ciò che si desidera e aggiungere ciò di cui si ha bisogno
Su quali tecnologie si basa NuxtShop?
Il nucleo di NuxtShop è il minimalismo e la semplicità. Si basa sulle tecnologie necessarie per funzionare senza sacrificare o compromettere la qualità. È inoltre a prova di futuro perché è costruito con le più recenti tecnologie all’avanguardia dell’innovazione.
Nuxt 3 come Vue Framework
Nuxt 3 è stato riprogettato con un core più piccolo e ottimizzato per prestazioni più veloci e una migliore esperienza degli sviluppatori. NuxtShop è costruito sul futuro di Nuxt con Nuxt 3 (attualmente in versione beta).
Gestione dello Stato con Pinia
NuxtShop gestisce gli stati con Pinia. È intuitivo, sicuro per il tipo, estensibile, estremamente leggero, modulare dal design e dotato di supporto devtools.
Stile CSS con CSS Tailwind
NuxtShop è pronto per l’uso con Tailwind CSS, un framework CSS altamente personalizzabile che consente la composizione dello stile direttamente nel markup senza dover gestire nomi di classe semantici.
Apollo per GraphQL
NuxtShop utilizza Apollo per la gestione delle API con GraphQL. Con Apollo [Studio], non solo sarete in grado di gestire il ciclo di vita delle vostre API GraphQL, ma sarete anche in grado di sviluppare, distribuire e osservare le sue attività.
Hosting tramite Layer0
Per impostazione predefinita, NuxtShop viene fornito con Layer0 come piattaforma di hosting perché offre molte funzionalità che alimentano Universal Standard. Funzioni come i principali parametri vitali Web e il monitoraggio degli utenti reali, il caching GraphQL, la sicurezza (protezione DDOS, WAF e gestione dei bot)
Shopify per l’eCommerce senza sede e come sistema di pagamento.
NuxtShop è alimentato da un’architettura headless decentrata interconnessa tramite API. Offre un‘API Storefront con primitive e funzionalità come carrello, cassa, ecc., per iniziare subito. Con l’approccio headless, puoi scambiare ciò di cui hai bisogno e non introdurre facilmente nuovi servizi nel tuo stack, come un gateway di pagamento, un CMS headless o un sistema di pagamento.
Supporto di caratteri tipografici
NuxtShop viene fornito con il testo tipografico per il controllo statico del tipo.
Funzioni
Facile da configurare/iniziare
Eseguire NuxtShop è semplice da installare ed eseguire con la configurazione Shopify e App o la distribuzione su Layer0 con un solo clic che clona anche il progetto sul tuo account GitHub.
Ingombro minimo della confezione esterna
NuxtShop utilizza solo i pacchetti necessari per funzionare, mettendoti dietro le ruote del controllo.
Stili preliminari minimi
NuxtShop non solo è stato progettato per essere il minimo comune denominatore, ma è anche dotato di uno stile minimalista, consentendoti di assumere il controllo del tuo progetto come faresti normalmente con un nuovo progetto Nuxt.
Architettura headless
NuxtShop è stato creato per essere basato su API. Iniziate con un footprint API snello e scambiate e sostituite i servizi secondo le vostre esigenze.
Hosting tramite Layer0
NuxtShop viene fornito con una distribuzione con un solo clic su Layer0, una piattaforma edge che integra la logica edge nel codice dell’app e estende l’edge al browser. Consente di creare, distribuire e spedire più velocemente, grazie a funzionalità che vanno dai parametri vitali principali del Web e il monitoraggio degli utenti reali, al caching GraphQL, agli esperimenti Edge e alla sicurezza.
Per iniziare
Per iniziare, visita i collegamenti riportati di seguito.
- Il progetto su GitHub
- Come configurare Shopify con NuxtShop
- Come configurare NuxtShop
- 1 clic su Distribuisci su Layer0/Edgio
Contributi
Vuoi contribuire a NuxtShop?
- Inserisci NuxtShop nel tuo account GitHub e clonalo sul tuo dispositivo locale.
- Crea un nuovo ramo `git checkout -b <Branch-name>`
- Imposta il tuo negozio Shopify
- Nel clone locale, rinominare “.env.sample” in “.env”
- Aggiungere il proprio token di accesso Shopify e l’URL *.myshopify alle variabili .env
- Eseguire “yarn” per installare le dipendenze
- Eseguire “yarn dev” per avviare l’applicazione su un server di sviluppo locale
Aprire una richiesta pull
Le richieste di ritiro devono essere presentate nei confronti della filiale principale.
Problemi
Hai riscontrato problemi con NuxtShop? Creare un nuovo problema
