├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── capacitor.config.json ├── design.jpg ├── ionic.config.json ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── assets │ ├── icon │ │ └── favicon.png │ └── images │ │ ├── logo.png │ │ ├── s1.png │ │ ├── s2.png │ │ ├── s3.png │ │ ├── s4.png │ │ ├── s5.png │ │ ├── s6.png │ │ └── tekkie.png └── index.html └── src ├── App.vue ├── components ├── Modal.vue ├── Popular.vue └── Reactions.vue ├── main.js ├── router └── index.js ├── store └── index.js ├── theme ├── media-queries.scss └── variables.css └── views ├── Catalogue.vue └── Shop.vue /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | ], 10 | parserOptions: { 11 | ecmaVersion: 2020 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'vue/no-deprecated-slot-attribute': 'off', 17 | 'vue/custom-event-name-casing': 'off' 18 | }, 19 | overrides: [ 20 | { 21 | files: [ 22 | '**/__tests__/*.{j,t}s?(x)', 23 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 24 | ], 25 | env: { 26 | jest: true 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | android 5 | ios 6 | .gradle 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | api_key 27 | config.json 28 | build.json 29 | 30 | # Cordova 31 | # /src-cordova/platforms 32 | # /src-cordova/plugins 33 | # /public/cordova.js 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Drip Footwear mobile app concept 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/ed09513f-5528-42a8-81a9-032114693398/deploy-status)](https://app.netlify.com/sites/ionic-vue-mobile-template-07/deploys) 4 | 5 | The template is based on [@TheMadute's](https://twitter.com/TheMadute/status/1357581896868364289) mobile app design concept for Drip Footwear. 6 | 7 | [Demo](https://ionic-vue-mobile-template-07.netlify.app) 8 | 9 | ## Project setup 10 | ``` 11 | npm install 12 | ``` 13 | 14 | ### Run on the browser - development 15 | ``` 16 | npm run serve 17 | ``` 18 | 19 | ### Linter 20 | ``` 21 | npm run lint 22 | ``` 23 | 24 | ## Design 25 | ![Screenshot|316x500, 75%](/design.jpg "Screenshot") 26 | 27 | ## Native 28 | 29 | Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds 30 | 31 | ## Prepare native builds 32 | 33 | ### iOS testing and distribution 34 | 1. Download the latest Xcode 35 | 2. `npm run build` 36 | 3. `npx cap add ios` 37 | 3. `npx cap copy` 38 | 4. `npx cap open ios` Xcode takes a few seconds to index the files; keep an eye at the top of Xcode's window for progress. 39 | 40 | [Not compulsory] For sanity check click on the play button in the top left. This will prepare and run the app in a simulator, if all goes well you should be able to run the app and click around. If not, create an issue 🤷 and I will have a look. 41 | 42 | ### Android testing and distribution 43 | 1. Download the latest Android Studio 44 | 2. `npm run build` 45 | 3. `npx cap add android` 46 | 3. `npx cap copy` 47 | 4. `npx cap open android` Android Studio takes a few seconds to index the files, keep an eye at the bottom of Android Studio for progress. 48 | 5. Testing - When indexing is complete, look for a green play button. Click the play button and it will launch the app in an emulator ([See here to setup Emulator](https://developer.android.com/studio/run/managing-avds)) or on the phone, if a phone is connected via USB. 49 | 50 | ## Official Docs 51 | - [Getting started](https://ionicframework.com/vue) 52 | 53 | ## Resources 54 | - [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox! 55 | - [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel. 56 | - [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates. 57 | - [Ionic Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=dlodeprojuicer.ionicvuesnippets) - This extension adds ionic-vue snippets. Quickly add ionic-vue component code by simply typing iv. The iv prefix will show a range of snippets to choose from. 58 | 59 | ## Affiliates 60 | I want to keep doing these templates for free for as long as possible. I have joined a few affiliate programs to help take care of the costs. 61 | - [Pixeltrue](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites. 62 | - [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program. 63 | 64 | Alternatively, you can buy me a coffee Buy Me A Coffee 65 | 66 | ## Credits 67 | - [@TheMadute](https://twitter.com/TheMadute/status/1357581896868364289) - Design 68 | 69 | ## Contact 70 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter 71 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "Drip Footwear", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "dist", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/design.jpg -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-blank", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "vue" 7 | } 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest' 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drip", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "test:e2e": "vue-cli-service test:e2e", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "@capacitor/android": "^2.4.2", 14 | "@capacitor/core": "2.4.2", 15 | "@capacitor/ios": "^2.4.2", 16 | "@ionic/cli": "^6.12.2", 17 | "@ionic/pwa-elements": "^3.0.1", 18 | "@ionic/vue": "^5.4.0", 19 | "@ionic/vue-router": "^5.4.0", 20 | "core-js": "^3.6.5", 21 | "global": "^4.4.0", 22 | "node-sass": "^5.0.0", 23 | "sass-loader": "^10.1.0", 24 | "vue": "^3.0.0-0", 25 | "vue-router": "^4.0.0-0", 26 | "vuex": "^4.0.0-rc.1" 27 | }, 28 | "devDependencies": { 29 | "@capacitor/cli": "2.4.2", 30 | "@vue/cli-plugin-babel": "~4.5.0", 31 | "@vue/cli-plugin-eslint": "~4.5.0", 32 | "@vue/cli-plugin-router": "~4.5.0", 33 | "@vue/cli-plugin-unit-jest": "~4.5.0", 34 | "@vue/cli-service": "~4.5.0", 35 | "@vue/compiler-sfc": "^3.0.0-0", 36 | "@vue/eslint-config-typescript": "^5.0.2", 37 | "@vue/test-utils": "^2.0.0-0", 38 | "eslint": "^6.7.2", 39 | "eslint-plugin-vue": "^7.0.0-0", 40 | "vue-jest": "^5.0.0-0" 41 | }, 42 | "description": "Ionic Vue Template 07" 43 | } 44 | -------------------------------------------------------------------------------- /public/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/icon/favicon.png -------------------------------------------------------------------------------- /public/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/logo.png -------------------------------------------------------------------------------- /public/assets/images/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s1.png -------------------------------------------------------------------------------- /public/assets/images/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s2.png -------------------------------------------------------------------------------- /public/assets/images/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s3.png -------------------------------------------------------------------------------- /public/assets/images/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s4.png -------------------------------------------------------------------------------- /public/assets/images/s5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s5.png -------------------------------------------------------------------------------- /public/assets/images/s6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/s6.png -------------------------------------------------------------------------------- /public/assets/images/tekkie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-07/f2330cecff13e250183cdee4216f7c6224d2136b/public/assets/images/tekkie.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drip Footwear | Ionic Vue Mobile Template 07 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 117 | 118 | 203 | -------------------------------------------------------------------------------- /src/components/Popular.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 60 | 61 | 117 | -------------------------------------------------------------------------------- /src/components/Reactions.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 69 | 70 | 77 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import store from "./store"; 5 | 6 | import { IonicVue } from "@ionic/vue"; 7 | 8 | /* Core CSS required for Ionic components to work properly */ 9 | import "@ionic/vue/css/core.css"; 10 | 11 | /* Basic CSS for apps built with Ionic */ 12 | import "@ionic/vue/css/normalize.css"; 13 | import "@ionic/vue/css/structure.css"; 14 | import "@ionic/vue/css/typography.css"; 15 | 16 | /* Optional CSS utils that can be commented out */ 17 | import "@ionic/vue/css/padding.css"; 18 | import "@ionic/vue/css/float-elements.css"; 19 | import "@ionic/vue/css/text-alignment.css"; 20 | import "@ionic/vue/css/text-transformation.css"; 21 | import "@ionic/vue/css/flex-utils.css"; 22 | import "@ionic/vue/css/display.css"; 23 | 24 | /* Theme variables */ 25 | import "./theme/variables.css"; 26 | 27 | const app = createApp(App) 28 | .use(IonicVue) 29 | .use(router) 30 | .use(store); 31 | 32 | router.isReady().then(() => { 33 | app.mount("#app"); 34 | }); 35 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "@ionic/vue-router"; 2 | import Shop from "../views/Shop.vue"; 3 | 4 | const routes = [ 5 | { 6 | path: "/", 7 | component: Shop, 8 | }, 9 | { 10 | path: "/catalogue", 11 | component: () => import("@/views/Catalogue.vue"), 12 | } 13 | ]; 14 | 15 | const router = createRouter({ 16 | history: createWebHistory(process.env.BASE_URL), 17 | routes, 18 | }); 19 | 20 | export default router; 21 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "vuex"; 2 | 3 | const store = createStore({ 4 | state: { 5 | popular: [ 6 | { 7 | name: "S1", 8 | image: "assets/images/s1.png" 9 | }, 10 | { 11 | name: "S2", 12 | image: "assets/images/s2.png" 13 | }, 14 | { 15 | name: "S3", 16 | image: "assets/images/s3.png" 17 | }, 18 | { 19 | name: "S2", 20 | image: "assets/images/s4.png" 21 | }, 22 | { 23 | name: "S4", 24 | image: "assets/images/s5.png" 25 | }, 26 | { 27 | name: "S1", 28 | image: "assets/images/s1.png" 29 | }, 30 | { 31 | name: "S2", 32 | image: "assets/images/s2.png" 33 | }, 34 | { 35 | name: "S3", 36 | image: "assets/images/s3.png" 37 | }, 38 | { 39 | name: "S2", 40 | image: "assets/images/s4.png" 41 | }, 42 | { 43 | name: "S4", 44 | image: "assets/images/s5.png" 45 | }, 46 | ], 47 | allProducts: [ 48 | { 49 | name: "S1", 50 | image: "assets/images/s1.png" 51 | }, 52 | { 53 | name: "S2", 54 | image: "assets/images/s2.png" 55 | }, 56 | { 57 | name: "S3", 58 | image: "assets/images/s3.png" 59 | }, 60 | { 61 | name: "S4", 62 | image: "assets/images/s5.png" 63 | }, 64 | { 65 | name: "S2", 66 | image: "assets/images/s4.png" 67 | }, 68 | { 69 | name: "S4", 70 | image: "assets/images/s5.png" 71 | }, 72 | { 73 | name: "S2", 74 | image: "assets/images/s4.png" 75 | }, 76 | { 77 | name: "S4", 78 | image: "assets/images/s5.png" 79 | }, 80 | { 81 | name: "S1", 82 | image: "assets/images/s1.png" 83 | }, 84 | { 85 | name: "S2", 86 | image: "assets/images/s2.png" 87 | }, 88 | { 89 | name: "S3", 90 | image: "assets/images/s3.png" 91 | }, 92 | { 93 | name: "S2", 94 | image: "assets/images/s4.png" 95 | }, 96 | { 97 | name: "S3", 98 | image: "assets/images/s3.png" 99 | }, 100 | { 101 | name: "S4", 102 | image: "assets/images/s5.png" 103 | }, 104 | { 105 | name: "S2", 106 | image: "assets/images/s4.png" 107 | }, 108 | { 109 | name: "S4", 110 | image: "assets/images/s5.png" 111 | }, 112 | { 113 | name: "S1", 114 | image: "assets/images/s1.png" 115 | }, 116 | { 117 | name: "S2", 118 | image: "assets/images/s2.png" 119 | }, 120 | { 121 | name: "S3", 122 | image: "assets/images/s3.png" 123 | }, 124 | { 125 | name: "S2", 126 | image: "assets/images/s4.png" 127 | }, 128 | { 129 | name: "S4", 130 | image: "assets/images/s5.png" 131 | }, 132 | { 133 | name: "S1", 134 | image: "assets/images/s1.png" 135 | }, 136 | { 137 | name: "S2", 138 | image: "assets/images/s2.png" 139 | }, 140 | { 141 | name: "S3", 142 | image: "assets/images/s3.png" 143 | }, 144 | { 145 | name: "S4", 146 | image: "assets/images/s5.png" 147 | }, 148 | { 149 | name: "S1", 150 | image: "assets/images/s1.png" 151 | }, 152 | { 153 | name: "S2", 154 | image: "assets/images/s2.png" 155 | }, 156 | ] 157 | }, 158 | getters: { 159 | popular({ popular }) { 160 | return popular; 161 | }, 162 | allProducts({ allProducts }) { 163 | return allProducts; 164 | } 165 | }, 166 | }); 167 | 168 | export default store; 169 | -------------------------------------------------------------------------------- /src/theme/media-queries.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ##Device = Desktops 3 | ##Screen = 1281px to higher resolution desktops 4 | */ 5 | 6 | @media (min-width: 1281px) { 7 | 8 | .not-mobile { 9 | display: block; 10 | width: 50%; 11 | text-align: center; 12 | margin: 0 auto; 13 | z-index: 9999999999; 14 | } 15 | 16 | } 17 | 18 | /* 19 | ##Device = Laptops, Desktops 20 | ##Screen = B/w 1025px to 1280px 21 | */ 22 | 23 | @media (min-width: 1025px) and (max-width: 1280px) { 24 | 25 | .not-mobile { 26 | display: block; 27 | width: 50%; 28 | text-align: center; 29 | margin: 0 auto; 30 | z-index: 9999999999; 31 | } 32 | 33 | } 34 | 35 | /* 36 | ##Device = Tablets, Ipads (portrait) 37 | ##Screen = B/w 768px to 1024px 38 | */ 39 | 40 | @media (min-width: 768px) and (max-width: 1024px) { 41 | 42 | .not-mobile { 43 | display: block; 44 | width: 50%; 45 | text-align: center; 46 | margin: 0 auto; 47 | z-index: 9999999999; 48 | } 49 | 50 | } 51 | 52 | /* 53 | ##Device = Tablets, Ipads (landscape) 54 | ##Screen = B/w 768px to 1024px 55 | */ 56 | 57 | @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 58 | 59 | .not-mobile { 60 | display: none; 61 | } 62 | 63 | } 64 | 65 | /* 66 | ##Device = Low Resolution Tablets, Mobiles (Landscape) 67 | ##Screen = B/w 481px to 767px 68 | */ 69 | 70 | @media (min-width: 481px) and (max-width: 767px) { 71 | 72 | .not-mobile { 73 | display: none; 74 | } 75 | 76 | } 77 | 78 | /* 79 | ##Device = Most of the Smartphones Mobiles (Portrait) 80 | ##Screen = B/w 320px to 479px 81 | */ 82 | 83 | @media (min-width: 320px) and (max-width: 480px) { 84 | 85 | .not-mobile { 86 | display: none; 87 | } 88 | 89 | } -------------------------------------------------------------------------------- /src/theme/variables.css: -------------------------------------------------------------------------------- 1 | /* Ionic Variables and Theming. For more info, please see: 2 | http://ionicframework.com/docs/theming/ */ 3 | @import "./media-queries.scss"; 4 | 5 | :root { 6 | --ion-color-primary: #FFFFFF; 7 | --ion-color-primary-tint: #FFFFFF; 8 | --ion-color-primary-shade: #FFFFFF; 9 | 10 | --ion-color-light: #ffffff; 11 | --ion-color-medium: #e6e5e5; 12 | --ion-color-medium-tint: #FFFFFF; 13 | --ion-color-medium-shade: #FFFFFF; 14 | --ion-color-medium-contrast:#FFFFFF; 15 | --ion-background-color: #F6CF27; 16 | color: #FFFFFF; 17 | 18 | --brand-primary: #F6CF27; 19 | } 20 | 21 | h1 , h2 , h3 , h4 , p , a , ul li , strong , label { 22 | color: #777777; 23 | } 24 | 25 | ion-modal { 26 | margin-top: 50%; 27 | border-radius: 50px 50px 0 0; 28 | } -------------------------------------------------------------------------------- /src/views/Catalogue.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 105 | 106 | 139 | -------------------------------------------------------------------------------- /src/views/Shop.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 102 | 103 | 143 | --------------------------------------------------------------------------------