Capybara : Storefront UI based theme for Vue Storefront

Overview

Capybara - Storefront UI based theme for Vue Storefront

New default template theme for Vue Storefront, based on Storefront UI. 90% of the Capybara code is closed in the Storefront UI library. Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors.

🔨 Current status: Production Ready

We have prepared short introduction to our coding standards and conventions we are using in Capybara theme.

🚀 See it in action

B2C Theme demo Try out our open demo and if you like it first give us some star on Github ★ and then contact us on Vue Storefront Official Slack or via [email protected].

This demo site is connected to Magento2.

📺 Video demo

See video demo!

Features

Capybara theme provides out of the box ready to use elements, like Cart, Checkout, Modals or Product-related components - to name only a few of them, which all are based on awesome Storefront UI. It provides new look & feel for the Vue Storefront with simpler development experience. You can just grab it and use it, or you can play around to re-design existing components and build something new easily.

If you're new and need some guidance feel free to visit out forum or reach anyone from the core team on our slack:

🤝 Contributing

We are currently in the early developer’s preview phase. If you would like to help us improve this beautiful theme we'd be more than happy if you want to contribute! Here you can find all the required information how to start.

🔌 Installation

To be able to use new Capybara theme in your Vue Storefront installation, you need to:

  1. Install lerna globally:

    npm install -g lerna
    

    or

    yarn global add lerna
    
  2. Configure vsf-capybara repository as a git submodule in theme path of your Vue Storefront workspace, and then track master branch:

    git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
    
  3. Fetch all the data:

    git submodule update --init --remote
    
  4. Generate local.json file from script generate-local-config.js:

    node src/themes/capybara/scripts/generate-local-config.js
    
  5. Update Vue Storefront configuration by copying local.json file from src/themes/capybara to root config directory.

  6. Update TypeScript compiler option in tsconfig.json in root directory: change value for compilerOptions.paths.theme/* from default theme ["src/themes/default/*"] to brand new Capybara theme: ["src/themes/capybara/*"].

  7. Download all dependencies and start development server:

    lerna bootstrap && yarn dev
    
  8. That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Capybara theme! 🎉

Design customization

If you want to customize the Capybara designs you can start with this amazing Figma file by Aditya Patel from HotWax Commerce.

You might also like...
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

Hybrid mobile template built with Ionic Vue using capacitor for native builds
Hybrid mobile template built with Ionic Vue using capacitor for native builds

Ionic Vue Mobile Template 03 Hybrid mobile template built with Ionic Vue using c

Shopify Foundation Theme is modern Shopify theme built with Shopify Theme Lab, Vue and Tailwind CSS.
Shopify Foundation Theme is modern Shopify theme built with Shopify Theme Lab, Vue and Tailwind CSS.

Modern Shopify theme using Shopify Theme Lab, Liquid, Vue and Tailwind CSS 🎨

🖼️ An Elegant VuePress Theme, inspired by @vue/theme.

VT An Elegant VuePress Theme, inspired by @vue/theme . 📖 Live Documentation 📚 VuePress Docs With This Theme Features Compatibility: fully compatible

VitePress theme base on @vue/theme, more practical and comprehensive.

VitePress theme base on @vue/theme, more practical and comprehensive.

Giraffe is a complete application theme, Giraffe theme built with Vuetify created by HeroUI.
Giraffe is a complete application theme, Giraffe theme built with Vuetify created by HeroUI.

📰 Free news, blogs or magazines application theme, built with Vuetify created by HeroUI.

Content-theme-blog-minimal is a standalone theme for creating your blog within minutes!

content-theme-blog-minimal content-theme-blog-minimal is a standalone theme for creating your blog within minutes! Demo: https://dumptyd.github.io/con

A VuePress 1.x theme that supports a dark theme, multiple color themes, and other useful features.
A VuePress 1.x theme that supports a dark theme, multiple color themes, and other useful features.

Yuu A VuePress theme that supports a dark theme, multiple color themes, and other useful features. Extended upon the default VuePress theme with some

Demo project for integration of Vue Storefront with Storyblok

theme My breathtaking Nuxt.js project Build Setup # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build

PrestaShop integration with Vue Storefront created by Binshops.
PrestaShop integration with Vue Storefront created by Binshops.

Vue Storefront 2 eCommerce integration with PrestaShop This repository is a PrestaShop integration for Vue Storefront 2. Beta version. Installation in

Online album storefront using Vue.js + Vuetify + node/express

Audifactory A elegant website that sells various albums. To be revamp after the release of vue 3.0 and vuetify 2.0 (2019 Q3) Instruction Ensure you ha

Vue Storefront Layer0 Example

Vue Storefront Layer0 Example This Vue Storefront app uses CommerceTools and is configured to deploy on Layer0. Demo https://layer0-docs-layer0-vue-st

 Vue Storefront 2 integration with PrestaShop
Vue Storefront 2 integration with PrestaShop

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website.

Paypal payment module for Vue Storefront
Paypal payment module for Vue Storefront

This is the PayPal Payment module for Vue Storefront PayPal Payment Magento 1 & 2 module for vue-storefront Tested with VSF 1.12.x This module is for

Stripe payment module for Vue Storefront
Stripe payment module for Vue Storefront

Stripe Payment module for Vue Storefront Stripe Payment extension for vue-storefront, by Develo Design. Installation By hand (preferred): git clone ht

A Unicorn theme for Slidev slides based on dawntraoz.com design.
A Unicorn theme for Slidev slides based on dawntraoz.com design.

slidev-theme-unicorn A Unicorn theme for Slidev. This theme is based on dawntraoz.com website design

Gridsome starter based on the Liebling theme for Ghost

Fast-track your JAMstack development & learning About this starter Gridsome starter based on the Liebling theme for Ghost. Content is added via markdo

A front-end multi-theme solution based on sass

A front-end multi-theme solution based on sass

Nuxt boilerplate with Element (custom theme) and Vue Apollo

Nuxt.js boilerplate What's included Nuxt Vue Apollo Element UI (with custom theme) PWA module Eslint (Airbnb styleguide) Build Setup # install depende

Owner
null
Mobile UI Components based on Vue & WeUI

Be Cool with Vue@^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 vue-cl[email protected],请注意。 vue@^2.3.0(for .sync modifier) webpack@^2.0 node@^7.6

Airyland 17.6k Dec 28, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 4, 2023
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

?? A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

DiDi 3.3k Jan 8, 2023
A configurable Mobile UI based on Antd Mobile and Vue

A configurable Mobile UI specification and Vue-based implementation.

ladybird-studio 60 Dec 13, 2022
A Mobile UI components based on Weui Design and Vue

A Mobile UI components based on Weui Design and Vue Features Support TS Install $ npm install weui-design-vue --save Quickstart in src/main.js import

null 23 Nov 9, 2022
NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

JDR Design FE 4.9k Jan 3, 2023
Native mobile applications using Vue and NativeScript.

Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Al

NativeScript-Vue 5k Dec 29, 2022
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Dec 28, 2022
Mobile UI elements for Vue.js

Mint UI Mobile UI elements for Vue 2.0 Homepage Documentation Installation npm i mint-ui -S # for Vue 1.x npm i [email protected] -S Usage Import all compone

饿了么前端 16.5k Dec 30, 2022
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

有赞 20.7k Jan 4, 2023