/vsf-default

Vue Storefront Default theme. Always Open Source, MIT license. Made with :green_heart: by Vue Storefront. (please consider vsf-capybara instead)

Primary LanguageVueMIT LicenseMIT

vsf-default

Vue Storefront Default theme (please consider vsf-capybara instead)

๐ŸŽ‰ Current status: Production ready

The design

This theme is basic template of typical eCommerce for a fashion industry. In the project we used Material Icons.

Vue Storefront - Annimations in sidebar menu

Vue Storefront - Annimations in featured products box

Here you can read more about the process of designing PWA for eCommerce.

The design is available in open source in the Figma file format under the URL https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source.

Browser Compatibility

  • last 2 Chrome versions
  • last 2 Firefox versions
  • last 2 Edge versions
  • modern browsers

๐Ÿ”Œ Installation

To be able to use new Default 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-default 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-default.git src/themes/default
    
  3. Fetch all the data:

    git submodule update --init --remote
    
  4. Update Vue Storefront configuration by copying local.json file from vsf-default 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 Default theme: ["src/themes/default/*"].

  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 Default theme! ๐ŸŽ‰

Troubleshooting

After git submodule add -b master git@github.com:DivanteLtd/vsf-default.git src/themes/default you see message: 'src/themes/default' already exists in the index

That is shown because directory already exist or if you removed it then you need to remove it from git index git rm -r --cached src/themes/default

The screenshots

Vue Storefront - Annimations in the sidebar cart

Vue Storefront - Annimations on producy card