Home Blogs NuxtShop: Un kit de inicio de comercio electrónico de Nuxt y Shopify
Applications

NuxtShop: Un kit de inicio de comercio electrónico de Nuxt y Shopify

About The Author

Outline

NuxtShop es un kit de inicio de código abierto altamente personalizable para construir tiendas Shopify sin cabeza con Nuxt 3. Sale de la caja con una gran experiencia de desarrollador y prácticas de rendimiento integradas como base para un sitio de comercio electrónico de calidad de producción.

Implementar en 1-clic

Por qué nació NuxtShop

NuxtShop nació de una necesidad anunciada por las consecuencias de la pandemia de COVID-19 en el comercio electrónico. Según lo descubierto por Forrester y Bloomreach, hubo un meteórico aumento en las ventas incrementales del comercio electrónico y los ingresos de la marca en 2019, cuando el 83% de las empresas experimentaron un crecimiento de dos dígitos en los ingresos digitales en lugar de solo un 9%.

Durante este período, Universal Standard, la marca de moda más inclusiva del mundo, cerró todos los espacios comerciales. Universal Standard migró con éxito a una arquitectura sin cabeza construida con NuxtJS y Shopify, con el 100% de los ingresos procedentes de las ventas en línea a pesar del tamaño relativamente pequeño del equipo de desarrollo y su modesto presupuesto.

La compañía de ropa no solo vio un aumento del 200% en la tasa de conversión móvil y un día de ingresos más alto sin precedentes con la migración, sino que también mejoró la velocidad del equipo.

Tras el éxito de la migración, Justin Metros —jefe de tecnología de Universal Standard— se dispuso a crear NuxtShop, un kit de inicio que deseaba haber tenido cuando Universal Standard migró. NuxtShop es una destilación de cómo Universal Standard diseñó la migración y resolvió desafíos clave en el comercio sin cabeza, incluyendo:

  • Comunicación entre dominios para la gestión de carritos
  • Optimización para Core Web Vitals
  • Apollo cliente y GraphQL API caching (próximamente)
  • Sincronización de datos CDN en tiempo real
  • Productividad del desarrollador
  • Optimización del rendimiento

El proyecto de código abierto proporciona una migración sin interrupciones y técnicas probadas para el renderizado del lado del servidor (SSR), el almacenamiento en caché, la optimización del rendimiento y las implementaciones con énfasis en la experiencia del desarrollador.

Qué es NuxtShop y qué no es

NuxtShop es un kit de inicio de código abierto para desarrollar comercio electrónico sin cabeza en Shopify con Vue 3, Nuxt 3, Apollo, Tailwind 3 y Pinia. Le permite utilizar las últimas tecnologías como Nuxt3 y Tailwind 3, con menos dependencias para un sitio de comercio electrónico de alto rendimiento. Si has escrito algún Nuxt, estarás en casa con NuxtShop.

NuxtShop es:

  • un punto de partida ligero
  • configurado para ayudarle a ser productivo rápidamente
  • minimalmente estilizado con funcionalidad básica lista para extenderse
  • opiniones, pero no prescriptivas
  • Un punto de partida para Nuxt + Shopify eCommerce en el borde con Layer0
  • Un proyecto de funcionalidad básica de eCommerce con una estructura que fomenta grandes prácticas de desarrollo
  • Hecho para desarrolladores que se embarcan en el comercio electrónico sin cabeza de Shopify con Nuxt

NuxtShop no está:

  • Un tema Shopify
  • una completa solución plug-and-play / tienda lista para la producción
  • un sistema de diseño
  • estrechamente acoplado a cualquier herramienta – intercambiar lo que desea, añadir lo que necesita

¿En qué tecnologías se basa NuxtShop?

En el núcleo de NuxtShop están el minimalismo y la simplicidad. Se basa en las tecnologías necesarias para funcionar sin sacrificar ni comprometer la calidad. También es a prueba de futuro porque está construido con las últimas tecnologías en el borde de la innovación.

Nuxt 3 como el Marco de Vue

