Skip to content
Vue Storefront Theme for Passionate Developers
Vue JavaScript CSS HTML
Branch: master
Clone or download
Pull request Compare This branch is even with AbsoluteWebServices:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
components
css
layouts
mixins
pages
resource
router
service-worker
store
tailwind/flexboxgrid
templates
.gitignore
App.vue
LICENSE
README.md
head.js
index.js
package.json
tailwind.config.js
webpack.config.js

README.md

vuetique-theme

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

Installing

Clone this theme into your Vue Storefront Theme root directory:

$ cd ./path/to/vue-storefront
$ cd src/themes
$ git clone git@github.com: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": {
  // ...

Tailwind Prerequisites

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',
      }),
    ]
  }
};

Image hover support

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
You can’t perform that action at this time.