├── .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
│ │ └── icon.png
│ ├── images
│ │ ├── brazil.jpg
│ │ ├── hawaii.jpg
│ │ ├── jamaica.jpg
│ │ ├── lewis.png
│ │ ├── logo.png
│ │ ├── makazoli.png
│ │ ├── max.png
│ │ ├── panama.jpg
│ │ └── snoop.png
│ └── shapes.svg
└── index.html
└── src
├── App.vue
├── components
├── Reactions.vue
└── Stories.vue
├── main.js
├── router
└── index.js
├── store
└── index.js
├── theme
├── media-queries.scss
└── variables.css
└── views
├── Profile.vue
├── Tabs.vue
└── Timeline.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 | ## Ionic Vue Instagram Template
2 |
3 | 
4 |
5 | Instagram-inspired [Ionic Vue](https://ionicframework.com/vue) template.
6 |
7 | [Demo](https://ionic-vue-mobile-template-06.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 | ## Design
20 | 
21 |
22 | ## Native
23 |
24 | Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds
25 |
26 | ## Prepare native builds
27 |
28 | ### iOS testing and distribution
29 | 1. Download the latest Xcode
30 | 2. `npm run build`
31 | 3. `npx cap add ios`
32 | 3. `npx cap copy`
33 | 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.
34 |
35 | [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.
36 |
37 | ### Android testing and distribution
38 | 1. Download the latest Android Studio
39 | 2. `npm run build`
40 | 3. `npx cap add android`
41 | 3. `npx cap copy`
42 | 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.
43 | 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.
44 |
45 | ## Official Docs
46 | - [Getting started](https://ionicframework.com/vue)
47 |
48 | ## Resources
49 | - [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox!
50 | - [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel.
51 | - [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates.
52 | - [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.
53 |
54 | ## Affiliates
55 | 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.
56 | - [Pixeltrue](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites.
57 | - [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program.
58 |
59 | Alternatively, you can buy me a coffee
60 |
61 | ## Credits
62 | - [Carlos Martinez](https://github.com/cmartinezone/IonicVueExplorePlaces)
63 | - [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - Documentation
64 |
65 | ## Contact
66 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter
67 |
--------------------------------------------------------------------------------
/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": "exploreplaces",
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-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/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": "instagram",
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 06 inspired by Instagram"
43 | }
44 |
--------------------------------------------------------------------------------
/public/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/icon/favicon.png
--------------------------------------------------------------------------------
/public/assets/icon/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/icon/icon.png
--------------------------------------------------------------------------------
/public/assets/images/brazil.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/brazil.jpg
--------------------------------------------------------------------------------
/public/assets/images/hawaii.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/hawaii.jpg
--------------------------------------------------------------------------------
/public/assets/images/jamaica.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/jamaica.jpg
--------------------------------------------------------------------------------
/public/assets/images/lewis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/lewis.png
--------------------------------------------------------------------------------
/public/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/logo.png
--------------------------------------------------------------------------------
/public/assets/images/makazoli.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/makazoli.png
--------------------------------------------------------------------------------
/public/assets/images/max.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/max.png
--------------------------------------------------------------------------------
/public/assets/images/panama.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/panama.jpg
--------------------------------------------------------------------------------
/public/assets/images/snoop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-06/8c2a47f5398a6dd9dfe1f670c0c64b09604bee9a/public/assets/images/snoop.png
--------------------------------------------------------------------------------
/public/assets/shapes.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Frontend Developer - Follow me on Twitter @dlodeprojuicer
36 |