Vue Templates Logo Vue Templates
Vue Open Storefront screenshot

Vue Open Storefront

Author Avatar Theme by Joshistoast
Updated: 22 Dec 2022
26 Stars

WIP ___ A batteries-included, open-source template for Nuxt-based Shopify Storefronts.

Github

Categories

Nuxt Tailwind Shopify Ecommerce

Overview

Vue Open Storefront is an open-source template for Nuxt-based Shopify Storefronts. It is designed to provide all the standard features found in a typical Shopify liquid theme, but with the added benefits of headless and Vue-powered development. By using Vue Open Storefront, users can focus on customizing the theme without having to worry about working on store features.

Features

  • Product Page: Includes features such as selecting variants, adding items to cart, and displaying product details.
  • Cart: Allows users to add or remove items from the cart and update cart items.
  • Customers: Provides features like signing in, creating an account, and managing addresses.
  • Collections: Allows users to filter products, load more products, and display them.
  • Blog: Enables users to view articles by blog and read individual blog articles.
  • Pages: Provides the ability to view pages on the storefront.
  • Shop: Includes features for updating localization.
  • UI Components: Offers various UI components like buttons, radio buttons, checkboxes, and inputs.

Installation

To get started with Vue Open Storefront, follow these steps:

  1. Fork and clone the repository.
git clone [repository_url]
  1. Install the dependencies.
npm install
  1. Start developing locally.
npm run dev
  1. Create or log in to your Shopify Store.
  2. Go to the apps section and create a new app with Storefront API access.
  3. Install the app on your store and insert the storefront_api_access_token into the .env file.
  4. Insert the name of your storefront into the .env file.

Summary

Vue Open Storefront is a comprehensive open-source template for Nuxt-based Shopify Storefronts. It offers all the standard features of a typical Shopify theme, combined with the advantages of headless and Vue-powered development. By using this template, users can easily customize their themes without having to work on store features. The project is open to contributions, and users are encouraged to open issues or pull requests with any contributions they have.