Home Blogs NuxtShop: Uno starter kit di e-commerce Nuxt e Shopify
Applications

NuxtShop: Uno starter kit di e-commerce Nuxt e Shopify

About The Author

Outline

NuxtShop è uno starter kit open source altamente personalizzabile per la creazione di headless Shopify negozi con Nuxt 3. È pronto all’uso con un’ottima esperienza di sviluppo e pratiche di performance integrate come base per un sito di eCommerce di qualità della produzione.

Distribuire con un solo clic

Perché NuxtShop è nato

NuxtShop nasce da una necessità annunciata dalle ricadute 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 nell’e-commerce, quando il 83% delle aziende ha registrato una crescita a due cifre dei ricavi digitali rispetto al solo 9%.

Durante questo periodo, Universal Standard, il marchio di moda più grande al mondo, ha chiuso tutti gli spazi retail. Universal Standard è migrato con successo a un’architettura headless realizzata con NuxtJS e Shopify, con il 100% dei ricavi derivanti dalle vendite online nonostante le dimensioni relativamente ridotte del team di sviluppo e il budget modesto.

Non solo l’azienda di abbigliamento ha registrato un aumento del 200% del tasso di conversione dei dispositivi mobili 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 ha effettuato la migrazione. NuxtShop è una distillazione di come Universal Standard ha progettato la migrazione e risolto le principali sfide del commercio senza testa, tra cui:

  • Comunicazione tra più domini per la gestione del carrello
  • 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.

Che cos’è NuxtShop e cosa non è

NuxtShop è uno starter kit open source per lo sviluppo di eCommerce senza testa 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 di e-commerce 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 per essere estese
  • 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 in Headless Shopify eCommerce con Nuxt

NuxtShop non è:

  • A tema Shopify
  • una soluzione plug-and-play completa e pronta per la produzione
  • un sistema di progettazione
  • strettamente accoppiato a qualsiasi strumento – scambia ciò che desideri, aggiungi ciò che ti serve

Su quali tecnologie si basa NuxtShop?

Al centro di NuxtShop ci sono minimalismo e semplicità. Si basa sulle tecnologie necessarie per funzionare senza sacrificare o compromettere la qualità. È anche 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 si basa 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 tipo, estensibile, estremamente leggero, modulare dal design, e ha il supporto di devtools.

Stile CSS con CSS Tailwind

NuxtShop è pronto all’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 testa e come sistema di pagamento.

NuxtShop è basato su un’architettura headless decentrata interconnessa tramite API. Offre un ‘API storefront con primitive e funzionalità come carrello, checkout, ecc., che consente di iniziare a lavorare. Con l’approccio senza testa, puoi sostituire ciò di cui hai bisogno e non introdurre facilmente nuovi servizi nel tuo stack, come un gateway di pagamento, un CMS senza testa o un sistema di pagamento.

Supporto tipografia

NuxtShop viene fornito con il carattere tipografico per il controllo del tipo statico.

Funzioni

Facile da configurare/iniziare

L’installazione e l’esecuzione di NuxtShop sono semplici da eseguire con la configurazione di Shopify e App o la distribuzione su Layer0 con una distribuzione con un solo clic che clona anche il progetto sul tuo account GitHub.

Ingombro minimo della confezione esterna

NuxtShop si avvale dei soli pacchetti necessari per funzionare, mettendovi al volante del controllo.

Stili preliminari minimi

NuxtShop non solo è costruito per essere il minimo comune denominatore, ma viene fornito anche con uno stile minimalista, consentendo di assumere il controllo del progetto come si farebbe con un nuovo progetto Nuxt.

Architettura headless

NuxtShop è progettato per essere basato su API. Iniziate con un ingombro API snello e sostituite i servizi come ritenete opportuno.

Hosting tramite Layer0

NuxtShop viene realizzato in fabbrica con una distribuzione con un solo clic su Layer0, una piattaforma edge che integra la logica edge nel codice app e estende l’edge al browser. Vi aiuta a creare, distribuire e spedire più velocemente, con funzionalità che vanno dai parametri vitali Web principali al monitoraggio degli utenti reali, dal caching GraphQL, agli esperimenti Edge, alla sicurezza.

Per iniziare

Per iniziare, visita i collegamenti riportati di seguito.

Contributi

Vuoi contribuire a NuxtShop?

  1. Forca NuxtShop sul tuo account GitHub e clonalo sul tuo dispositivo locale.
  2. Creare una nuova filiale `git checkout -b <Branch-name>`
  3. Configura il tuo negozio Shopify
  4. Nel clone locale, rinominare “.env.sample” in “.env”
  5. Aggiungere il token di accesso Shopify e l’URL *.myshopify alle variabili .env
  6. Eseguire `yarn` per installare le dipendenze
  7. Eseguire “yarn dev” per avviare l’applicazione su un server di sviluppo locale

Aprire una richiesta di estrazione

Le richieste di pull devono essere effettuate in relazione al ramo «principale».

Problemi

Hai riscontrato problemi con NuxtShop? Creare un nuovo problema