├── .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 | [](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 | 
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
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 |
39 | Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 40 |
41 |21 | View All 22 |
23 |