Home Blogs NuxtShop: Um Nuxt e Shopify eCommerce Starter Kit
Applications

NuxtShop: Um Nuxt e Shopify eCommerce Starter Kit

About The Author

Outline

NuxtShop é um kit inicial de código aberto altamente personalizável para a construção de lojas sem cabeça da Shopify com Nuxt 3. Ele sai da caixa com uma excelente experiência de desenvolvedor e práticas de desempenho incorporadas como base para um site de comércio eletrônico de qualidade de produção.

Implante com 1 clique

Por que NuxtShop nasceu

A NuxtShop nasceu de uma necessidade anunciada pela queda da pandemia Covid-19 no eCommerce. Conforme descoberto pela Forrester e pela Bloomreach, houve um aumento meteórico nas vendas incrementais de comércio eletrônico e na receita de marca em 2019, quando 83% das empresas experimentaram um crescimento de dois dígitos na receita digital, em oposição a apenas 9%.

Durante esse período, a Universal Standard, a marca de moda mais inclusiva do mundo, fechou todos os espaços de varejo. A Universal Standard migrou com sucesso para uma arquitetura sem cabeça construída com NuxtJS e Shopify, com 100% da receita recebida das vendas on-line, apesar do tamanho relativamente pequeno da equipe de desenvolvimento e seu orçamento modesto.

Não só a empresa de roupas viu um aumento de 200% na taxa de conversão móvel e um dia de receita sem precedentes com a migração, mas a velocidade da equipe também melhorou.

Após o sucesso da migração, Justin Metros – Chefe de Tecnologia, Universal Standard – se estabeleceu para criar NuxtShop, um kit inicial que ele desejava ter tido quando a Universal Standard migrou. NuxtShop é uma destilação de como a Universal Standard arquitetou a migração e resolveu os principais desafios no comércio sem cabeça, incluindo:

  • Comunicação entre domínios para gestão de carrinhos
  • Otimização para Core Web Vitals
  • Cliente Apollo e cache API GraphQL (em breve)
  • Sincronização de dados CDN em tempo real
  • Produtividade do desenvolvedor
  • Otimização de desempenho

O projeto de código aberto fornece uma migração perfeita e técnicas comprovadas para renderização do lado do servidor (SSR), cache, otimização de desempenho e implantações com ênfase na experiência do desenvolvedor.

O que é NuxtShop e o que não é

NuxtShop é um kit inicial de código aberto para o desenvolvimento de eCommerce sem cabeça na Shopify com Vue 3, Nuxt 3, Apollo, Tailwind 3 e Pinia. Ele permite que você use as tecnologias mais recentes, como Nuxt3 e Tailwind 3, com menos dependências para um site de comércio eletrônico de desempenho. Se você já escreveu qualquer Nuxt, você estará em casa com NuxtShop.

NuxtShop é:

  • um ponto de partida leve
  • configurado para ajudá-lo a ser produtivo rapidamente
  • minimamente estilizado com funcionalidade básica pronta a estender
  • opinativo, mas não prescritivo
  • Um ponto de partida para Nuxt e Shopify eCommerce na borda com Layer0
  • Um projeto para a funcionalidade básica de eCommerce com uma estrutura que incentiva boas práticas de desenvolvimento
  • Feito para desenvolvedores que embarcam no Shopify eCommerce sem cabeça com Nuxt

NuxtShop não é:

  • Um tema da Shopify
  • uma solução plug-and-play completa/loja pronta para produção
  • um sistema de design
  • firmemente acoplado a qualquer ferramenta – troque o que você quer, adicione o que você precisa

Em que tecnologias a NuxtShop é construída?

No centro da NuxtShop estão o minimalismo e a simplicidade. Ele é construído sobre as tecnologias necessárias para funcionar sem sacrificar ou comprometer a qualidade. Também é à prova de futuro porque é construído com as mais recentes tecnologias na borda da inovação.

