A Vue Storefront Theme for Passionate Developers with larger catalogs in mind, based on the wonderful Tailwind CSS framework.

Latest tested Vue Storefront version - 1.10.3

Clone this theme into your Vue Storefront Theme root directory:

$ cd ./path/to/vue-storefront
$ cd src/themes
$ git clone [email protected]:AbsoluteWebServices/vuetique-theme.git vuetique

Open up your config/local.json file from your Vue Storefront project root and update the theme key to your cloned theme directory: vuetique

The result should look something like this:

  // ...
  "mailchimp": {
    "endpoint": "http://localhost:8080/api/ext/mailchimp-subscribe/subscribe"
  },
  "theme": "vuetique",
  "analytics": {
  // ...

You may need to run yarn from the vuetique theme directory.

Add the following line to core/build/webpack.base.config.js in postcssConfig var

require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),

The result should look something like this:

const postcssConfig =  {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
      require('postcss-flexbugs-fixes'),
      require('autoprefixer')({
        flexbox: 'no-2009',
      }),
    ]
  }
};

To make image hover function, you need to make a few changes to your Vue Storefront local.json file.

The following arrays need the "media_gallery" field added:

• productList.includeFields
• productListWithChildren.includeFields