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 crear tiendas Shopify sin cabeza con Nuxt 3. Sale de la caja con una gran experiencia de desarrollador y prácticas de rendimiento incorporadas como base para un sitio de comercio electrónico de calidad de producción.

Por qué nació NuxtShop

NuxtShop nació de una necesidad anunciada por las consecuencias de la pandemia de Covid-19 en el comercio electrónico. Como descubrieron Forrester y Bloomreach, hubo un meteórico aumento en las ventas incrementales del comercio electrónico y los ingresos de 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 un 100% de los ingresos provenientes de las ventas en línea, a pesar del tamaño relativamente pequeño del equipo de desarrollo y su presupuesto modesto.

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 altos sin precedentes con la migración, sino que la velocidad del equipo también mejoró.

Tras el éxito de la migración, Justin Metros, Jefe de Tecnología de Universal Standard, se propuso crear NuxtShop, un kit inicial 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
  • Cliente Apollo y almacenamiento en caché de API GraphQL (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 perfecta y técnicas probadas para renderizado del lado del servidor (SSR), almacenamiento en caché, optimización del rendimiento e implementaciones con énfasis en la experiencia del desarrollador.

Qué es NuxtShop y qué no lo es

NuxtShop es un kit de inicio de código abierto para desarrollar eCommerce 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
  • estilo mínimo con funcionalidad básica lista para extender
  • opinado, pero no prescriptivo
  • 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 las buenas prácticas de desarrollo
  • Hecho para desarrolladores que se embarcan en el comercio electrónico Shopify sin cabeza con Nuxt

NuxtShop no es:

  • Un tema de Shopify
  • una tienda completa de soluciones plug-and-play / lista para la producción
  • un sistema de diseño
  • estrechamente acoplado a cualquier herramienta – intercambia lo que quieras, agrega lo que necesitas

¿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 o comprometer la calidad. También está preparada para el futuro porque está construida con las últimas tecnologías en el borde de la innovación.

Nuxt 3 como el marco de Vue

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

Gestión estatal con Pinia

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

CSS Styling con Tailwind CSS

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

Apollo para GraphQL

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

Alojamiento vía Layer0

Por defecto, NuxtShop se envía con Layer0 como la plataforma de alojamiento porque ofrece muchas características que potencian Universal Standard. Características como Core Web Vitals y Monitoreo de usuario real, almacenamiento en caché de GraphQL, seguridad (protección DDOS, WAF y gestión de bots)

Shopify para Headless eCommerce y como sistema de pago.

NuxtShop está alimentado por una arquitectura descentralizada sin cabeza interconectada por APIs. Ofrece una API de escaparate con primitivas y capacidades tales como carrito, caja, etc., para que usted salga a la tierra corriendo. Con el enfoque sin cabeza, puede cambiar lo que necesita y no o introducir fácilmente nuevos servicios en su pila, como una pasarela de pago, CMS sin cabeza o sistema de pago.

Soporte de TypeScript

NuxtShop se envía con TypeScript para la comprobación de tipos estáticos.

Características

Fácil de configurar / comenzar

Instalar y ejecutar NuxtShop es fácil de instalar y ejecutar con la configuración de Shopify y App o implementarla en Layer0 con una implementación de 1 clic que también clona el proyecto a tu 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 de control.

Estilos preliminares mínimos

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

Arquitectura sin cabeza

NuxtShop está diseñado para ser conducido por API. Comience con una huella de API lean y cambie 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 de borde, hasta Seguridad.

Para empezar

Visite los enlaces de abajo para comenzar.

Contribuciones

¿Quieres contribuir a NuxtShop?

  1. Bifurca NuxtShop a tu cuenta de GitHub y clónalo a 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 peticiones de pull deben hacerse contra la rama `main`.

Cuestiones

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