Nuxt 3 como o Vue Framework

O Nuxt 3 foi re-arquitetado com um núcleo menor e otimizado para desempenho mais rápido e melhor experiência do desenvolvedor. NuxtShop é construído sobre o futuro do Nuxt com Nuxt 3 (que está atualmente em beta).

Gestão do Estado com Pinia

NuxtShop gerencia estados com Pinia. É intuitivo, tipo-seguro, extensível, extremamente leve, modular por design, e tem suporte para ferramentas de devtools.

Estilo CSS com CSS Tailwind

NuxtShop sai da caixa com TailwindCSS , uma estrutura CSS altamente personalizável que permite a composição de estilo diretamente em sua marcação sem ter que lidar com nomes de classe semânticos.

Apollo para GraphQL

NuxtShop faz uso do Apollo para gerenciar APIs com GraphQL. Com o Apollo [Studio], você não só poderá gerenciar o ciclo de vida de suas APIs GraphQL, mas também poderá desenvolver, entregar e observar suas atividades.

Hospedagem via Layer0

Por padrão, NuxtShop vem com Layer0 como a plataforma de hospedagem porque oferece muitos recursos que potenciam o Universal Standard. Recursos como Core Web Vitals e Real User Monitoring, GraphQL Caching, Segurança (Proteção DDOS, WAF e Gerenciamento de Bot)

Shopify for Headless eCommerce e como um sistema de checkout.

NuxtShop é alimentado por uma arquitetura descentralizada sem cabeça interligada por APIs. Ele oferece uma API storefront com primitivas e recursos, como carrinho, checkout, etc., para você bater o chão em execução. Com a abordagem sem cabeça, você pode trocar o que você precisa e não introduzir ou facilmente novos serviços em sua pilha, como um gateway de pagamento, CMS sem cabeça ou sistema de checkout.

Suporte de typescript

NuxtShop vem com typescript para verificação de tipo estático.

Caraterísticas

Fácil de configurar/começar

Obter o NuxtShop e executar é fácil de instalar e executar com a configuração do Shopify e do App ou implantar no Layer0 com um implante de 1 clique que também clonará o projeto em sua conta do GitHub.

Pegada mínima do pacote externo

NuxtShop emprega os serviços de apenas os pacotes necessários necessários para executar, colocando você atrás das rodas de controle.

Estilos Preliminares Mínimo

Não só NuxtShop é construído para ser o menor denominador comum, mas também vem com estilo mínimo, permitindo que você assuma o controle de seu design como você normalmente faria com um novo projeto Nuxt.

Arquitetura sem cabeça

NuxtShop foi construído para ser orientado por API. Comece com um espaço de API lean e troque e substitua os serviços conforme você entender.

Hospedagem via Layer0

NuxtShop vem construído de fábrica com uma implantação de 1 clique no Layer0, uma plataforma de borda que integra a lógica de borda no código do aplicativo e estende a borda ao navegador. Ele ajuda você a criar, implantar e enviar mais rapidamente, com recursos que vão desde Core Web Vitals e Real User Monitoring, GraphQL Caching, Edge Experiments, até Segurança.

Como começar

Visite os links abaixo para começar.

Contribuições

Deseja contribuir para NuxtShop?

  1. Faça o fork NuxtShop para sua conta do GitHub e clone-o para o seu dispositivo local.
  2. Crie uma nova branch ‘git checkout -b <branch-name>’
  3. Configure sua loja da Shopify
  4. No clone local, renomeie “.env.sample” para “.env”
  5. Adicione o seu token de acesso da Shopify e o URL *.myShopify às variáveis .env
  6. Execute ‘yarn’ para instalar dependências
  7. Execute ‘Yarn dev’ para iniciar seu aplicativo em um servidor de desenvolvimento local

Abra um pedido de tração

Solicitações de pull devem ser feitas contra o branch ‘main’.

Problemas

Encontrou algum problema com NuxtShop? Crie um novo problema