Home Blogs NuxtShop: NuxtとShopify eコマーススターターキット
Applications

NuxtShop: NuxtとShopify eコマーススターターキット

About The Author

Outline

NuxtShopは、Nuxt 3でヘッドレスShopifyストアを構築するための高度にカスタマイズ可能なオープンソーススターターキットです 。 優れた開発者エクスペリエンスと、プロダクション品質のeコマースサイトの基盤としての組み込みのパフォーマンスプラクティスを備えています。

ワンクリックで導入

NuxtShopが誕生した理由

NuxtShopは、eコマースにおけるCovid-19パンデミックの影響によって予告された必要性から生まれました。 ForresterとBloomreachが発見したように、2019年にeコマースの売上とブランド収益が急激に増加しました。このとき、企業の83%がデジタル収益のわずか9%ではなく2桁の成長を経験しました。

この期間、世界で最も規模の大きいファッションブランドであるユニバーサル・スタンダードは、すべての小売スペースを閉鎖しました。 Universal StandardはNuxtJSとShopifyで構築されたヘッドレスアーキテクチャへの移行に成功し、開発チームの規模が比較的小さく、予算も控えめであるにもかかわらず、オンライン販売からの収益の100%を獲得しました。

衣料品会社は、モバイルのコンバージョン率が200%向上し、移行により前例のない最高の収益日が達成されただけでなく、チームの速度も向上しました。

移行が成功した後、Universal Standardの技術責任者であるJustin Metrosは、Universal Standardが移行したときに持っていたいと思っていたスターターキットであるNuxtShopの作成を開始しました。 NuxtShopは、Universal Standardがどのように移行を設計し、ヘッドレスコマースにおける次のような主要な課題を解決したかを明らかにしたものです。

  • カート管理のためのクロスドメイン通信
  • コアウェブバイタルの最適化
  • ApolloクライアントとGraphQL APIキャッシング(近日公開)
  • リアルタイムCDNデータ同期
  • 開発者の生産性
  • パフォーマンスの最適化

オープンソースプロジェクトは、開発者の経験に重点を置いた、サーバーサイドレンダリング(SSR)、キャッシュ、パフォーマンス最適化、およびデプロイメントのためのシームレスな移行と実証済みの技術を提供します。

NuxtShopとは何か、そうでないもの

NuxtShopは、Vue 3、Nuxt 3、Apollo、Tailwind 3、Piniaを使用してShopifyでヘッドレスeコマースを開発するためのオープンソーススターターキットです。 Nuxt3やTailwind 3などの最新のテクノロジーを使用して、パフォーマンスの高いeコマースサイトの依存関係を減らすことができます。 Nuxtをまったく書いたことがある場合は、NuxtShopを使用して自宅にいることになります。

NuxtShopは次のとおりです。

  • 軽量な出発点
  • 迅速な生産性向上を支援する構成
  • 最小限のスタイルで、拡張可能な基本機能を備えています。
  • 強烈だが規範的ではない
  • Nuxt + Shopifyの出発点レイヤー0を使用したエッジでのeコマース
  • 優れた開発プラクティスを奨励する構造を持つ基本的なeコマース機能のプロジェクト
  • ヘッドレスに乗り出す開発者向けに作られたShopify Nuxtによるeコマース

NuxtShopは

  • Shopifyのテーマ
  • フル機能のプラグアンドプレイソリューション/本番環境対応ストア
  • 設計システム
  • 任意の1つのツールと緊密に連携-必要なものを交換し、必要なものを追加

NuxtShopはどのようなテクノロジーを基盤として構築されていますか?

NuxtShopの中核は、ミニマリズムとシンプルさです。 品質を犠牲にしたり、妥協したりすることなく実行するために必要なテクノロジーに基づいて構築されています。 また、最先端の技術を駆使して開発されているため、将来にも対応できます。

VueフレームワークとしてのNuxt 3

