├── .babelrc ├── .env-sample ├── .github └── probots.yml ├── .gitignore ├── .gitlab-ci.yml ├── .postcssrc.js ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── 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 └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["shopify/web", "babel-preset-env", "vue"], 3 | "plugins": ["transform-async-to-generator"] 4 | } 5 | -------------------------------------------------------------------------------- /.env-sample: -------------------------------------------------------------------------------- 1 | SLATE_STORE= 2 | 3 | 4 | SLATE_PASSWORD= 5 | 6 | 7 | SLATE_THEME_ID= 8 | 9 | 10 | SLATE_IGNORE_FILES=/config/settings_data.json 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | image: robmellett/lemp:7.2 2 | 3 | before_script: 4 | - apt update 5 | - apt install -y pngquant libpng-dev 6 | 7 | deploy: 8 | only: 9 | - master 10 | script: 11 | - yarn 12 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.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 | 3 | https://github.com/Shopify/slate 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. https://github.com/robmellett/shopify-nuxt-demo 6 | 7 | ## This is a vue starter template for slate, it is based on Shopify's starter template 8 | 9 | 10 | Thanks to [@dan-gamble](https://github.com/dan-gamble) for helping with the slate configurations 11 | 12 | Thanks to [@liron-navon](https://github.com/liron-navon) for the initial Vue.js Config 13 | 14 | This project is based off [shopify/skeleton-theme](https://github.com/shopify/skeleton-theme), checkout Slate for more information. 15 | 16 | get started 17 | ``` 18 | $ yarn create slate-theme my-new-theme robmellett/slate-vue-starter 19 | ``` 20 | 21 | 22 | ### How to work with slate for Shopify: 23 | 24 | - rename .env-sample to .env and setup your development store config. 25 | 26 | - run: `yarn start` 27 | - slate will open your localhost, just ignore that, and go to your development store. 28 | - In the development store you should have your theme loaded 29 | - Changes will hot reload in the dev store. 30 | 31 | ### Using vue in shopify 32 | 33 | - 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. 34 | 35 | You can mount components in vue/app.js 36 | 37 | ```js 38 | Vue.component('example-component', require('./components/ExampleComponent.vue').default); 39 | ``` 40 | 41 | You can render the vue template in the following manner 42 | ```html 43 | 45 | ``` 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slate-vue-starter", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Shopify Inc., Rob Mellett", 6 | "description": "A barebones, Slate compatible, starting point for developing Shopify themes with vue.", 7 | "keywords": [ 8 | "shopify", 9 | "theme", 10 | "vue" 11 | ], 12 | "license": "MIT", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/robmellett/slate-vue-starter" 16 | }, 17 | "devDependencies": { 18 | "@shopify/slate-tools": "^1.0.0-beta.14", 19 | "babel-core": "^6.26.3", 20 | "babel-loader": "^7.1.5", 21 | "babel-preset-env": "^1.7.0", 22 | "babel-preset-es2015": "^6.24.1", 23 | "babel-preset-es2016": "^6.24.1", 24 | "babel-preset-es2017": "^6.24.1", 25 | "babel-preset-shopify": "^16.6.0", 26 | "babel-preset-vue": "^2.0.2", 27 | "postcss-import": "^12.0.1", 28 | "postcss-url": "^8.0.0", 29 | "vue-loader": "^15.4.2", 30 | "vue-template-compiler": "^2.5.21" 31 | }, 32 | "scripts": { 33 | "start": "slate-tools start", 34 | "watch": "slate-tools start --skipFirstDeploy", 35 | "build": "slate-tools build", 36 | "deploy": "slate-tools build && slate-tools deploy", 37 | "zip": "slate-tools build && slate-tools zip" 38 | }, 39 | "dependencies": { 40 | "vue": "^2.5.21", 41 | "vuex": "^3.0.1", 42 | "vuex-persist": "^2.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /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 | }, 31 | plugins: [ 32 | new VueLoaderPlugin() 33 | ] 34 | }; 35 | 36 | const styleLoader = { 37 | loader: 'style-loader', 38 | options: { 39 | hmr: isDevelopment 40 | } 41 | }; 42 | 43 | const cssLoader = { 44 | loader: 'css-loader', 45 | // Enabling sourcemaps in styles when using HMR causes style-loader to inject 46 | // styles using a tag instead of