/vsf-capybara

StorefrontUI.io based theme for Vue Storefront

Primary LanguageVueMIT LicenseMIT

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: Developer's preview

✨ 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 git@github.com:DivanteLtd/vsf-capybara.git src/themes/capybara

  3. Fetch all the data:

    git submodule update --init --remote

  4. Update Vue Storefront configuration by copying local.json file from vsf-capybara to root config directory.

  5. 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/*"].

  6. Download all dependencies and start development server:

    lerna bootstrap && yarn dev

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