Nuxt Storefront is a batteries-included, production-ready, headless and open-source e-commerce template for Nuxt 3-powered storefronts.
🛍️ Search and browse products
💫 Shopify store branding
🔒 Customer authentication and registration
🛒 Manage shopping cart
💚 Nuxt 3 - SSR, File-based routing, auto imported components, etc.
⚡ Vite - Lightning fast dev experience and instant HMR
🦾 Full type-safety on the Storefront API, powered by Typescript
🧩 Powerful, auto-imported composables for Shopify functions
😃 Use any icon set you want from Iconify, powered by Nuxt Icon
🔥 <script setup> syntax
- Headless UI - Fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Strongly recommended to use VSCode with the Volar extension.
This template aims to be a starting point for any developers looking to build a Shopify store with Nuxt 3, and don't want to put in the effort of building out the often-complex storefront logic. It is meant to be customized and extended to fit your demands, and not to be used as a drop-in solution.
Headless is a term used to describe a decoupled architecture where the frontend and backend are separated. This allows for a more flexible and scalable architecture, and allows for both the frontend and backend to be developed independently.
Headless is best suited for store owners who are willing to get their hands dirty with the code, and are looking for a more flexible and customizable solution than what's available with Shopify themes.
Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.
This template is primarily for developers who want a scalable, and customizable starting point for building a headless Shopify Storefront with Nuxt 3. Requires an intermediate understanding of Vue 3 or Nuxt 3.
This template is still in active development, and is not yet ready for production use. The following features are planned for the initial release:
- Header
- Logo
- Navigation
- Topbar
- Mobile View
- Footer
- Logo
- Navigation
- Localization
- Country Selector
- Site reflects selected country
- Collections
- Infinite Scroll Pagination
- Filtering
- Sorting
- Product Grid
- SEO
- Product Pages
- Variant Selection
- Images Gallery
- Recommendations
- SEO
- Search
- Product Grid
- SEO
- Cart
- Remove Items
- Update Quantity
- Checkout Button
- Summary
- Shopify Pages
- Content
- SEO
- Customer Authentication
- Login
- Register
- Logout
- Reset Password
- Customer Dashboard
- View Order History
- Addresses
- Remove address
- Favorite address
- Create address
- Wishlist
- Product Quick View
- Product Quick Add
- Cart Drawer
If you feel capable of contributing to this template, please refer to the contributing guide.
If you have any feature requests, please open an issue.
Setting up the template is fairly straightforward, but requires a few steps to get up and running.
To use this template, you need to first have a Shopify store and a Storefront API access token.
Assuming you already have a Shopify store, you can create a Storefront API access token by following these steps:
- Go to the Settings page of your Shopify store
- Navigate to the App Development section by clicking
Apps and sales channels->Develop apps - Click
Create an app, fill out the name and set yourself as the developer - Under
Configuration, configure theStorefront APIsection and enable it
Note: For best functionality, you should allow the app to access all permissions under the
Storefront APIsection.
In the root of the project, create a .env file with the following variables:
SHOPIFY_ENDPOINT
SHOPIFY_ACCESS_TOKENSet SHOPIFY_ENDPOINT to the GraphQL API endpoint of your Shopify store. For example, if your store is my-store.myshopify.com, then your endpoint will be https://my-store.myshopify.com/api/2022-10/graphql.json.
Set SHOPIFY_ACCESS_TOKEN to the Storefront API access token provided by the app you created in the Shopify admin.
Note: This template uses version
2022-10of the Shopify Storefront API. If you are trying to use a different version, you will experience errors and unexpected behavior.
add() - Add a product to the cart, accepts an array of CartLineInput objects as an argument
remove() - Remove a product from the cart, accepts an array of merchandise IDs returned from the line item.
update() - Update a product in the cart, accepts an array of CartLineUpdateInput objects as an argument
attachBuyer() - Attach a buyer to the cart, accepts a CartBuyerIdentityInput object as an argument
detachBuyer() - Detach the buyer from the cart, accepts no arguments
cartId - The ID of the cart, returns a string
cart - The full cart object, returns a Cart object
checkoutUrl - The URL to the checkout page, returns a string
lines - The lines in the cart, returns a CartLineConnection object
linesCount - The number of lines in the cart, returns a number
subTotal - The subtotal of the cart before taxes and shipping, returns a MoneyV2 object
total - The total of the cart, returns a MoneyV2 object
discounts - An array of discounts applied to the cart, returns an array of CartDiscountCode objects
shop - The shop object, returns a Shop object
getCustomer() - Fetches the customer object of the current customer access token, accepts no arguments but requires a valid access token to be set in state
createToken() - Creates a customer access token and updates access token state, accepts a CustomerAccessTokenCreateInput object as an argument
destroyToken() - Destroys the current customer access token and sets access token state to null, accepts no arguments
login() - Creates a customer access token and sets the current customer in state, accepts email and password as an argument
logout() - Destroys the current customer access token, removes customer data from state and detaches buyer from cart with useCart().detachBuyer, accepts no arguments
accessToken - The access token of the authenticated user, returns a CustomerAccessToken object and is stored in cookies.
customer - The customer object of the authenticated user, returns a Customer object and is stored in application state.
currentToken - The current access token of the authenticated user, returns a string from the CustomerAccessToken object and is stored in application state.
isTokenExpired - Whether the current access token is expired, returns a boolean and is stored in application state.
isAuthenticated - Returns true if a token exists and is not expired, returns a boolean and is stored in application state.
Most components used within this template are all under the components directory. No third-party ui frameworks are used that may restrict creativity and enforce a specific design system.
To customize the look and feel of the components, you can easily edit them in the components directory.
Documentation for each component will be made available in the future.
This template uses file-based routing and covers most every page you would need for a basic Shopify store.
Primary dashboard for authenticated users to manage their account.
Display a collection of products based on the handle parameter in the URL.
Display a product based on the handle parameter in the URL.
Displays a blog and list of articles based on the handle parameter in the URL.
Displays an article based on the handle and blog parameters in the URL.
Displays a page based on the handle parameter in the URL.
Steps to use this template with your Shopify store will be made available in the future.
Note: Shopify is currently working on documentation for using headless storefronts with the platform. This template will be updated once the documentation is released.
- Clone this repository
- Install dependencies with
pnpm,yarnornpm - Use
pnpm run devto start the development server