Nuxt 3は、より小さなコアで再設計され、より高速なパフォーマンスとより良い開発者体験を実現するように最適化されています。 NuxtShopは、Nuxt 3 (現在ベータ版)を使用して、Nuxtの将来に構築されてい ます。

Piniaによる状態管理

NuxtShopはPiniaで州を管理します 。 直感的で、タイプセーフ、拡張可能で、非常に軽量で、モジュラー設計で、 開発ツールをサポートしています。

Tailwind CSSを使用したCSSスタイル

NuxtShopは、カスタマイズ性の高いユーティリティファーストのCSSフレームワークであるTailwind CSSですぐに使用できます 。Tailwind CSSは、セマンティッククラス名を扱うことなく、マークアップ内でスタイルを直接作成できるようにします。

グラフQL用アポロ

NuxtShopはApolloを利用してGraphQLでAPIを管理している。 Apollo [Studio]を使用すると、GraphQL APIのライフサイクルを管理できるだけでなく、そのアクティビティを開発、配信、観察することもできます。

Layer0を介したホスティング

デフォルトでは、NuxtShopは、Universal Standardを強化する多くの機能を提供するため、Layer0をホスティングプラットフォームとして提供しています。 Core Web VitalsおよびReal User Monitoring、GraphQLキャッシング、セキュリティ(DDoS防御、WAF、ボット管理)などの機能

Shopifyヘッドレスeコマースとチェックアウトシステムとして。

NuxtShopは、APIによって相互接続された分散型ヘッドレスアーキテクチャによって強化されています。 カート、チェックアウトなどのプリミティブと機能を備えたストアフロントAPIを提供しており 、本格的に作業を開始できます。 ヘッドレスアプローチを使用すると、必要なものを交換し、支払いゲートウェイ、ヘッドレスCMS、チェックアウトシステムなどの新しいサービスをスタックに簡単に導入できます。

TypeScriptのサポート

NuxtShopには静的型チェックのためのTypeScriptが付属している

機能

セットアップ/開始が簡単

NuxtShopを取得して実行することは、Shopifyとアプリのセットアップでインストールして実行する か、1クリックでレイヤー0にデプロイしてGitHubアカウントにプロジェクトをクローンすることもできます。

最小の外部パッケージフットプリント

NuxtShopは、実行に必要なパッケージのみのサービスを採用しており、管理の輪の後ろにあなたを置きます。

最小限の予備スタイル

NuxtShopは最も低い共通分母であるように構築されているだけでなく、最小限のスタイリングで出荷され、新鮮なNuxtプロジェクトで通常行うようにデザインを制御できます。

ヘッドレスアーキテクチャ

NuxtShopはAPI駆動型に構築されています。 無駄のないAPIフットプリントで始め、必要に応じてサービスを交換したり置き換えたりできます。

Layer0を介したホスティング

NuxtShopは、Layer0へのワンクリックデプロイで工場出荷時に構築されています。Layer0は、エッジロジックをアプリコードに統合し、エッジをブラウザーに拡張するエッジプラットフォームです。 Core Web VitalsやReal User Monitoring、GraphQLキャッシング、Edge Experiments、Securityなどの機能を使用して、構築、展開、出荷を迅速化できます。

はじめに

開始するには、以下のリンクを参照してください。

貢献

NuxtShopに貢献しますか?

  1. NuxtShopをGitHubアカウントにフォークし、ローカルデバイスにクローンします。
  2. 新しいブランチ「git checkout -b branch-name」を作成します。 <>
  3. Shopifyストアを設定する
  4. ローカル・クローンで’`.env.sample`の名前を`.env`に変更します
  5. Shopifyアクセストークンと*。myshopify URLを.env変数に追加します。
  6. `yarn`を実行して依存関係をインストールする
  7. 「yarn dev」を実行して、ローカルの開発サーバでアプリケーションを起動します。

プルリクエストを開く

プルリクエストは`main`ブランチに対して行われるべきです。

問題

NuxtShopに問題が見つかりましたか? 新しい問題の作成