├── .babelrc ├── .env-sample ├── .github └── probots.yml ├── .gitignore ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── generate-ssl-cert.sh ├── package-lock.json ├── package.json ├── postcss.config.js ├── slate.config.js ├── src ├── assets │ └── .gitkeep ├── config │ ├── settings_data.json │ └── settings_schema.json ├── layout │ └── theme.liquid ├── locales │ └── en.default.json ├── scripts │ ├── layout │ │ └── theme.js │ ├── sections │ │ └── .gitkeep │ └── templates │ │ └── .gitkeep ├── sections │ └── .gitkeep ├── snippets │ └── .gitkeep ├── styles │ ├── theme.scss │ └── theme.scss.liquid ├── templates │ ├── 404.liquid │ ├── article.liquid │ ├── blog.liquid │ ├── cart.liquid │ ├── collection.liquid │ ├── customers │ │ ├── account.liquid │ │ ├── activate_account.liquid │ │ ├── addresses.liquid │ │ ├── login.liquid │ │ ├── order.liquid │ │ ├── register.liquid │ │ └── reset_password.liquid │ ├── gift_card.liquid │ ├── index.liquid │ ├── list-collections.liquid │ ├── page.contact.liquid │ ├── page.liquid │ ├── password.liquid │ ├── product.liquid │ └── search.liquid └── vue │ ├── app.js │ ├── components │ └── ExampleComponent.vue │ └── store │ └── index.js ├── tailwind.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["shopify/web", "babel-preset-env", "vue"], 3 | "plugins": ["transform-async-to-generator"] 4 | } 5 | -------------------------------------------------------------------------------- /.env-sample: -------------------------------------------------------------------------------- 1 | ## Go to the store URL and generate an app 2 | ## https://{store-name}.myshopify.com/admin/apps/private 3 | 4 | # The myshopify.com URL to your Shopify store 5 | SLATE_STORE={store-name}.myshopify.com 6 | 7 | # The API password generated from a Private App 8 | SLATE_PASSWORD=some_crazy_string 9 | 10 | # Found on https://{store-name}.myshopify.com/admin/themes.xml 11 | # The ID of the theme you wish to upload files to 12 | SLATE_THEME_ID=theme_id 13 | 14 | # A list of file patterns to ignore, with each list item separated by ':' (optional) 15 | SLATE_IGNORE_FILES=config/settings_data.json 16 | 17 | # The timeout for upload theme (optional) 18 | SLATE_TIMEOUT=2m 19 | -------------------------------------------------------------------------------- /.github/probots.yml: -------------------------------------------------------------------------------- 1 | enabled: 2 | - cla 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # This file contains a list of files and folders to be ignored when 2 | # committing to a git repository. Ignored files are both Slate project 3 | # specific files as well as commonly ignored files on any project. 4 | 5 | # For more information on this .gitignore files, see GitHub's 6 | # documentation: https://help.github.com/articles/ignoring-files/ 7 | 8 | # Project # 9 | ################### 10 | node_modules 11 | dist 12 | upload 13 | deploy.log 14 | config/shopify.yml 15 | npm-debug.log 16 | .env 17 | .env.* 18 | 19 | 20 | # Compiled source # 21 | ################### 22 | *.com 23 | *.class 24 | *.dll 25 | *.exe 26 | *.o 27 | *.so 28 | 29 | # Packages # 30 | ############ 31 | # it's better to unpack these files and commit the raw source 32 | # git has its own built in compression methods 33 | *.7z 34 | *.dmg 35 | *.gz 36 | *.iso 37 | *.jar 38 | *.rar 39 | *.tar 40 | *.zip 41 | 42 | # Logs and databases # 43 | ###################### 44 | *.log 45 | *.sql 46 | *.sqlite 47 | 48 | # OS generated files # 49 | ###################### 50 | .DS_Store 51 | .DS_Store? 52 | ._* 53 | .Spotlight-V100 54 | .Trashes 55 | ehthumbs.db 56 | Thumbs.db 57 | 58 | # Custom # 59 | ###################### 60 | *.sass-cache* 61 | .cache/* 62 | _site 63 | /.idea 64 | /.vscode 65 | secrets.json 66 | .jekyll-metadata 67 | .ruby-version 68 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8.11.1" 4 | cache: 5 | yarn: true 6 | directories: 7 | - node_modules 8 | script: 9 | - yarn build 10 | notifications: 11 | email: false 12 | slack: 13 | secure: RvPL7N56A4CGjVaMdqm2Mcz9pPum7qDr1sn8lvSQvZdz0gHCA4340vhwbC+Ca7BpObE6hGGadsO6FrPVs6PXYQoISm5AW/WkSDmgKKebMxRrHqLrwmtn6Y3/jxNlIWsF5vaz8R/Teq204CGRclUMONfJHw7YbmNt7Qco2OYjU2BpRZo9DZ360nSWYFHa+Ohngh2hMHGWpQVBsYl5tayiy8l8C1/TPKU+Yo5j6rvmzAOviSd0mQtPiwWO5q7exJUJpoX0GKUK4vMFrrBSNdX9Q2LoCNH8RI9br58hHv3s2jeO06rEYV3txVhUViBrNwRY6SNv4Fy0eqFkstXJIXUy7nPVV10lkt/6vd9iRaW5Vansl4TMG4gP5wNRSiMqldxgntXT0geyHGFZezi1sO/wy5JJ7QtPzrLtR/7OpzOHfcHfEI9fvB2GH8/5Vs4vBBKT0rDf30nuhEbGlcvPWMIAnUVAMu6fmp7tdQtmYZC3pBhYAdVbnsddHF0yXcCvSSLUKOUWyxOwIqcjughFmoAzKlrDCl42MX2wohHNJr9ZDhYuu1e2eaVQ8ypg+Tkh6Ss/4lBjHrHFgF+YYoN1rTokA6ChCiTw8r8VEitrHkL/GT1vQKRvHr+f+PbbAfV4FCdLbv/k6OytMnsoPhmAQJ6tAcEbVqgiQouFaKN4Oh3PpeQ= 14 | on_success: change 15 | on_pull_requests: false 16 | template: 17 | - "%{repository_slug} (%{commit}) : %{message}" 18 | - "Build details: %{build_url}" 19 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct - from slate's original repository 2 | 3 | As contributors and maintainers of this project, and in the interest of 4 | fostering an open and welcoming community, we pledge to respect all 5 | people who contribute through reporting issues, posting feature 6 | requests, updating documentation, submitting pull requests or patches, 7 | and other activities. 8 | 9 | We are committed to making participation in this project a 10 | harassment-free experience for everyone, regardless of level of 11 | experience, gender, gender identity and expression, sexual orientation, 12 | disability, personal appearance, body size, race, ethnicity, age, 13 | religion, or nationality. 14 | 15 | Examples of unacceptable behavior by participants include: 16 | 17 | * The use of sexualized language or imagery 18 | * Personal attacks 19 | * Trolling or insulting/derogatory comments 20 | * Public or private harassment 21 | * Publishing other's private information, such as physical or electronic 22 | addresses, without explicit permission 23 | * Other unethical or unprofessional conduct 24 | 25 | Project maintainers have the right and responsibility to remove, edit, 26 | or reject comments, commits, code, wiki edits, issues, and other 27 | contributions that are not aligned to this Code of Conduct, or to ban 28 | temporarily or permanently any contributor for other behaviors that they 29 | deem inappropriate, threatening, offensive, or harmful. 30 | 31 | By adopting this Code of Conduct, project maintainers commit themselves 32 | to fairly and consistently applying these principles to every aspect of 33 | managing this project. Project maintainers who do not follow or enforce 34 | the Code of Conduct may be permanently removed from the project team. 35 | 36 | This Code of Conduct applies both within project spaces and in public 37 | spaces when an individual is representing the project or its community. 38 | 39 | Instances of abusive, harassing, or otherwise unacceptable behavior may 40 | be reported by contacting a project maintainer at . All complaints will be reviewed and investigated and will 41 | result in a response that is deemed necessary and appropriate to the 42 | circumstances. Maintainers are obligated to maintain confidentiality 43 | with regard to the reporter of an incident. 44 | 45 | This Code of Conduct is adapted from the Contributor Covenant, version 46 | 1.3.0, available from http://contributor-covenant.org/version/1/3/0/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | We ❤️ pull requests. If you'd like to fix a bug, contribute a feature or just correct a typo, please feel free to do so, as long as you follow our [Code of Conduct](https://github.com/Shopify/skeleton-theme/blob/master/CODE_OF_CONDUCT.md). 4 | 5 | If you're thinking of adding a big new feature, consider opening an issue first to discuss it to ensure it aligns to the direction of the project (and potentially save yourself some time!). 6 | 7 | ## Getting Started 8 | 9 | To start working on the codebase, first fork the repo, then clone it: 10 | 11 | ``` 12 | git clone git@github.com:your-username/skeleton-theme.git 13 | ``` 14 | 15 | _Note: replace "your-username" with your GitHub handle_ 16 | 17 | Install all package dependencies and link local packages: 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | Write some features! 24 | 25 | ## Documentation 26 | 27 | If your change affects how people use the project (i.e. adding or removing 28 | functionality, changing the return value of a function, etc), 29 | please ensure the documentation is also updated to 30 | reflect this. 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Shopify Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Note: Shopify has declared slate as End of Support 2 | https://github.com/Shopify/slate 3 | 4 | 5 | If you are still interested in using Vue with Shopify, checkout my Nuxt.js sample that wires up all the hard bits for you. 6 | https://github.com/robmellett/shopify-nuxt-demo 7 | 8 | 9 | slate-tailwind-vue 10 | ===================== 11 | 12 | ## This is a vue starter template for slate, it is based on Shopify's starter template 13 | 14 | Thanks to [@dan-gamble](https://github.com/dan-gamble) for helping with the slate configurations 15 | 16 | Thanks to [@liron-navon](https://github.com/liron-navon) for the initial Vue.js Config 17 | 18 | This project is based off [shopify/skeleton-theme](https://github.com/shopify/skeleton-theme), checkout Slate for more information. 19 | 20 | get started 21 | ``` 22 | $ yarn create slate-theme my-new-theme robmellett/shopify-tailwind-vue 23 | ``` 24 | 25 | 26 | ### How to work with slate for Shopify: 27 | 28 | - rename `.env-sample` to `.env` and setup your development store config. 29 | 30 | - build a local SSL certificate with `npm run mkcert` 31 | - run: `npm start` 32 | - slate will open your localhost, just ignore that, and go to your development store. 33 | - In the development store you should have your theme loaded 34 | - Changes will hot reload in the dev store. 35 | 36 | ### Using vue in shopify 37 | 38 | - Do notice that this is not meant to be an SPA, for that you can use storefront, vue here is purely to replace JQuery for logic operations and animations. 39 | 40 | You can mount components in `vue/app.js` 41 | 42 | ```js 43 | Vue.component('example-component', require('./components/ExampleComponent.vue').default); 44 | ``` 45 | 46 | You can render the vue template in the following manner 47 | ```html 48 | 50 | ``` 51 | -------------------------------------------------------------------------------- /generate-ssl-cert.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # See: https://shopify.github.io/slate/docs/create-a-self-signed-ssl-certificate 4 | 5 | if ! [ -x "$(command -v mkcert)" ]; then 6 | echo 'Error: mkcert is not installed. Please run "brew install mkcert"' >&2 7 | exit 1 8 | fi 9 | 10 | f=~/.localhost_ssl; 11 | ssl_crt=$f/server.crt 12 | ssl_key=$f/server.key 13 | b=$(tput bold) 14 | c=$(tput sgr0) 15 | 16 | local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}')) 17 | # local_ip=999.999.999 # (uncomment for testing) 18 | 19 | domains=( 20 | "localhost" 21 | "$local_ip" 22 | ) 23 | 24 | if [[ ! -f $ssl_crt ]]; then 25 | echo -e "\n🛑 ${b}Couldn't find a Slate SSL certificate:${c}" 26 | make_key=true 27 | elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip) ]]; then 28 | echo -e "\n🛑 ${b}Your IP Address has changed:${c}" 29 | make_key=true 30 | else 31 | echo -e "\n✅ ${b}Your IP address is still the same.${c}" 32 | fi 33 | 34 | if [[ $make_key == true ]]; then 35 | echo -e "Generating a new Slate SSL certificate...\n" 36 | count=$(( ${#domains[@]} - 1)) 37 | mkcert ${domains[@]} 38 | 39 | # Create Slate's default certificate directory, if it doesn't exist 40 | test ! -d $f && mkdir $f 41 | 42 | # It appears mkcert bases its filenames off the number of domains passed after the first one. 43 | # This script predicts that filename, so it can copy it to Slate's default location. 44 | if [[ $count = 0 ]]; then 45 | mv ./localhost.pem $ssl_crt 46 | mv ./localhost-key.pem $ssl_key 47 | else 48 | mv ./localhost+$count.pem $ssl_crt 49 | mv ./localhost+$count-key.pem $ssl_key 50 | fi 51 | fi 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slate-tailwind-vue", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Shopify Inc., Rob Mellett", 6 | "description": "A starter project for Shopify, using Vue.js and Tailwindcss 1.0", 7 | "keywords": [ 8 | "shopify", 9 | "theme", 10 | "tailwindcss", 11 | "vue" 12 | ], 13 | "scripts": { 14 | "mkcert": "bash generate-ssl-cert.sh", 15 | "start": "slate-tools start", 16 | "watch": "slate-tools start --skipFirstDeploy", 17 | "build": "slate-tools build", 18 | "deploy": "slate-tools build && slate-tools deploy", 19 | "zip": "slate-tools build && slate-tools zip", 20 | "tailwind": "postcss src/styles/theme.scss -o dist/assets/tailwind.css" 21 | }, 22 | "engines": { 23 | "node": "~11.14" 24 | }, 25 | "license": "MIT", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/robmellett/shopify-tailwind-vue.git" 29 | }, 30 | "dependencies": { 31 | "vue": "^2.6.10", 32 | "vuex": "^3.1.1", 33 | "vuex-persist": "^2.1.0" 34 | }, 35 | "devDependencies": { 36 | "@fullhuman/postcss-purgecss": "^1.2.0", 37 | "@shopify/slate-tools": "^1.0.0-beta.18", 38 | "autoprefixer": "^9.6.0", 39 | "babel-core": "^6.26.3", 40 | "babel-loader": "^7.1.5", 41 | "babel-preset-env": "^1.7.0", 42 | "babel-preset-es2015": "^6.24.1", 43 | "babel-preset-es2016": "^6.24.1", 44 | "babel-preset-es2017": "^6.24.1", 45 | "babel-preset-shopify": "^16.7.0", 46 | "babel-preset-vue": "^2.0.2", 47 | "cssnano": "^4.1.10", 48 | "postcss-cli": "^6.1.2", 49 | "postcss-import": "^12.0.1", 50 | "postcss-url": "^8.0.0", 51 | "tailwindcss": "^1.0.1", 52 | "vue-loader": "^15.7.1", 53 | "vue-template-compiler": "^2.6.10" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | const purgecss = require('@fullhuman/postcss-purgecss')({ 3 | 4 | // Specify the paths to all of the template files in your project 5 | content: [ 6 | './src/**/*.html', 7 | './src/**/*.liquid', 8 | './src/**/*.vue', 9 | './src/**/*.jsx', 10 | // etc. 11 | ], 12 | 13 | // Include any special characters you're using in this regular expression 14 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] 15 | }); 16 | 17 | module.exports = { 18 | plugins: [ 19 | require('tailwindcss'), 20 | require('autoprefixer'), 21 | ...process.env.NODE_ENV === 'production' 22 | ? [purgecss] 23 | : [] 24 | ] 25 | }; 26 | -------------------------------------------------------------------------------- /slate.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const path = require('path'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const { VueLoaderPlugin } = require('vue-loader'); 5 | const isDevelopment = process.env.NODE_ENV === 'development'; 6 | 7 | const alias = { 8 | jQuery: path.resolve('./node_modules/jquery'), 9 | $: path.resolve('./node_modules/jquery'), 10 | vue: 'vue/dist/vue.js' 11 | }; 12 | 13 | const part = { 14 | resolve: { 15 | alias, 16 | extensions: ['.js', '.css', '.json', '.vue'] 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.vue$/, 22 | loader: 'vue-loader' 23 | }, 24 | { 25 | test: /.js$/, 26 | loader: 'babel-loader', 27 | exclude: /node_modules/ 28 | }, 29 | { 30 | test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 31 | loader: 'url-loader', 32 | //include: path.join(__dirname, ''), 33 | options: { 34 | publicPath: './', 35 | limit: 10000 36 | } 37 | }, 38 | { 39 | test: /\.pcss$/, 40 | exclude: [ /node_modules/, /assets\/static/ ], 41 | use: [ 42 | { 43 | loader: MiniCssExtractPlugin.loader, 44 | options: { 45 | // you can specify a publicPath here 46 | // by default it uses publicPath in webpackOptions.output 47 | // publicPath: '../', 48 | hmr: isDevelopment, 49 | sourceMap: isDevelopment, 50 | }, 51 | }, 52 | 'style-loader', 53 | 'css-loader', 54 | 'vue-style-loader', 55 | ] 56 | } 57 | ] 58 | }, 59 | plugins: [ 60 | new VueLoaderPlugin(), 61 | new MiniCssExtractPlugin() 62 | ] 63 | }; 64 | 65 | const purgecss = require('@fullhuman/postcss-purgecss')({ 66 | // Specify the paths to all of the template files in your project 67 | content: [ 68 | './src/**/*.html', 69 | './src/**/*.liquid', 70 | './src/**/*.vue', 71 | './src/**/*.jsx' 72 | ], 73 | 74 | // Include any special characters you're using in this regular expression 75 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] 76 | }); 77 | 78 | module.exports = { 79 | 'webpack.extend': config => { 80 | return part; 81 | }, 82 | 'webpack.postcss.plugins': (config, defaultValue) => [ 83 | require('tailwindcss'), 84 | require('autoprefixer'), 85 | require('cssnano')({ 86 | preset: 'default', 87 | }), 88 | ...defaultValue, 89 | ...process.env.NODE_ENV === 'production' ? [purgecss] : [] 90 | ] 91 | }; 92 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "current": "Default", 3 | "presets": { 4 | "Default": {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "theme_info", 4 | "theme_name": "Skeleton theme", 5 | "theme_version": "1.0.0", 6 | "theme_author": "Shopify", 7 | "theme_documentation_url": "https://github.com/Shopify/skeleton-theme", 8 | "theme_support_url": "https://github.com/Shopify/skeleton-theme/issues" 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /src/layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ shop.name }} 11 | 12 | 13 | 14 | {% include 'style-tags', layout: 'theme' %} 15 | {% include 'script-tags', layout: 'theme' %} 16 | 17 | {{ content_for_header }} 18 | 19 | 20 | 21 |
22 | 23 | 24 | 26 | 27 | {{ content_for_layout }} 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /src/locales/en.default.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /src/scripts/layout/theme.js: -------------------------------------------------------------------------------- 1 | import "../../styles/theme.scss"; 2 | import "../../styles/theme.scss.liquid"; 3 | 4 | // Bootstrap Vue.js Components 5 | import "../../vue/app.js"; 6 | -------------------------------------------------------------------------------- /src/scripts/sections/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/scripts/sections/.gitkeep -------------------------------------------------------------------------------- /src/scripts/templates/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/scripts/templates/.gitkeep -------------------------------------------------------------------------------- /src/sections/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/sections/.gitkeep -------------------------------------------------------------------------------- /src/snippets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/snippets/.gitkeep -------------------------------------------------------------------------------- /src/styles/theme.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/styles/theme.scss.liquid: -------------------------------------------------------------------------------- 1 | /** 2 | * Insert your styles with Liquid below. 3 | * 4 | * Import additional stylesheets into this sheet using CSS imports: 5 | * @import url('./global/form.scss'); 6 | */ 7 | -------------------------------------------------------------------------------- /src/templates/404.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/404.liquid -------------------------------------------------------------------------------- /src/templates/article.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/article.liquid -------------------------------------------------------------------------------- /src/templates/blog.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/blog.liquid -------------------------------------------------------------------------------- /src/templates/cart.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/cart.liquid -------------------------------------------------------------------------------- /src/templates/collection.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/collection.liquid -------------------------------------------------------------------------------- /src/templates/customers/account.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/account.liquid -------------------------------------------------------------------------------- /src/templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/activate_account.liquid -------------------------------------------------------------------------------- /src/templates/customers/addresses.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/addresses.liquid -------------------------------------------------------------------------------- /src/templates/customers/login.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/login.liquid -------------------------------------------------------------------------------- /src/templates/customers/order.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/order.liquid -------------------------------------------------------------------------------- /src/templates/customers/register.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/register.liquid -------------------------------------------------------------------------------- /src/templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/customers/reset_password.liquid -------------------------------------------------------------------------------- /src/templates/gift_card.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/gift_card.liquid -------------------------------------------------------------------------------- /src/templates/index.liquid: -------------------------------------------------------------------------------- 1 | {{ content_for_index }} 2 | -------------------------------------------------------------------------------- /src/templates/list-collections.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/list-collections.liquid -------------------------------------------------------------------------------- /src/templates/page.contact.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/page.contact.liquid -------------------------------------------------------------------------------- /src/templates/page.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/page.liquid -------------------------------------------------------------------------------- /src/templates/password.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/password.liquid -------------------------------------------------------------------------------- /src/templates/product.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/product.liquid -------------------------------------------------------------------------------- /src/templates/search.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robmellett/shopify-tailwind-vue/e04a90a1a39bd07e58532f42692b265b67752dba/src/templates/search.liquid -------------------------------------------------------------------------------- /src/vue/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import store from './store'; 3 | 4 | /** 5 | * The following block of code may be used to automatically register your 6 | * Vue components. It will recursively scan this directory for the Vue 7 | * components and automatically register them with their "basename". 8 | * 9 | * Eg. ./components/ExampleComponent.vue -> 10 | */ 11 | 12 | // const files = require.context('./', true, /\.vue$/i) 13 | // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) 14 | 15 | Vue.component('example-component', require('./components/ExampleComponent.vue').default); 16 | 17 | /** 18 | * Next, we will create a fresh Vue application instance and attach it to 19 | * the page. Then, you may begin adding components to this application 20 | * or customize the JavaScript scaffolding to fit your unique needs. 21 | */ 22 | 23 | new Vue({ 24 | el: '#app', 25 | store, 26 | }); 27 | -------------------------------------------------------------------------------- /src/vue/components/ExampleComponent.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | 29 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/vue/store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex'; 2 | import Vue from 'vue'; 3 | import VuexPersistence from 'vuex-persist'; 4 | 5 | Vue.use(Vuex); 6 | 7 | const vuexLocal = new VuexPersistence({ 8 | storage: window.sessionStorage || {}, 9 | }); 10 | 11 | const store = new Vuex.Store({ 12 | state: { 13 | count: 0, 14 | }, 15 | getters: { 16 | count: (state) => state.count, 17 | }, 18 | mutations: { 19 | increment(state) { 20 | state.count++; 21 | }, 22 | }, 23 | plugins: [vuexLocal.plugin], 24 | }); 25 | 26 | export default store; 27 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: {} 4 | }, 5 | variants: {}, 6 | plugins: [] 7 | } 8 | --------------------------------------------------------------------------------