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