├── .DS_Store ├── .browserslistrc ├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .vscode └── extensions.json ├── capacitor.config.ts ├── cypress.config.ts ├── design.png ├── index.html ├── ionic.config.json ├── package-lock.json ├── package.json ├── public ├── .DS_Store ├── assets │ ├── icon │ │ ├── favicon.png │ │ └── icon.png │ ├── img │ │ └── b.jpg │ └── shapes.svg ├── favicon.png ├── index.html └── manifest.json ├── readme-ja.md ├── readme.md ├── src ├── .DS_Store ├── App.vue ├── components │ ├── Card.vue │ ├── Footer.vue │ ├── Footer2.vue │ ├── License.txt │ ├── OverviewHeader.vue │ └── QuickActions.vue ├── main.ts ├── router │ └── index.ts ├── theme │ ├── media-queries.scss │ └── variables.css ├── views │ ├── Home.vue │ └── ProductView.vue └── vite-env.d.ts ├── tests ├── .DS_Store ├── e2e │ ├── .DS_Store │ ├── fixtures │ │ └── example.json │ ├── specs │ │ └── test.cy.ts │ └── support │ │ ├── commands.ts │ │ └── e2e.ts └── unit │ └── example.spec.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/.DS_Store -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | Chrome >=79 2 | ChromeAndroid >=79 3 | Firefox >=70 4 | Edge >=79 5 | Safari >=14 6 | iOS >=14 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /coverage 4 | /dist 5 | /ios 6 | /android 7 | 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | pnpm-debug.log* 18 | 19 | # Editor directories and files 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | 28 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 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 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode/* 26 | !/.vscode/extensions.json 27 | /coverage 28 | /dist 29 | /node_modules 30 | /platforms 31 | /plugins 32 | /www 33 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "ionic.ionic" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /capacitor.config.ts: -------------------------------------------------------------------------------- 1 | import { CapacitorConfig } from '@capacitor/cli'; 2 | 3 | const config: CapacitorConfig = { 4 | appId: 'io.ionic.starter', 5 | appName: 'template-01', 6 | webDir: 'dist', 7 | server: { 8 | androidScheme: 'https' 9 | } 10 | }; 11 | 12 | export default config; 13 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress'; 2 | 3 | export default defineConfig({ 4 | e2e: { 5 | supportFile: 'tests/e2e/support/e2e.{js,jsx,ts,tsx}', 6 | specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}', 7 | videosFolder: 'tests/e2e/videos', 8 | screenshotsFolder: 'tests/e2e/screenshots', 9 | baseUrl: 'http://localhost:5173', 10 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 11 | setupNodeEvents(on, config) { 12 | // implement node event listeners here 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/design.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-01", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "vue-vite" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-01", 3 | "private": true, 4 | "version": "0.0.1", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview", 10 | "test:e2e": "cypress run", 11 | "test:unit": "vitest", 12 | "lint": "eslint ." 13 | }, 14 | "dependencies": { 15 | "@capacitor/app": "5.0.7", 16 | "@capacitor/core": "5.7.1", 17 | "@capacitor/haptics": "5.0.7", 18 | "@capacitor/keyboard": "5.0.8", 19 | "@capacitor/status-bar": "5.0.7", 20 | "@ionic/vue": "^7.0.0", 21 | "@ionic/vue-router": "^7.0.0", 22 | "ionicons": "^7.0.0", 23 | "vue": "^3.3.0", 24 | "vue-router": "^4.2.0" 25 | }, 26 | "devDependencies": { 27 | "@capacitor/cli": "5.7.1", 28 | "@vitejs/plugin-legacy": "^5.0.0", 29 | "@vitejs/plugin-vue": "^4.0.0", 30 | "@vue/eslint-config-typescript": "^12.0.0", 31 | "@vue/test-utils": "^2.3.0", 32 | "cypress": "^13.5.0", 33 | "eslint": "^8.35.0", 34 | "eslint-plugin-vue": "^9.9.0", 35 | "jsdom": "^22.1.0", 36 | "sass": "^1.71.1", 37 | "terser": "^5.4.0", 38 | "typescript": "^5.1.6", 39 | "vite": "^5.0.0", 40 | "vitest": "^0.34.6", 41 | "vue-tsc": "^1.0.24" 42 | }, 43 | "description": "An Ionic project" 44 | } 45 | -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/public/.DS_Store -------------------------------------------------------------------------------- /public/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/public/assets/icon/favicon.png -------------------------------------------------------------------------------- /public/assets/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/public/assets/icon/icon.png -------------------------------------------------------------------------------- /public/assets/img/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/public/assets/img/b.jpg -------------------------------------------------------------------------------- /public/assets/shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic Vue Mobile Template 02 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": "IVM Template02", 3 | "name": "My IVM Template02", 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 02 2 | ![Netlify Status](https://api.netlify.com/api/v1/badges/df00213c-224d-4db4-a4bf-5dced2e2869d/deploy-status) 3 | 4 | 5 | vue-ionic ([最新版](https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/)) と ネイティブアプリにビルドするための Capacitor フレームワーク を使ったハイブリッドアプリのテンプレートです。 - これらのテンプレートは Instagram や Dribble のアプリデザインのインスピレーションページにあったものを実装しました。 6 | 7 | [デモページ](https://ionic-vue-mobile-template-02.netlify.app) 8 | 9 | Buy Me A Coffee 10 | 11 | ## 環境を構築する 12 | ``` 13 | npm install 14 | ``` 15 | 16 | ### 開発環境でブラウザ上で起動する 17 | ``` 18 | npm run serve 19 | ``` 20 | 21 | ## デザイン 22 | ![alt text](/design.png "Logo Title Text 1") 23 | 24 | ## ネイティブアプリについて 25 | 26 | ネイティブアプリをビルドするために [Capacitor](https://capacitorjs.com/docs/getting-started) を使用しました。 27 | 28 | ### ネイティブアプリにビルドするための準備 29 | 30 | ## iOS でのテスト、ディストリビューション 31 | 1. 最新版の Xcode をダウンロードしてください。 32 | 2. `npm run build` 33 | 3. `npx cap add ios` 34 | 3. `npx cap copy` 35 | 4. `npx cap open ios` Xcode がファイルのインデックスを作成するのに数分かかります。XCode の画面上部の進捗状況に注目してください。 36 | 37 | [任意] 正常に動作するかを確認するために、画面上部の左側にある 実行ボタンをクリックしてください。もしシミュレーター上でアプリが起動します。 もし何も問題なければ、ログインしてクリックできるようになるはずです。そうでなければ、issue を作成してください🤷。確認します。 38 | 39 | *アイコンとスプラッシュ画面* - Xcode (v11.5) では、config.xml 上のアイコンをマッピングできまないので、手動で行う必要があります😞。 ルートディレクトリ上で、Resources を探し、Images.xcassets を選択します。パネルが表示され、アイコンを追加する場合はアプリアイコンを、スプラッシュ画面を追加したい場合にLaunchImages を選択できます。 40 | 41 | ## Android でのテスト、ディストリビューション 42 | 1. 最新版の Android Studio をダウンロードします。 43 | 2. `npm run build` 44 | 3. `npx cap add android` 45 | 3. `npx cap copy` 46 | 4. `npx cap open android` Android Studio がファイルのインデックスの作成に数分かかります。画面下部の進捗状況に注目してください。 47 | 48 | 5. Testing -インデックス作成完了後、緑の実行ボタンを探してください。そのボタンをクリックすると、エミュレーター上、あるいは、もし USB 接続されているなら、スマホでアプリが起動します。([エミュレーターのセットアップはこちら](https://developer.android.com/studio/run/managing-avds)) 49 | 50 | ## 公式ドキュメント 51 | - [ブログ](https://ionicframework.com/blog/announcing-ionic-vue/) 52 | - [Getting started](https://ionicframework.com/docs/vue/quickstart) 53 | - [Changelog](https://github.com/ionic-team/ionic-framework/blob/master/CHANGELOG.md) 54 | 55 | ## クレジット 56 | - [sogaso](https://www.instagram.com/sogaso/) via [We Love Web Design](https://www.instagram.com/p/B9E-9DFH2-1) - アプリデザインのインスピレーションページ 57 | - [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - ドキュメント 58 | 59 | ## お問い合わせ 60 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Ionic Vue Mobile Template 02 2 | ![Netlify Status](https://api.netlify.com/api/v1/badges/df00213c-224d-4db4-a4bf-5dced2e2869d/deploy-status) 3 | 4 | Hybrid mobile template built with Ionic Vue using capacitor for native builds. 5 | 6 | [Demo](https://ionic-vue-mobile-template-02.netlify.app) 7 | 8 | ## Project setup 9 | ``` 10 | npm install 11 | ``` 12 | 13 | ### Run on the browser - development 14 | ``` 15 | npm run serve 16 | ``` 17 | 18 | ## Design 19 | ![alt text](/design.png "Logo Title Text 1") 20 | 21 | ## Native 22 | 23 | Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds 24 | 25 | ## Prepare native builds 26 | 27 | ### iOS testing and distribution 28 | 1. Download the latest Xcode 29 | 2. `npm run build` 30 | 3. `npx cap add ios` 31 | 3. `npx cap copy` 32 | 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. 33 | 34 | [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. 35 | 36 | ### Android testing and distribution 37 | 1. Download the latest Android Studio 38 | 2. `npm run build` 39 | 3. `npx cap add android` 40 | 3. `npx cap copy` 41 | 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. 42 | 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. 43 | 44 | ## Official Docs 45 | - [Getting started](https://ionicframework.com/vue) 46 | 47 | ## Resources 48 | - [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox! 49 | - [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel. 50 | - [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates. 51 | - [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. 52 | 53 | ## Affiliates 54 | 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. 55 | - [Pixeltrue](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites. 56 | - [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program. 57 | 58 | Alternatively, you can buy me a coffee Buy Me A Coffee 59 | 60 | ## Credits 61 | - [sogaso](https://www.instagram.com/sogaso/) via [We Love Web Design](https://www.instagram.com/p/B9E-9DFH2-1) - App design inspiration 62 | - [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - Documentation 63 | - [おかきょー](https://twitter.com/31415O_Kyo) - [Japanese doc translation](https://github.com/dlodeprojuicer/ionic-vue-mobile-template-01/blob/master/readme-ja.md) 64 | 65 | ## Contact 66 | - [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/src/.DS_Store -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 50 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | 34 | 60 | -------------------------------------------------------------------------------- /src/components/Footer2.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 51 | 52 | 101 | -------------------------------------------------------------------------------- /src/components/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. -------------------------------------------------------------------------------- /src/components/OverviewHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | 53 | -------------------------------------------------------------------------------- /src/components/QuickActions.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | 34 | -------------------------------------------------------------------------------- /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.css'; 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 * as process from "process"; 4 | 5 | const routes: Array = [ 6 | { 7 | path: '/', 8 | component: () => import('@/views/Home.vue') 9 | }, 10 | { 11 | path: '/product-view', 12 | component: () => import('@/views/ProductView.vue') 13 | } 14 | ] 15 | 16 | const router = createRouter({ 17 | history: createWebHistory(process.env.BASE_URL), 18 | routes 19 | }) 20 | 21 | export default router 22 | -------------------------------------------------------------------------------- /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 | } 16 | 17 | } 18 | 19 | /* 20 | ##Device = Laptops, Desktops 21 | ##Screen = B/w 1025px to 1280px 22 | */ 23 | 24 | @media (min-width: 1025px) and (max-width: 1280px) { 25 | 26 | .not-mobile { 27 | display: block; 28 | width: 50%; 29 | text-align: center; 30 | margin: 0 auto; 31 | z-index: 9999999999; 32 | } 33 | 34 | } 35 | 36 | /* 37 | ##Device = Tablets, Ipads (portrait) 38 | ##Screen = B/w 768px to 1024px 39 | */ 40 | 41 | @media (min-width: 768px) and (max-width: 1024px) { 42 | 43 | .not-mobile { 44 | display: block; 45 | width: 50%; 46 | text-align: center; 47 | margin: 0 auto; 48 | z-index: 9999999999; 49 | } 50 | 51 | } 52 | 53 | /* 54 | ##Device = Tablets, Ipads (landscape) 55 | ##Screen = B/w 768px to 1024px 56 | */ 57 | 58 | @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 59 | 60 | .not-mobile { 61 | display: none; 62 | } 63 | 64 | } 65 | 66 | /* 67 | ##Device = Low Resolution Tablets, Mobiles (Landscape) 68 | ##Screen = B/w 481px to 767px 69 | */ 70 | 71 | @media (min-width: 481px) and (max-width: 767px) { 72 | 73 | .not-mobile { 74 | display: none; 75 | } 76 | 77 | } 78 | 79 | /* 80 | ##Device = Most of the Smartphones Mobiles (Portrait) 81 | ##Screen = B/w 320px to 479px 82 | */ 83 | 84 | @media (min-width: 320px) and (max-width: 480px) { 85 | 86 | .not-mobile { 87 | display: none; 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /src/theme/variables.css: -------------------------------------------------------------------------------- 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-background-color: #0f0f17 !important; 8 | --background: #0f0f17 !important; 9 | --padding-bottom: 130px !important; 10 | 11 | } -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | 103 | 104 | 105 | 148 | 149 | -------------------------------------------------------------------------------- /src/views/ProductView.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 72 | 73 | 142 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tests/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/tests/.DS_Store -------------------------------------------------------------------------------- /tests/e2e/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlodeprojuicer/ionic-vue-mobile-template-02/d0095860ccbfa2fed4ec88477f3f064bcb1c89ee/tests/e2e/.DS_Store -------------------------------------------------------------------------------- /tests/e2e/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.cy.ts: -------------------------------------------------------------------------------- 1 | describe('My First Test', () => { 2 | it('Visits the app root url', () => { 3 | cy.visit('/') 4 | cy.contains('#container', 'Ready to create an app?') 5 | }) 6 | }) 7 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.ts: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************** 3 | // This example commands.ts shows you how to 4 | // create various custom commands and overwrite 5 | // existing commands. 6 | // 7 | // For more comprehensive examples of custom 8 | // commands please read more here: 9 | // https://on.cypress.io/custom-commands 10 | // *********************************************** 11 | // 12 | // 13 | // -- This is a parent command -- 14 | // Cypress.Commands.add('login', (email, password) => { ... }) 15 | // 16 | // 17 | // -- This is a child command -- 18 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 19 | // 20 | // 21 | // -- This is a dual command -- 22 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 23 | // 24 | // 25 | // -- This will overwrite an existing command -- 26 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 27 | // 28 | // declare global { 29 | // namespace Cypress { 30 | // interface Chainable { 31 | // login(email: string, password: string): Chainable 32 | // drag(subject: string, options?: Partial): Chainable 33 | // dismiss(subject: string, options?: Partial): Chainable 34 | // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable 35 | // } 36 | // } 37 | // } -------------------------------------------------------------------------------- /tests/e2e/support/e2e.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/e2e.ts 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') -------------------------------------------------------------------------------- /tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import HomePage from '@/views/HomePage.vue' 3 | import { describe, expect, test } from 'vitest' 4 | 5 | describe('HomePage.vue', () => { 6 | test('renders home vue', () => { 7 | const wrapper = mount(HomePage) 8 | expect(wrapper.text()).toMatch('Ready to create an app?') 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "allowJs": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true, 15 | "noEmit": true, 16 | "paths": { 17 | "@/*": ["./src/*"] 18 | } 19 | }, 20 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 21 | "references": [{ "path": "./tsconfig.node.json" }] 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import legacy from '@vitejs/plugin-legacy' 2 | import vue from '@vitejs/plugin-vue' 3 | import path from 'path' 4 | import { defineConfig } from 'vite' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | legacy() 11 | ], 12 | resolve: { 13 | alias: { 14 | '@': path.resolve(__dirname, './src'), 15 | }, 16 | }, 17 | test: { 18 | globals: true, 19 | environment: 'jsdom' 20 | } 21 | }) 22 | --------------------------------------------------------------------------------