Nuxt 3 se ha rediseñado con un núcleo más pequeño y optimizado para un rendimiento más rápido y una mejor experiencia de desarrollador. NuxtShop se basa en el futuro de Nuxt con Nuxt 3 (que actualmente está en versión beta).

Gestión del Estado con Pinia

NuxtShop gestiona estados con Pinia. Es intuitivo, tipo seguro, extensible, extremadamente ligero, modular por diseño, y tiene el apoyo de devtools.

Estilo CSS con Tailwind CSS

NuxtShop sale de la caja con Tailwind CSS, un framework CSS de primera utilidad altamente personalizable que permite la composición de estilos directamente en su marcado sin tener que lidiar con nombres de clases semánticas.

Apolo para GraphQL

NuxtShop hace uso de Apollo para administrar API con GraphQL. Con Apollo [Studio], no solo podrás gestionar el ciclo de vida de tus API de GraphQL, sino que también podrás desarrollar, entregar y observar sus actividades.

Alojamiento vía Layer0

De forma predeterminada, NuxtShop incluye Layer0 como plataforma de alojamiento, ya que ofrece muchas características que impulsan Universal Standard. Características como Core Web Vitals y monitoreo de usuarios reales, almacenamiento en caché de GraphQL, seguridad (protección DDOS, WAF y administración de bots)

Shopify para Headless eCommerce y como sistema de pago.

NuxtShop funciona con una arquitectura descentralizada sin cabeza interconectada por API. Ofrece una API de escaparate con primitivas y capacidades tales como carrito, checkout, etc., para que usted llegue al suelo en funcionamiento. Con el enfoque sin cabeza, puede intercambiar lo que necesita y no necesita o introducir fácilmente nuevos servicios en su pila, como una pasarela de pago, un CMS sin cabeza o un sistema de pago.

Soporte de typescript

NuxtShop se envía con typescript para la comprobación de tipo estático.

Características

Fácil de configurar / comenzar

Obtener NuxtShop y ejecutar es sencillo de instalar y ejecutar con la configuración de Shopify y App o implementar en Layer0 con un despliegue de 1 clic que también clona el proyecto a su cuenta de GitHub.

Huella mínima del paquete externo

NuxtShop emplea los servicios de solo los paquetes necesarios para funcionar, poniéndote detrás de las ruedas del control.

Estilos preliminares mínimos

NuxtShop no solo está construido para ser el denominador común más bajo, sino que también viene con un estilo mínimo, lo que le permite tomar el control de su diseño como lo haría normalmente con un nuevo proyecto de Nuxt.

Arquitectura sin cabeza

NuxtShop está diseñado para ser impulsado por API. Comience con una huella de API Lean e intercambie y reemplace los servicios como considere conveniente.

Alojamiento vía Layer0

NuxtShop viene construido de fábrica con una implementación de 1 clic en Layer0, una plataforma de borde que integra la lógica de borde en el código de la aplicación y extiende el borde al navegador. Le ayuda a construir, implementar y enviar más rápido, con características que van desde Core Web Vitals y monitoreo de usuarios reales, almacenamiento en caché de GraphQL, experimentos Edge, hasta seguridad.

Empezando

Visita los enlaces de abajo para empezar.

Contribuciones

¿Quieres contribuir a NuxtShop?

  1. Bifurca NuxtShop en tu cuenta de GitHub y clónala en tu dispositivo local.
  2. Crear una nueva rama `git checkout -b <branch-name>`
  3. Configura tu tienda Shopify
  4. En el clon local, cambie el nombre `.env.sample` a `.env`
  5. Agrega tu token de acceso de Shopify y la URL *.myshopify a las variables .env
  6. Ejecute `yarn` para instalar dependencias
  7. Ejecute `yarn dev` para iniciar su aplicación en un servidor de desarrollo local

Abre una solicitud de pull

Las solicitudes de extracción deben hacerse contra la rama «principal».

Cuestiones

¿Ha encontrado algún problema con NuxtShop? Crea un nuevo problema