├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── License.txt ├── babel.config.js ├── capacitor.config.json ├── cypress.json ├── design.png ├── ionic.config.json ├── ionic.starter.json ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── assets │ ├── icon │ │ ├── favicon.png │ │ └── icon.png │ ├── img │ │ └── logo.png │ └── shapes.svg ├── index.html └── manifest.json ├── readme-ja.md ├── readme.md ├── src ├── App.vue ├── components │ ├── Header.vue │ ├── QuickActions.vue │ ├── RecentList.vue │ ├── SectionDivider.vue │ └── Tabs.vue ├── main.ts ├── router │ └── index.ts ├── shims-vue.d.ts ├── theme │ ├── media-queries.scss │ └── variables.scss └── views │ └── Home.vue ├── tests ├── e2e │ ├── .eslintrc.js │ ├── plugins │ │ └── index.js │ ├── specs │ │ └── test.js │ └── support │ │ ├── commands.js │ │ └── index.js └── unit │ └── example.spec.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-04/660ecc0c51242c702015064dcf2377a1d58cbf6c/.eslintignore -------------------------------------------------------------------------------- /.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 | '@vue/typescript/recommended' 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 2020 13 | }, 14 | rules: { 15 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'vue/no-deprecated-slot-attribute': 'off', 18 | '@typescript-eslint/no-explicit-any': 'off', 19 | }, 20 | overrides: [ 21 | { 22 | files: [ 23 | '**/__tests__/*.{j,t}s?(x)', 24 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 25 | ], 26 | env: { 27 | jest: true 28 | } 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /License.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 SIMO MAFUXWANA 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 all 13 | 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 THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /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": "my-app", 4 | "bundledWebRuntime": false, 5 | "npmClient": "npm", 6 | "webDir": "dist", 7 | "plugins": { 8 | "SplashScreen": { 9 | "launchShowDuration": 0 10 | } 11 | }, 12 | "cordova": {} 13 | } 14 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-04/660ecc0c51242c702015064dcf2377a1d58cbf6c/design.png -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "vue" 7 | } 8 | -------------------------------------------------------------------------------- /ionic.starter.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Tabs Starter", 3 | "baseref": "vue-starters", 4 | "tarignore": [ 5 | "node_modules", 6 | "package-lock.json", 7 | "www" 8 | ], 9 | "scripts": { 10 | "test": "npm run build" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /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": "ionic-vue-mobile-template-01", 3 | "description": "Hybrid app template built with vue, ionic and capacitor", 4 | "author": "Simo Mafuxwana - @dlodeprojuicer", 5 | "version": "0.2.0", 6 | "private": true, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "test:unit": "vue-cli-service test:unit", 11 | "test:e2e": "vue-cli-service test:e2e", 12 | "lint": "vue-cli-service lint" 13 | }, 14 | "dependencies": { 15 | "@capacitor/core": "^2.4.1", 16 | "@capacitor/ios": "^2.4.1", 17 | "@ionic/vue": "^5.4.0", 18 | "@ionic/vue-router": "^5.4.0", 19 | "chart.js": "^2.9.3", 20 | "core-js": "^3.6.5", 21 | "ionic-vue-form": "^1.2.2", 22 | "node-sass": "^4.14.1", 23 | "sass-loader": "^10.0.2", 24 | "vue": "3.0.0", 25 | "vue-chartjs": "^3.5.1", 26 | "vue-router": "^4.0.0-beta.9" 27 | }, 28 | "devDependencies": { 29 | "@capacitor/cli": "^2.4.1", 30 | "@types/jest": "^24.9.1", 31 | "@typescript-eslint/eslint-plugin": "^2.34.0", 32 | "@typescript-eslint/parser": "^2.34.0", 33 | "@vue/cli-plugin-babel": "^4.5.4", 34 | "@vue/cli-plugin-eslint": "^4.5.4", 35 | "@vue/cli-plugin-router": "^4.5.4", 36 | "@vue/cli-plugin-typescript": "^4.5.4", 37 | "@vue/cli-plugin-unit-jest": "^4.5.4", 38 | "@vue/cli-service": "^4.5.4", 39 | "@vue/compiler-sfc": "^3.0.0-rc.10", 40 | "@vue/eslint-config-typescript": "^5.1.0", 41 | "@vue/test-utils": "^2.0.0-beta.3", 42 | "eslint": "^6.8.0", 43 | "eslint-plugin-vue": "^7.0.0-beta.3", 44 | "typescript": "^3.9.7", 45 | "vue-jest": "^5.0.0-alpha.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-04/660ecc0c51242c702015064dcf2377a1d58cbf6c/public/assets/icon/favicon.png -------------------------------------------------------------------------------- /public/assets/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-04/660ecc0c51242c702015064dcf2377a1d58cbf6c/public/assets/icon/icon.png -------------------------------------------------------------------------------- /public/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-04/660ecc0c51242c702015064dcf2377a1d58cbf6c/public/assets/img/logo.png -------------------------------------------------------------------------------- /public/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic Vue Mobile Template 04 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Ionic App", 3 | "name": "My Ionic App", 4 | "icons": [ 5 | { 6 | "src": "assets/icon/favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "assets/icon/icon.png", 12 | "type": "image/png", 13 | "sizes": "512x512", 14 | "purpose": "maskable" 15 | } 16 | ], 17 | "start_url": ".", 18 | "display": "standalone", 19 | "theme_color": "#ffffff", 20 | "background_color": "#ffffff" 21 | } 22 | -------------------------------------------------------------------------------- /readme-ja.md: -------------------------------------------------------------------------------- 1 | ## Ionic Vue Mobile Template 04 2 | 3 | ![Netlify Status](https://api.netlify.com/api/v1/badges/61a3f498-564f-4f61-a0b3-2ed99c9ab102/deploy-status) 4 | 5 | vue-ionic ([最新版](https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/)) と ネイティブアプリにビルドするための Capacitor フレームワーク を使ったハイブリッドアプリのテンプレートです。 - これらのテンプレートは Instagram や Dribble のアプリデザインのインスピレーションページにあったものを実装しました。 6 | 7 | このテンプレートはCaptec 銀行のアプリをもとに実装しました。Captec 銀行は 南アフリカ最大級の銀行です。国内に 1000 以上の支店を持ち、個人向け銀行サービスを提供しています。このテンプレートでは、一般的な外観に焦点を当てています。 8 | 9 | [デモページ](https://ionic-vue-mobile-template-04.netlify.app) 10 | 11 | Buy Me A Coffee 12 | 13 | ## 環境を構築する 14 | ``` 15 | npm install 16 | ``` 17 | 18 | ### 開発環境でブラウザ上で起動する 19 | ``` 20 | npm run serve 21 | ``` 22 | 23 | ## デザイン 24 | ![alt text](/design.png "Logo Title Text 1") 25 | 26 | ## ネイティブアプリについて 27 | 28 | ネイティブアプリをビルドするために [Capacitor](https://capacitorjs.com/docs/getting-started) を使用しました。 29 | 30 | ### ネイティブアプリにビルドするための準備 31 | 32 | ## iOS でのテスト、ディストリビューション 33 | 1. 最新版の Xcode をダウンロードしてください。 34 | 2. `npm run build` 35 | 3. `npx cap add ios` 36 | 3. `npx cap copy` 37 | 4. `npx cap open ios` Xcode がファイルのインデックスを作成するのに数分かかります。XCode の画面上部の進捗状況に注目してください。 38 | 39 | [任意] 正常に動作するかを確認するために、画面上部の左側にある 実行ボタンをクリックしてください。もしシミュレーター上でアプリが起動します。 もし何も問題なければ、ログインしてクリックできるようになるはずです。そうでなければ、issue を作成してください🤷。確認します。 40 | 41 | *アイコンとスプラッシュ画面* - Xcode (v11.5) では、config.xml 上のアイコンをマッピングできまないので、手動で行う必要があります😞。 ルートディレクトリ上で、Resources を探し、Images.xcassets を選択します。パネルが表示され、アイコンを追加する場合はアプリアイコンを、スプラッシュ画面を追加したい場合にLaunchImages を選択できます。 42 | 43 | ## Android でのテスト、ディストリビューション 44 | 1. 最新版の Android Studio をダウンロードします。 45 | 2. `npm run build` 46 | 3. `npx cap add android` 47 | 3. `npx cap copy` 48 | 4. `npx cap open android` Android Studio がファイルのインデックスの作成に数分かかります。画面下部の進捗状況に注目してください。 49 | 50 | 5. Testing -インデックス作成完了後、緑の実行ボタンを探してください。そのボタンをクリックすると、エミュレーター上、あるいは、もし USB 接続されているなら、スマホでアプリが起動します。([エミュレーターのセットアップはこちら](https://developer.android.com/studio/run/managing-avds)) 51 | 52 | ## 公式ドキュメント 53 | - [ブログ](https://ionicframework.com/blog/announcing-ionic-vue/) 54 | - [Getting started](https://ionicframework.com/docs/vue/quickstart) 55 | - [Changelog](https://github.com/ionic-team/ionic-framework/blob/master/CHANGELOG.md) 56 | 57 | ## お問い合わせ 58 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter 59 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Ionic Vue Mobile Template 04 2 | ![Netlify Status](https://api.netlify.com/api/v1/badges/61a3f498-564f-4f61-a0b3-2ed99c9ab102/deploy-status) 3 | 4 | Hybrid mobile template built with Ionic Vue using capacitor for native builds. 5 | 6 | Template is inspired by the new Capitec Bank app. Capitec is one of the largest banks in South Africa. It provides personal banking services through its 1000-plus branches across the country. For this template the focus is on the general look and feel. 7 | 8 | [Demo](https://ionic-vue-mobile-template-04.netlify.app) 9 | 10 | ## Project setup 11 | ``` 12 | npm install 13 | ``` 14 | 15 | ### Run on the browser - development 16 | ``` 17 | npm run serve 18 | ``` 19 | 20 | ## Design 21 | ![alt text](/design.png "Logo Title Text 1") 22 | 23 | ## Native 24 | 25 | Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds 26 | 27 | ## Prepare native builds 28 | 29 | ### iOS testing and distribution 30 | 1. Download the latest Xcode 31 | 2. `npm run build` 32 | 3. `npx cap add ios` 33 | 3. `npx cap copy` 34 | 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. 35 | 36 | [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. 37 | 38 | ### Android testing and distribution 39 | 1. Download the latest Android Studio 40 | 2. `npm run build` 41 | 3. `npx cap add android` 42 | 3. `npx cap copy` 43 | 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. 44 | 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. 45 | 46 | ## Official Docs 47 | - [Getting started](https://ionicframework.com/vue) 48 | 49 | ## Resources 50 | - [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox! 51 | - [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel. 52 | - [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates. 53 | - [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. 54 | 55 | ## Affiliates 56 | 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. 57 | - [Pixeltrue](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites. 58 | - [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program. 59 | 60 | Alternatively, you can buy me a coffee Buy Me A Coffee 61 | 62 | ## Credits 63 | - [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - Documentation 64 | - [おかきょー](https://twitter.com/31415O_Kyo) - [Japanese doc translation](https://github.com/dlodeprojuicer/ionic-vue-mobile-template-01/blob/master/readme-ja.md) 65 | 66 | ## Contact 67 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter 68 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 42 | 43 | 65 | -------------------------------------------------------------------------------- /src/components/QuickActions.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 56 | 57 | -------------------------------------------------------------------------------- /src/components/RecentList.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 40 | 41 | 81 | -------------------------------------------------------------------------------- /src/components/SectionDivider.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/Tabs.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 51 | 52 | 67 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router'; 4 | 5 | import { IonicVue } from '@ionic/vue'; 6 | 7 | /* Core CSS required for Ionic components to work properly */ 8 | import '@ionic/vue/css/core.css'; 9 | 10 | /* Basic CSS for apps built with Ionic */ 11 | import '@ionic/vue/css/normalize.css'; 12 | import '@ionic/vue/css/structure.css'; 13 | import '@ionic/vue/css/typography.css'; 14 | 15 | /* Optional CSS utils that can be commented out */ 16 | import '@ionic/vue/css/padding.css'; 17 | import '@ionic/vue/css/float-elements.css'; 18 | import '@ionic/vue/css/text-alignment.css'; 19 | import '@ionic/vue/css/text-transformation.css'; 20 | import '@ionic/vue/css/flex-utils.css'; 21 | import '@ionic/vue/css/display.css'; 22 | 23 | /* Theme variables */ 24 | import './theme/variables.scss'; 25 | 26 | const app = createApp(App) 27 | .use(IonicVue) 28 | .use(router) 29 | 30 | router.isReady().then(() => { 31 | app.mount('#app'); 32 | }); -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from '@ionic/vue-router'; 2 | import { RouteRecordRaw } from 'vue-router'; 3 | import Tabs from '../components/Tabs.vue' 4 | 5 | const routes: Array = [ 6 | { 7 | path: '/', 8 | component: Tabs, 9 | children: [ 10 | { 11 | path: '', 12 | component: () => import('@/views/Home.vue') 13 | } 14 | ] 15 | } 16 | ] 17 | 18 | const router = createRouter({ 19 | history: createWebHistory(process.env.BASE_URL), 20 | routes 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { defineComponent } from 'vue' 3 | const component: ReturnType 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /src/theme/media-queries.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | ##Device = Desktops 4 | ##Screen = 1281px to higher resolution desktops 5 | */ 6 | 7 | @media (min-width: 1281px) { 8 | 9 | .not-mobile { 10 | display: block; 11 | width: 50%; 12 | text-align: center; 13 | margin: 0 auto; 14 | z-index: 9999999999; 15 | background: #fff; 16 | color: #154d75; 17 | } 18 | 19 | } 20 | 21 | /* 22 | ##Device = Laptops, Desktops 23 | ##Screen = B/w 1025px to 1280px 24 | */ 25 | 26 | @media (min-width: 1025px) and (max-width: 1280px) { 27 | 28 | .not-mobile { 29 | display: block; 30 | width: 50%; 31 | text-align: center; 32 | margin: 0 auto; 33 | z-index: 9999999999; 34 | } 35 | 36 | } 37 | 38 | /* 39 | ##Device = Tablets, Ipads (portrait) 40 | ##Screen = B/w 768px to 1024px 41 | */ 42 | 43 | @media (min-width: 768px) and (max-width: 1024px) { 44 | 45 | .not-mobile { 46 | display: block; 47 | width: 50%; 48 | text-align: center; 49 | margin: 0 auto; 50 | z-index: 9999999999; 51 | } 52 | 53 | } 54 | 55 | /* 56 | ##Device = Tablets, Ipads (landscape) 57 | ##Screen = B/w 768px to 1024px 58 | */ 59 | 60 | @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 61 | 62 | .not-mobile { 63 | display: none; 64 | } 65 | 66 | } 67 | 68 | /* 69 | ##Device = Low Resolution Tablets, Mobiles (Landscape) 70 | ##Screen = B/w 481px to 767px 71 | */ 72 | 73 | @media (min-width: 481px) and (max-width: 767px) { 74 | 75 | .not-mobile { 76 | display: none; 77 | } 78 | 79 | } 80 | 81 | /* 82 | ##Device = Most of the Smartphones Mobiles (Portrait) 83 | ##Screen = B/w 320px to 479px 84 | */ 85 | 86 | @media (min-width: 320px) and (max-width: 480px) { 87 | 88 | .not-mobile { 89 | display: none; 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | /* Ionic Variables and Theming. For more info, please see: 2 | http://ionicframework.com/docs/theming/ */ 3 | 4 | @import "./media-queries.scss"; 5 | 6 | :root { 7 | --ion-color-primary: #355724; 8 | --ion-color-primary-tint: #19ce4f; 9 | --ion-color-primary-shade: #19ce4f; 10 | 11 | --ion-color-light: #ffffff; 12 | --ion-color-medium: #e6e5e5; 13 | --ion-color-medium-tint: #777777; 14 | --ion-color-medium-shade: #777777; 15 | --ion-color-medium-contrast:#777777; 16 | --ion-background-color: #e2e9ea; 17 | color: #000; 18 | 19 | } 20 | 21 | h1 , h2 , h3 , h4 , p , a , ul li , strong , label { 22 | color: #777777; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 83 | -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'cypress' 4 | ], 5 | env: { 6 | mocha: true, 7 | 'cypress/globals': true 8 | }, 9 | rules: { 10 | strict: 'off' 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable arrow-body-style */ 2 | // https://docs.cypress.io/guides/guides/plugins-guide.html 3 | 4 | // if you need a custom webpack configuration you can uncomment the following import 5 | // and then use the `file:preprocessor` event 6 | // as explained in the cypress docs 7 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples 8 | 9 | // /* eslint-disable import/no-extraneous-dependencies, global-require */ 10 | // const webpack = require('@cypress/webpack-preprocessor') 11 | 12 | module.exports = (on, config) => { 13 | // on('file:preprocessor', webpack({ 14 | // webpackOptions: require('@vue/cli-service/webpack.config'), 15 | // watchOptions: {} 16 | // })) 17 | 18 | return Object.assign({}, config, { 19 | fixturesFolder: 'tests/e2e/fixtures', 20 | integrationFolder: 'tests/e2e/specs', 21 | screenshotsFolder: 'tests/e2e/screenshots', 22 | videosFolder: 'tests/e2e/videos', 23 | supportFile: 'tests/e2e/support/index.js' 24 | }) 25 | } 26 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe('My First Test', () => { 4 | it('Visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import HelloWorld from '@/components/HelloWorld.vue' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('renders props.msg when passed', () => { 6 | const msg = 'new message' 7 | const wrapper = shallowMount(HelloWorld, { 8 | props: { msg } 9 | }) 10 | expect(wrapper.text()).toMatch(msg) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env", 16 | "jest" 17 | ], 18 | "paths": { 19 | "@/*": [ 20 | "src/*" 21 | ] 22 | }, 23 | "lib": [ 24 | "esnext", 25 | "dom", 26 | "dom.iterable", 27 | "scripthost" 28 | ] 29 | }, 30 | "include": [ 31 | "src/**/*.ts", 32 | "src/**/*.tsx", 33 | "src/**/*.vue", 34 | "tests/**/*.ts", 35 | "tests/**/*.tsx" 36 | ], 37 | "exclude": [ 38 | "node_modules" 39 | ] 40 | } 41 | --------------------------------------------------------------------------------