├── .gitignore
├── README.md
├── babel.config.js
├── capacitor.config.json
├── ionic.config.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── css
    │   │   └── tailwind.css
    ├── components
    │   ├── AppHeader.vue
    │   └── SidebarMenu.vue
    ├── data.json
    ├── main.js
    ├── menus.json
    ├── router
    │   └── index.js
    └── views
    │   ├── Card.vue
    │   ├── DetailPage.vue
    │   ├── Grid.vue
    │   ├── Home.vue
    │   ├── List.vue
    │   ├── ListVirtual.vue
    │   ├── Modal.vue
    │   ├── ModalContent.vue
    │   └── Widgets.vue
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | android
 4 | /dist
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ionic 4, Vue, Tailwind CSS Demo App
 2 | 
 3 | Live example at [https://ionic4-vue-tailwindcss.netlify.com/](https://ionic4-vue-tailwindcss.netlify.com/)
 4 | 
 5 | ## Project setup
 6 | 
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | 
13 | ```
14 | npm run serve
15 | ```
16 | 
17 | ### Compiles and minifies for production
18 | 
19 | ```
20 | npm run build
21 | ```
22 | 
23 | ### Lints and fixes files
24 | 
25 | ```
26 | npm run lint
27 | ```
28 | 
29 | ### Customize configuration
30 | 
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/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": "Vue App",
4 |   "bundledWebRuntime": false,
5 |   "npmClient": "npm",
6 |   "webDir": "dist"
7 | }
8 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Vue App",
3 |   "integrations": {
4 |     "capacitor": {}
5 |   },
6 |   "type": "vue"
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "ionic:build": "vue-cli-service build",
 7 |     "ionic:serve": "vue-cli-service serve",
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "@capacitor/android": "^1.2.1",
14 |     "@capacitor/core": "1.2.1",
15 |     "@ionic/vue": "0.0.9",
16 |     "axios": "^0.19.0",
17 |     "core-js": "^3.3.2",
18 |     "tailwindcss": "^1.1.3",
19 |     "vue": "^2.6.10",
20 |     "vue-router": "^3.1.3",
21 |     "vue-virtual-scroller": "^1.0.0-rc.2"
22 |   },
23 |   "devDependencies": {
24 |     "@capacitor/cli": "1.2.1",
25 |     "@stencil/postcss": "^1.0.1",
26 |     "@types/autoprefixer": "^9.6.1",
27 |     "@vue/cli-plugin-babel": "^4.0.0",
28 |     "@vue/cli-plugin-eslint": "^4.0.0",
29 |     "@vue/cli-plugin-router": "^4.0.5",
30 |     "@vue/cli-service": "^4.0.0",
31 |     "autoprefixer": "^9.7.0",
32 |     "babel-eslint": "^10.0.3",
33 |     "eslint": "^5.16.0",
34 |     "eslint-plugin-vue": "^5.0.0",
35 |     "node-sass": "^4.13.0",
36 |     "sass-loader": "^8.0.0",
37 |     "tailwindcss-aspect-ratio": "^2.0.0",
38 |     "vue-template-compiler": "^2.6.10"
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "env": {
43 |       "node": true
44 |     },
45 |     "extends": [
46 |       "plugin:vue/essential",
47 |       "eslint:recommended"
48 |     ],
49 |     "rules": {
50 |       "no-console": "off"
51 |     },
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     }
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions"
59 |   ]
60 | }
61 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: [require('tailwindcss'), require('autoprefixer')],
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clickfwd/ionic4-vue-tailwindcss-layouts/007a0294a965bece6a5c98c05dd92d210e7f0e60/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>Ionic 4, Vue, Tailwind CSS Demo App</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but vue-app doesn't work properly without JavaScript
14 |         enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="app">
 3 | 		<ion-app>
 4 | 			<sidebar-menu />
 5 | 			<ion-vue-router main :animated="true" />
 6 | 		</ion-app>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | import SidebarMenu from '@/components/SidebarMenu';
12 | 
13 | export default {
14 | 	components: {
15 | 		SidebarMenu,
16 | 	},
17 | 	methods: {},
18 | 	mounted() {
19 | 		// console.log(this.$ionic)
20 | 	},
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-header>
 3 | 		<ion-toolbar>
 4 | 			<ion-buttons slot="start">
 5 | 				<ion-menu-button v-if="isHomeMenu" />
 6 | 				<ion-back-button v-else text="" />
 7 | 			</ion-buttons>
 8 | 			<ion-title>{{ title }}</ion-title>
 9 | 		</ion-toolbar>
10 | 	</ion-header>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 | 	props: {
16 | 		title: String,
17 | 	},
18 | 	computed: {
19 | 		isHomeMenu() {
20 | 			return this.$route.path === '/';
21 | 		},
22 | 	},
23 | };
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/components/SidebarMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-menu type="overlay" side="start">
 3 |     <ion-header>
 4 |       <ion-toolbar color="primary">
 5 |         <ion-title>Menu</ion-title>
 6 |       </ion-toolbar>
 7 |     </ion-header>
 8 |     <ion-content>
 9 |       <ion-list>
10 |         <ion-list-header>Navigate</ion-list-header>
11 |         <ion-menu-toggle auto-hide="false" v-for="p in appPages" :key="p.title">
12 |           <ion-item button @click="navigate(p.path)">
13 |             <ion-icon
14 |               slot="start"
15 |               :name="p.icon"
16 |               class="text-gray-700  w-4 h-4"
17 |             ></ion-icon>
18 |             <ion-label class="text-gray-700">
19 |               {{ p.title }}
20 |             </ion-label>
21 |           </ion-item>
22 |         </ion-menu-toggle>
23 |       </ion-list>
24 |     </ion-content>
25 |   </ion-menu>
26 | </template>
27 | 
28 | <script>
29 | import { globalStore } from '@/main.js';
30 | 
31 | export default {
32 |   data() {
33 |     return {
34 |       contentId: String,
35 |       appPages: globalStore.menus,
36 |     };
37 |   },
38 |   methods: {
39 |     navigate(url) {
40 |       if (this.$router.currentRoute.path !== url) {
41 |         this.$router.push(url);
42 |       }
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 | 	{
  3 | 		"id": "0",
  4 | 		"title": "Alejandro Escamilla",
  5 | 		"width": 5616,
  6 | 		"height": 3744,
  7 | 		"url": "https://unsplash.com/photos/yC-Yzbqy7PY",
  8 | 		"image": "https://picsum.photos/id/0/5616/3744"
  9 | 	},
 10 | 	{
 11 | 		"id": "10",
 12 | 		"title": "Paul Jarvis",
 13 | 		"width": 2500,
 14 | 		"height": 1667,
 15 | 		"url": "https://unsplash.com/photos/6J--NXulQCs",
 16 | 		"image": "https://picsum.photos/id/10/2500/1667"
 17 | 	},
 18 | 	{
 19 | 		"id": "100",
 20 | 		"title": "Tina Rataj",
 21 | 		"width": 2500,
 22 | 		"height": 1656,
 23 | 		"url": "https://unsplash.com/photos/pwaaqfoMibI",
 24 | 		"image": "https://picsum.photos/id/100/2500/1656"
 25 | 	},
 26 | 	{
 27 | 		"id": "1000",
 28 | 		"title": "Lukas Budimaier",
 29 | 		"width": 5626,
 30 | 		"height": 3635,
 31 | 		"url": "https://unsplash.com/photos/6cY-FvMlmkQ",
 32 | 		"image": "https://picsum.photos/id/1000/5626/3635"
 33 | 	},
 34 | 	{
 35 | 		"id": "1001",
 36 | 		"title": "Danielle MacInnes",
 37 | 		"width": 5616,
 38 | 		"height": 3744,
 39 | 		"url": "https://unsplash.com/photos/1DkWWN1dr-s",
 40 | 		"image": "https://picsum.photos/id/1001/5616/3744"
 41 | 	},
 42 | 	{
 43 | 		"id": "1002",
 44 | 		"title": "NASA",
 45 | 		"width": 4312,
 46 | 		"height": 2868,
 47 | 		"url": "https://unsplash.com/photos/6-jTZysYY_U",
 48 | 		"image": "https://picsum.photos/id/1002/4312/2868"
 49 | 	},
 50 | 	{
 51 | 		"id": "1003",
 52 | 		"title": "E+N Photographies",
 53 | 		"width": 1181,
 54 | 		"height": 1772,
 55 | 		"url": "https://unsplash.com/photos/GYumuBnTqKc",
 56 | 		"image": "https://picsum.photos/id/1003/1181/1772"
 57 | 	},
 58 | 	{
 59 | 		"id": "1004",
 60 | 		"title": "Greg Rakozy",
 61 | 		"width": 5616,
 62 | 		"height": 3744,
 63 | 		"url": "https://unsplash.com/photos/SSxIGsySh8o",
 64 | 		"image": "https://picsum.photos/id/1004/5616/3744"
 65 | 	},
 66 | 	{
 67 | 		"id": "1005",
 68 | 		"title": "Matthew Wiebe",
 69 | 		"width": 5760,
 70 | 		"height": 3840,
 71 | 		"url": "https://unsplash.com/photos/tBtuxtLvAZs",
 72 | 		"image": "https://picsum.photos/id/1005/5760/3840"
 73 | 	},
 74 | 	{
 75 | 		"id": "1006",
 76 | 		"title": "Vladimir Kudinov",
 77 | 		"width": 3000,
 78 | 		"height": 2000,
 79 | 		"url": "https://unsplash.com/photos/-wWRHIUklxM",
 80 | 		"image": "https://picsum.photos/id/1006/3000/2000"
 81 | 	},
 82 | 	{
 83 | 		"id": "1008",
 84 | 		"title": "Benjamin Combs",
 85 | 		"width": 5616,
 86 | 		"height": 3744,
 87 | 		"url": "https://unsplash.com/photos/5L4XAgMSno0",
 88 | 		"image": "https://picsum.photos/id/1008/5616/3744"
 89 | 	},
 90 | 	{
 91 | 		"id": "1009",
 92 | 		"title": "Christopher Campbell",
 93 | 		"width": 5000,
 94 | 		"height": 7502,
 95 | 		"url": "https://unsplash.com/photos/CMWRIzyMKZk",
 96 | 		"image": "https://picsum.photos/id/1009/5000/7502"
 97 | 	},
 98 | 	{
 99 | 		"id": "101",
100 | 		"title": "Christian Bardenhorst",
101 | 		"width": 2621,
102 | 		"height": 1747,
103 | 		"url": "https://unsplash.com/photos/8lMhzUjD1Wk",
104 | 		"image": "https://picsum.photos/id/101/2621/1747"
105 | 	},
106 | 	{
107 | 		"id": "1010",
108 | 		"title": "Samantha Sophia",
109 | 		"width": 5184,
110 | 		"height": 3456,
111 | 		"url": "https://unsplash.com/photos/NaWKMlp3tVs",
112 | 		"image": "https://picsum.photos/id/1010/5184/3456"
113 | 	},
114 | 	{
115 | 		"id": "1011",
116 | 		"title": "Roberto Nickson",
117 | 		"width": 5472,
118 | 		"height": 3648,
119 | 		"url": "https://unsplash.com/photos/7BjmDICVloE",
120 | 		"image": "https://picsum.photos/id/1011/5472/3648"
121 | 	},
122 | 	{
123 | 		"id": "1012",
124 | 		"title": "Scott Webb",
125 | 		"width": 3973,
126 | 		"height": 2639,
127 | 		"url": "https://unsplash.com/photos/uAgLGG1WBd4",
128 | 		"image": "https://picsum.photos/id/1012/3973/2639"
129 | 	},
130 | 	{
131 | 		"id": "1013",
132 | 		"title": "Cayton Heath",
133 | 		"width": 4256,
134 | 		"height": 2832,
135 | 		"url": "https://unsplash.com/photos/D8LcRLwZyPs",
136 | 		"image": "https://picsum.photos/id/1013/4256/2832"
137 | 	},
138 | 	{
139 | 		"id": "1014",
140 | 		"title": "Oscar Keys",
141 | 		"width": 6016,
142 | 		"height": 4000,
143 | 		"url": "https://unsplash.com/photos/AmPRUnRb6N0",
144 | 		"image": "https://picsum.photos/id/1014/6016/4000"
145 | 	},
146 | 	{
147 | 		"id": "1015",
148 | 		"title": "Alexey Topolyanskiy",
149 | 		"width": 6000,
150 | 		"height": 4000,
151 | 		"url": "https://unsplash.com/photos/-oWyJoSqBRM",
152 | 		"image": "https://picsum.photos/id/1015/6000/4000"
153 | 	},
154 | 	{
155 | 		"id": "1016",
156 | 		"title": "Philippe Wuyts",
157 | 		"width": 3844,
158 | 		"height": 2563,
159 | 		"url": "https://unsplash.com/photos/_h7aBovKia4",
160 | 		"image": "https://picsum.photos/id/1016/3844/2563"
161 | 	},
162 | 	{
163 | 		"id": "1018",
164 | 		"title": "Andrew Ridley",
165 | 		"width": 3914,
166 | 		"height": 2935,
167 | 		"url": "https://unsplash.com/photos/Kt5hRENuotI",
168 | 		"image": "https://picsum.photos/id/1018/3914/2935"
169 | 	},
170 | 	{
171 | 		"id": "1019",
172 | 		"title": "Patrick Fore",
173 | 		"width": 5472,
174 | 		"height": 3648,
175 | 		"url": "https://unsplash.com/photos/V6s1cmE39XM",
176 | 		"image": "https://picsum.photos/id/1019/5472/3648"
177 | 	},
178 | 	{
179 | 		"id": "102",
180 | 		"title": "Ben Moore",
181 | 		"width": 4320,
182 | 		"height": 3240,
183 | 		"url": "https://unsplash.com/photos/pJILiyPdrXI",
184 | 		"image": "https://picsum.photos/id/102/4320/3240"
185 | 	},
186 | 	{
187 | 		"id": "1020",
188 | 		"title": "Adam Willoughby-Knox",
189 | 		"width": 4288,
190 | 		"height": 2848,
191 | 		"url": "https://unsplash.com/photos/_snqARKTgoc",
192 | 		"image": "https://picsum.photos/id/1020/4288/2848"
193 | 	},
194 | 	{
195 | 		"id": "1021",
196 | 		"title": "Frances Gunn",
197 | 		"width": 2048,
198 | 		"height": 1206,
199 | 		"url": "https://unsplash.com/photos/8BmNurlVR6M",
200 | 		"image": "https://picsum.photos/id/1021/2048/1206"
201 | 	},
202 | 	{
203 | 		"id": "1022",
204 | 		"title": "Vashishtha Jogi",
205 | 		"width": 6000,
206 | 		"height": 3376,
207 | 		"url": "https://unsplash.com/photos/bClr95glx6k",
208 | 		"image": "https://picsum.photos/id/1022/6000/3376"
209 | 	},
210 | 	{
211 | 		"id": "1023",
212 | 		"title": "William Hook",
213 | 		"width": 3955,
214 | 		"height": 2094,
215 | 		"url": "https://unsplash.com/photos/93Ep1dhTd2s",
216 | 		"image": "https://picsum.photos/id/1023/3955/2094"
217 | 	},
218 | 	{
219 | 		"id": "1024",
220 | 		"title": "Мартин Тасев",
221 | 		"width": 1920,
222 | 		"height": 1280,
223 | 		"url": "https://unsplash.com/photos/7ALI0RYyq6s",
224 | 		"image": "https://picsum.photos/id/1024/1920/1280"
225 | 	},
226 | 	{
227 | 		"id": "1025",
228 | 		"title": "Matthew Wiebe",
229 | 		"width": 4951,
230 | 		"height": 3301,
231 | 		"url": "https://unsplash.com/photos/U5rMrSI7Pn4",
232 | 		"image": "https://picsum.photos/id/1025/4951/3301"
233 | 	},
234 | 	{
235 | 		"id": "1026",
236 | 		"title": "Dmitrii Vaccinium",
237 | 		"width": 4621,
238 | 		"height": 3070,
239 | 		"url": "https://unsplash.com/photos/Q47eNv_UvfM",
240 | 		"image": "https://picsum.photos/id/1026/4621/3070"
241 | 	},
242 | 	{
243 | 		"id": "1027",
244 | 		"title": "Roksolana Zasiadko",
245 | 		"width": 2848,
246 | 		"height": 4272,
247 | 		"url": "https://unsplash.com/photos/LyeduBb2Auk",
248 | 		"image": "https://picsum.photos/id/1027/2848/4272"
249 | 	},
250 | 	{
251 | 		"id": "1028",
252 | 		"title": "Dikaseva",
253 | 		"width": 5184,
254 | 		"height": 3456,
255 | 		"url": "https://unsplash.com/photos/zvf7cZ0PC20",
256 | 		"image": "https://picsum.photos/id/1028/5184/3456"
257 | 	},
258 | 	{
259 | 		"id": "1029",
260 | 		"title": "freddie marriage",
261 | 		"width": 4887,
262 | 		"height": 2759,
263 | 		"url": "https://unsplash.com/photos/utwYoEu9SU8",
264 | 		"image": "https://picsum.photos/id/1029/4887/2759"
265 | 	},
266 | 	{
267 | 		"id": "103",
268 | 		"title": "Ilham Rahmansyah",
269 | 		"width": 2592,
270 | 		"height": 1936,
271 | 		"url": "https://unsplash.com/photos/DwTZwZYi9Ww",
272 | 		"image": "https://picsum.photos/id/103/2592/1936"
273 | 	},
274 | 	{
275 | 		"id": "1031",
276 | 		"title": "Mike Wilson",
277 | 		"width": 5446,
278 | 		"height": 3063,
279 | 		"url": "https://unsplash.com/photos/rM7B4DheQc0",
280 | 		"image": "https://picsum.photos/id/1031/5446/3063"
281 | 	},
282 | 	{
283 | 		"id": "1032",
284 | 		"title": "NASA",
285 | 		"width": 2880,
286 | 		"height": 1800,
287 | 		"url": "https://unsplash.com/photos/E7q00J_8N7A",
288 | 		"image": "https://picsum.photos/id/1032/2880/1800"
289 | 	},
290 | 	{
291 | 		"id": "1033",
292 | 		"title": "Erez Attias",
293 | 		"width": 2048,
294 | 		"height": 1365,
295 | 		"url": "https://unsplash.com/photos/KqVHRmHVwwM",
296 | 		"image": "https://picsum.photos/id/1033/2048/1365"
297 | 	},
298 | 	{
299 | 		"id": "1035",
300 | 		"title": "Jared Erondu",
301 | 		"width": 5854,
302 | 		"height": 3903,
303 | 		"url": "https://unsplash.com/photos/j4PaE7E2_Ws",
304 | 		"image": "https://picsum.photos/id/1035/5854/3903"
305 | 	},
306 | 	{
307 | 		"id": "1036",
308 | 		"title": "Wolfgang Lutz",
309 | 		"width": 4608,
310 | 		"height": 3072,
311 | 		"url": "https://unsplash.com/photos/yOujaSETXlo",
312 | 		"image": "https://picsum.photos/id/1036/4608/3072"
313 | 	},
314 | 	{
315 | 		"id": "1037",
316 | 		"title": "Jordan McQueen",
317 | 		"width": 5760,
318 | 		"height": 3840,
319 | 		"url": "https://unsplash.com/photos/93g2k8D1Mi8",
320 | 		"image": "https://picsum.photos/id/1037/5760/3840"
321 | 	},
322 | 	{
323 | 		"id": "1038",
324 | 		"title": "Marcelo Quinan",
325 | 		"width": 3914,
326 | 		"height": 5863,
327 | 		"url": "https://unsplash.com/photos/upywS5QFwr8",
328 | 		"image": "https://picsum.photos/id/1038/3914/5863"
329 | 	},
330 | 	{
331 | 		"id": "1039",
332 | 		"title": "Andrew Coelho",
333 | 		"width": 6945,
334 | 		"height": 4635,
335 | 		"url": "https://unsplash.com/photos/VB-w_3dnyvI",
336 | 		"image": "https://picsum.photos/id/1039/6945/4635"
337 | 	},
338 | 	{
339 | 		"id": "104",
340 | 		"title": "Dyaa Eldin",
341 | 		"width": 3840,
342 | 		"height": 2160,
343 | 		"url": "https://unsplash.com/photos/2fl-ocJ5MOA",
344 | 		"image": "https://picsum.photos/id/104/3840/2160"
345 | 	},
346 | 	{
347 | 		"id": "1040",
348 | 		"title": "Rachel Davis",
349 | 		"width": 4496,
350 | 		"height": 3000,
351 | 		"url": "https://unsplash.com/photos/tn2rBnvIl9I",
352 | 		"image": "https://picsum.photos/id/1040/4496/3000"
353 | 	},
354 | 	{
355 | 		"id": "1041",
356 | 		"title": "Tim Marshall",
357 | 		"width": 5184,
358 | 		"height": 2916,
359 | 		"url": "https://unsplash.com/photos/yEOCA6oiVqg",
360 | 		"image": "https://picsum.photos/id/1041/5184/2916"
361 | 	},
362 | 	{
363 | 		"id": "1042",
364 | 		"title": "Jeremy Thomas",
365 | 		"width": 3456,
366 | 		"height": 5184,
367 | 		"url": "https://unsplash.com/photos/rMmibFe4czY",
368 | 		"image": "https://picsum.photos/id/1042/3456/5184"
369 | 	},
370 | 	{
371 | 		"id": "1043",
372 | 		"title": "Christian Joudrey",
373 | 		"width": 5184,
374 | 		"height": 3456,
375 | 		"url": "https://unsplash.com/photos/mWRR1xj95hg",
376 | 		"image": "https://picsum.photos/id/1043/5184/3456"
377 | 	},
378 | 	{
379 | 		"id": "1044",
380 | 		"title": "Steve Carter",
381 | 		"width": 4032,
382 | 		"height": 2268,
383 | 		"url": "https://unsplash.com/photos/Ixp4YhCKZkI",
384 | 		"image": "https://picsum.photos/id/1044/4032/2268"
385 | 	},
386 | 	{
387 | 		"id": "1045",
388 | 		"title": "Aleksandra Boguslawska",
389 | 		"width": 3936,
390 | 		"height": 2624,
391 | 		"url": "https://unsplash.com/photos/USOu_Ob9rxo",
392 | 		"image": "https://picsum.photos/id/1045/3936/2624"
393 | 	},
394 | 	{
395 | 		"id": "1047",
396 | 		"title": "sergee bee",
397 | 		"width": 3264,
398 | 		"height": 2448,
399 | 		"url": "https://unsplash.com/photos/bIQiMWxX_WU",
400 | 		"image": "https://picsum.photos/id/1047/3264/2448"
401 | 	},
402 | 	{
403 | 		"id": "1048",
404 | 		"title": "Anthony DELANOIX",
405 | 		"width": 5616,
406 | 		"height": 3744,
407 | 		"url": "https://unsplash.com/photos/b5POxb2aL9o",
408 | 		"image": "https://picsum.photos/id/1048/5616/3744"
409 | 	},
410 | 	{
411 | 		"id": "1049",
412 | 		"title": "Rosan Harmens",
413 | 		"width": 3900,
414 | 		"height": 3120,
415 | 		"url": "https://unsplash.com/photos/Sd8O2SgKDJA",
416 | 		"image": "https://picsum.photos/id/1049/3900/3120"
417 | 	},
418 | 	{
419 | 		"id": "1050",
420 | 		"title": "Joseph Barrientos",
421 | 		"width": 6000,
422 | 		"height": 4000,
423 | 		"url": "https://unsplash.com/photos/xcC5ozHk_N8",
424 | 		"image": "https://picsum.photos/id/1050/6000/4000"
425 | 	},
426 | 	{
427 | 		"id": "1051",
428 | 		"title": "Ales Krivec",
429 | 		"width": 4928,
430 | 		"height": 3264,
431 | 		"url": "https://unsplash.com/photos/HkTMcmlMOUQ",
432 | 		"image": "https://picsum.photos/id/1051/4928/3264"
433 | 	},
434 | 	{
435 | 		"id": "1052",
436 | 		"title": "Annie Spratt",
437 | 		"width": 4000,
438 | 		"height": 2667,
439 | 		"url": "https://unsplash.com/photos/x8R2oSWZRSE",
440 | 		"image": "https://picsum.photos/id/1052/4000/2667"
441 | 	},
442 | 	{
443 | 		"id": "1053",
444 | 		"title": "Anna Popović",
445 | 		"width": 3596,
446 | 		"height": 2393,
447 | 		"url": "https://unsplash.com/photos/x7HJdJZqplo",
448 | 		"image": "https://picsum.photos/id/1053/3596/2393"
449 | 	},
450 | 	{
451 | 		"id": "1054",
452 | 		"title": "Sérgio Rola",
453 | 		"width": 3079,
454 | 		"height": 1733,
455 | 		"url": "https://unsplash.com/photos/B1amIgaNkwA",
456 | 		"image": "https://picsum.photos/id/1054/3079/1733"
457 | 	},
458 | 	{
459 | 		"id": "1055",
460 | 		"title": "Neil Thomas",
461 | 		"width": 5472,
462 | 		"height": 3648,
463 | 		"url": "https://unsplash.com/photos/12rzbJhQ89E",
464 | 		"image": "https://picsum.photos/id/1055/5472/3648"
465 | 	},
466 | 	{
467 | 		"id": "1056",
468 | 		"title": "Susanne Feldt",
469 | 		"width": 3988,
470 | 		"height": 2720,
471 | 		"url": "https://unsplash.com/photos/SIoHky3TPeo",
472 | 		"image": "https://picsum.photos/id/1056/3988/2720"
473 | 	},
474 | 	{
475 | 		"id": "1057",
476 | 		"title": "Stefan Kunze",
477 | 		"width": 6016,
478 | 		"height": 4016,
479 | 		"url": "https://unsplash.com/photos/_SmZSuZwkHg",
480 | 		"image": "https://picsum.photos/id/1057/6016/4016"
481 | 	},
482 | 	{
483 | 		"id": "1058",
484 | 		"title": "Liane Metzler",
485 | 		"width": 4608,
486 | 		"height": 3072,
487 | 		"url": "https://unsplash.com/photos/DDp-gC81V0w",
488 | 		"image": "https://picsum.photos/id/1058/4608/3072"
489 | 	},
490 | 	{
491 | 		"id": "1059",
492 | 		"title": "Clark Street Mercantile",
493 | 		"width": 7360,
494 | 		"height": 4912,
495 | 		"url": "https://unsplash.com/photos/vC-GqGbakJo",
496 | 		"image": "https://picsum.photos/id/1059/7360/4912"
497 | 	},
498 | 	{
499 | 		"id": "106",
500 | 		"title": "Arvee Marie",
501 | 		"width": 2592,
502 | 		"height": 1728,
503 | 		"url": "https://unsplash.com/photos/YnfGtpt2gf4",
504 | 		"image": "https://picsum.photos/id/106/2592/1728"
505 | 	},
506 | 	{
507 | 		"id": "1060",
508 | 		"title": "Karl Fredrickson",
509 | 		"width": 5598,
510 | 		"height": 3732,
511 | 		"url": "https://unsplash.com/photos/TYIzeCiZ_60",
512 | 		"image": "https://picsum.photos/id/1060/5598/3732"
513 | 	},
514 | 	{
515 | 		"id": "1061",
516 | 		"title": "Rob Bye",
517 | 		"width": 3264,
518 | 		"height": 2448,
519 | 		"url": "https://unsplash.com/photos/Kc7xqFTtcc4",
520 | 		"image": "https://picsum.photos/id/1061/3264/2448"
521 | 	},
522 | 	{
523 | 		"id": "1062",
524 | 		"title": "Matthew Wiebe",
525 | 		"width": 5092,
526 | 		"height": 3395,
527 | 		"url": "https://unsplash.com/photos/2Ts5HnA67k8",
528 | 		"image": "https://picsum.photos/id/1062/5092/3395"
529 | 	},
530 | 	{
531 | 		"id": "1063",
532 | 		"title": "Alexandre Perotto",
533 | 		"width": 4867,
534 | 		"height": 3215,
535 | 		"url": "https://unsplash.com/photos/sai-x7brics",
536 | 		"image": "https://picsum.photos/id/1063/4867/3215"
537 | 	},
538 | 	{
539 | 		"id": "1064",
540 | 		"title": "Olivier Miche",
541 | 		"width": 4236,
542 | 		"height": 2819,
543 | 		"url": "https://unsplash.com/photos/iIg4F2IWbTM",
544 | 		"image": "https://picsum.photos/id/1064/4236/2819"
545 | 	},
546 | 	{
547 | 		"id": "1065",
548 | 		"title": "Bertrand Zuchuat",
549 | 		"width": 3744,
550 | 		"height": 5616,
551 | 		"url": "https://unsplash.com/photos/Uax2bg5EizU",
552 | 		"image": "https://picsum.photos/id/1065/3744/5616"
553 | 	},
554 | 	{
555 | 		"id": "1066",
556 | 		"title": "Giu Vicente",
557 | 		"width": 2144,
558 | 		"height": 1424,
559 | 		"url": "https://unsplash.com/photos/Bi4szXGcCAM",
560 | 		"image": "https://picsum.photos/id/1066/2144/1424"
561 | 	},
562 | 	{
563 | 		"id": "1067",
564 | 		"title": "Kevin Young",
565 | 		"width": 5760,
566 | 		"height": 3840,
567 | 		"url": "https://unsplash.com/photos/-icmOdYWXuQ",
568 | 		"image": "https://picsum.photos/id/1067/5760/3840"
569 | 	},
570 | 	{
571 | 		"id": "1068",
572 | 		"title": "Padurariu Alexandru",
573 | 		"width": 7117,
574 | 		"height": 4090,
575 | 		"url": "https://unsplash.com/photos/iNmouRApXYM",
576 | 		"image": "https://picsum.photos/id/1068/7117/4090"
577 | 	},
578 | 	{
579 | 		"id": "1069",
580 | 		"title": "Marat Gilyadzinov",
581 | 		"width": 3500,
582 | 		"height": 2333,
583 | 		"url": "https://unsplash.com/photos/wpTWYBll4_w",
584 | 		"image": "https://picsum.photos/id/1069/3500/2333"
585 | 	},
586 | 	{
587 | 		"id": "107",
588 | 		"title": "Lukas Schweizer",
589 | 		"width": 5760,
590 | 		"height": 3840,
591 | 		"url": "https://unsplash.com/photos/9VWOr22LhVI",
592 | 		"image": "https://picsum.photos/id/107/5760/3840"
593 | 	},
594 | 	{
595 | 		"id": "1070",
596 | 		"title": "Sean Stratton",
597 | 		"width": 5472,
598 | 		"height": 3648,
599 | 		"url": "https://unsplash.com/photos/3I5j50pIXvU",
600 | 		"image": "https://picsum.photos/id/1070/5472/3648"
601 | 	},
602 | 	{
603 | 		"id": "1071",
604 | 		"title": "Tim Stief",
605 | 		"width": 3000,
606 | 		"height": 1996,
607 | 		"url": "https://unsplash.com/photos/uzBiLWpjQEQ",
608 | 		"image": "https://picsum.photos/id/1071/3000/1996"
609 | 	},
610 | 	{
611 | 		"id": "1072",
612 | 		"title": "jamie mink",
613 | 		"width": 3872,
614 | 		"height": 2592,
615 | 		"url": "https://unsplash.com/photos/5Qwz2KyfIBE",
616 | 		"image": "https://picsum.photos/id/1072/3872/2592"
617 | 	},
618 | 	{
619 | 		"id": "1073",
620 | 		"title": "Patrick Tomasso",
621 | 		"width": 5472,
622 | 		"height": 3648,
623 | 		"url": "https://unsplash.com/photos/Oaqk7qqNh_c",
624 | 		"image": "https://picsum.photos/id/1073/5472/3648"
625 | 	},
626 | 	{
627 | 		"id": "1074",
628 | 		"title": "Samuel Scrimshaw",
629 | 		"width": 5472,
630 | 		"height": 3648,
631 | 		"url": "https://unsplash.com/photos/sseiVD2XsOk",
632 | 		"image": "https://picsum.photos/id/1074/5472/3648"
633 | 	},
634 | 	{
635 | 		"id": "1075",
636 | 		"title": "Verne Ho",
637 | 		"width": 4858,
638 | 		"height": 3239,
639 | 		"url": "https://unsplash.com/photos/dccIfU1V1VU",
640 | 		"image": "https://picsum.photos/id/1075/4858/3239"
641 | 	},
642 | 	{
643 | 		"id": "1076",
644 | 		"title": "Samuel Zeller",
645 | 		"width": 4835,
646 | 		"height": 3223,
647 | 		"url": "https://unsplash.com/photos/WlD3vixTVUg",
648 | 		"image": "https://picsum.photos/id/1076/4835/3223"
649 | 	},
650 | 	{
651 | 		"id": "1077",
652 | 		"title": "Maico Amorim",
653 | 		"width": 3000,
654 | 		"height": 1995,
655 | 		"url": "https://unsplash.com/photos/SJWPKMb9u-k",
656 | 		"image": "https://picsum.photos/id/1077/3000/1995"
657 | 	},
658 | 	{
659 | 		"id": "1078",
660 | 		"title": "Vladimir Kudinov",
661 | 		"width": 3000,
662 | 		"height": 2000,
663 | 		"url": "https://unsplash.com/photos/KBX9XHk266s",
664 | 		"image": "https://picsum.photos/id/1078/3000/2000"
665 | 	},
666 | 	{
667 | 		"id": "1079",
668 | 		"title": "Kamesh Vedula",
669 | 		"width": 4496,
670 | 		"height": 3000,
671 | 		"url": "https://unsplash.com/photos/ISL7czxIP-k",
672 | 		"image": "https://picsum.photos/id/1079/4496/3000"
673 | 	},
674 | 	{
675 | 		"id": "108",
676 | 		"title": "Florian Klauer",
677 | 		"width": 2000,
678 | 		"height": 1333,
679 | 		"url": "https://unsplash.com/photos/t1mqA3V3-7g",
680 | 		"image": "https://picsum.photos/id/108/2000/1333"
681 | 	},
682 | 	{
683 | 		"id": "1080",
684 | 		"title": "veeterzy",
685 | 		"width": 6858,
686 | 		"height": 4574,
687 | 		"url": "https://unsplash.com/photos/OJJIaFZOeX4",
688 | 		"image": "https://picsum.photos/id/1080/6858/4574"
689 | 	},
690 | 	{
691 | 		"id": "1081",
692 | 		"title": "Julien Moreau",
693 | 		"width": 5512,
694 | 		"height": 3708,
695 | 		"url": "https://unsplash.com/photos/688Fna1pwOQ",
696 | 		"image": "https://picsum.photos/id/1081/5512/3708"
697 | 	},
698 | 	{
699 | 		"id": "1082",
700 | 		"title": "Lukas Budimaier",
701 | 		"width": 5416,
702 | 		"height": 3611,
703 | 		"url": "https://unsplash.com/photos/JzkgpML_8XI",
704 | 		"image": "https://picsum.photos/id/1082/5416/3611"
705 | 	},
706 | 	{
707 | 		"id": "1083",
708 | 		"title": "Sweet Ice Cream Photography",
709 | 		"width": 5472,
710 | 		"height": 3648,
711 | 		"url": "https://unsplash.com/photos/fwsvUxNgLRs",
712 | 		"image": "https://picsum.photos/id/1083/5472/3648"
713 | 	},
714 | 	{
715 | 		"id": "1084",
716 | 		"title": "Jay Ruzesky",
717 | 		"width": 4579,
718 | 		"height": 3271,
719 | 		"url": "https://unsplash.com/photos/h13Y8vyIXNU",
720 | 		"image": "https://picsum.photos/id/1084/4579/3271"
721 | 	},
722 | 	{
723 | 		"id": "109",
724 | 		"title": "Zwaddi",
725 | 		"width": 4287,
726 | 		"height": 2392,
727 | 		"url": "https://unsplash.com/photos/YvYBOSiBJE8",
728 | 		"image": "https://picsum.photos/id/109/4287/2392"
729 | 	},
730 | 	{
731 | 		"id": "11",
732 | 		"title": "Paul Jarvis",
733 | 		"width": 2500,
734 | 		"height": 1667,
735 | 		"url": "https://unsplash.com/photos/Cm7oKel-X2Q",
736 | 		"image": "https://picsum.photos/id/11/2500/1667"
737 | 	},
738 | 	{
739 | 		"id": "110",
740 | 		"title": "Kenneth Thewissen",
741 | 		"width": 5616,
742 | 		"height": 3744,
743 | 		"url": "https://unsplash.com/photos/D76DklsG-5U",
744 | 		"image": "https://picsum.photos/id/110/5616/3744"
745 | 	},
746 | 	{
747 | 		"id": "111",
748 | 		"title": "Gabe Rodriguez",
749 | 		"width": 4400,
750 | 		"height": 2656,
751 | 		"url": "https://unsplash.com/photos/eLUegVAjN7s",
752 | 		"image": "https://picsum.photos/id/111/4400/2656"
753 | 	},
754 | 	{
755 | 		"id": "112",
756 | 		"title": "Zugr",
757 | 		"width": 4200,
758 | 		"height": 2800,
759 | 		"url": "https://unsplash.com/photos/kmF_Aq8gkp0",
760 | 		"image": "https://picsum.photos/id/112/4200/2800"
761 | 	},
762 | 	{
763 | 		"id": "113",
764 | 		"title": "Zugr",
765 | 		"width": 4168,
766 | 		"height": 2464,
767 | 		"url": "https://unsplash.com/photos/yZf1quatKCA",
768 | 		"image": "https://picsum.photos/id/113/4168/2464"
769 | 	},
770 | 	{
771 | 		"id": "114",
772 | 		"title": "Brian Gonzalez",
773 | 		"width": 3264,
774 | 		"height": 2448,
775 | 		"url": "https://unsplash.com/photos/llYg8Ni43fc",
776 | 		"image": "https://picsum.photos/id/114/3264/2448"
777 | 	},
778 | 	{
779 | 		"id": "115",
780 | 		"title": "Christian Hebell",
781 | 		"width": 1500,
782 | 		"height": 1000,
783 | 		"url": "https://unsplash.com/photos/A6S-q3D67Ss",
784 | 		"image": "https://picsum.photos/id/115/1500/1000"
785 | 	},
786 | 	{
787 | 		"id": "116",
788 | 		"title": "Anton Sulsky",
789 | 		"width": 3504,
790 | 		"height": 2336,
791 | 		"url": "https://unsplash.com/photos/YcfCXxo7rpc",
792 | 		"image": "https://picsum.photos/id/116/3504/2336"
793 | 	}
794 | ]
795 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import Ionic from '@ionic/vue';
 5 | import '@ionic/core/css/ionic.bundle.css';
 6 | import '@/assets/css/tailwind.css';
 7 | import { addIcons } from 'ionicons';
 8 | import items from '@/data.json';
 9 | import menus from '@/menus.json';
10 | import {
11 | 	menu,
12 | 	home,
13 | 	close,
14 | 	grid,
15 | 	list,
16 | 	image,
17 | 	images,
18 | 	albums,
19 | } from 'ionicons/icons';
20 | addIcons({
21 | 	'ios-menu': menu.ios,
22 | 	'md-menu': menu.md,
23 | 	'ios-home': home.ios,
24 | 	'md-home': home.md,
25 | 	'ios-close': close.ios,
26 | 	'md-close': close.md,
27 | 	'ios-grid': grid.ios,
28 | 	'md-grid': grid.md,
29 | 	'ios-list': list.ios,
30 | 	'md-list': list.md,
31 | 	'ios-image': image.ios,
32 | 	'md-image': image.md,
33 | 	'ios-images': images.ios,
34 | 	'md-images': images.md,
35 | 	'ios-albums': albums.ios,
36 | 	'md-albums': albums.md,
37 | });
38 | 
39 | // import { Plugins, StatusBarStyle } from '@capacitor/core';
40 | import { Plugins } from '@capacitor/core';
41 | // const { SplashScreen, StatusBar, Network } = Plugins;
42 | const { StatusBar } = Plugins;
43 | 
44 | Vue.config.productionTip = false;
45 | 
46 | // Tell Vue that the ion-components aren’t Vue components
47 | Vue.config.ignoredElements = [/^ion-/];
48 | 
49 | StatusBar.hide();
50 | 
51 | Vue.use(Ionic);
52 | 
53 | export const globalStore = new Vue({
54 | 	data: {
55 | 		items: items,
56 | 		menus: menus,
57 | 	},
58 | 	created() {
59 | 		this.items.forEach(item => {
60 | 			item.thumbnail_url = `https://picsum.photos/id/${item.id}/400/400`;
61 | 		});
62 | 	},
63 | });
64 | 
65 | new Vue({
66 | 	router,
67 | 	render: h => h(App),
68 | }).$mount('#app');
69 | 


--------------------------------------------------------------------------------
/src/menus.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "title": "Home",
 4 |     "path": "/",
 5 |     "icon": "home"
 6 |   },
 7 |   {
 8 |     "title": "Widgets",
 9 |     "path": "/menu/widgets",
10 |     "icon": "images"
11 |   },
12 |   {
13 |     "title": "List",
14 |     "path": "/menu/list",
15 |     "icon": "list"
16 |   },
17 |   {
18 |     "title": "List Virtual",
19 |     "path": "/menu/list-virtual",
20 |     "icon": "list"
21 |   },
22 |   {
23 |     "title": "Card",
24 |     "path": "/menu/card",
25 |     "icon": "image"
26 |   },
27 |   {
28 |     "title": "Grid",
29 |     "path": "/menu/grid",
30 |     "icon": "grid"
31 |   },
32 |   {
33 |     "title": "Modal",
34 |     "path": "/menu/modal",
35 |     "icon": "albums"
36 |   }
37 | ]
38 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { IonicVueRouter } from '@ionic/vue';
 3 | 
 4 | Vue.use(IonicVueRouter);
 5 | 
 6 | export default new IonicVueRouter({
 7 |   mode: 'history',
 8 |   base: process.env.BASE_URL,
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'home',
13 |       component: () =>
14 |         import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
15 |     },
16 |     {
17 |       path: '/menu/widgets',
18 |       name: 'menu-widgets',
19 |       component: () =>
20 |         import(/* webpackChunkName: "widgets" */ '@/views/Widgets.vue'),
21 |     },
22 |     {
23 |       path: '/menu/list',
24 |       name: 'menu-list',
25 |       component: () =>
26 |         import(/* webpackChunkName: "list" */ '@/views/List.vue'),
27 |     },
28 |     {
29 |       path: '/menu/list-virtual',
30 |       name: 'menu-list-virtual',
31 |       component: () =>
32 |         import(
33 |           /* webpackChunkName: "list-virtual" */ '@/views/ListVirtual.vue'
34 |         ),
35 |     },
36 |     {
37 |       path: '/menu/card',
38 |       name: 'menu-card',
39 |       component: () =>
40 |         import(/* webpackChunkName: "card" */ '@/views/Card.vue'),
41 |     },
42 |     {
43 |       path: '/menu/grid',
44 |       name: 'menu-grid',
45 |       component: () =>
46 |         import(/* webpackChunkName: "grid" */ '@/views/Grid.vue'),
47 |     },
48 |     {
49 |       path: '/menu/modal',
50 |       name: 'menu-modal',
51 |       component: () =>
52 |         import(/* webpackChunkName: "modal" */ '@/views/Modal.vue'),
53 |     },
54 |     {
55 |       path: '/listing/:id',
56 |       name: 'listing',
57 |       component: () =>
58 |         import(/* webpackChunkName: "detail" */ '@/views/DetailPage.vue'),
59 |     },
60 |   ],
61 | });
62 | 


--------------------------------------------------------------------------------
/src/views/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="Cards" />
 4 | 		<ion-content>
 5 | 			<ion-list>
 6 | 				<ion-list-header>
 7 | 					<ion-label>Items</ion-label>
 8 | 				</ion-list-header>
 9 | 				<ion-card
10 | 					v-for="item in items"
11 | 					:key="item.id"
12 | 					@click="viewDetail(item)"
13 | 				>
14 | 					<img v-if="item.thumbnail_url" :src="item.thumbnail_url" />
15 | 					<ion-card-header>
16 | 						<ion-card-title>{{ item.title }}</ion-card-title>
17 | 					</ion-card-header>
18 | 					<ion-card-content>
19 | 						{{ item.description }}
20 | 					</ion-card-content>
21 | 				</ion-card>
22 | 			</ion-list>
23 | 		</ion-content>
24 | 	</ion-page>
25 | </template>
26 | 
27 | <script>
28 | import AppHeader from '@/components/AppHeader';
29 | import { globalStore } from '@/main.js';
30 | 
31 | export default {
32 | 	components: {
33 | 		AppHeader,
34 | 	},
35 | 	data() {
36 | 		return {
37 | 			items: globalStore.items,
38 | 		};
39 | 	},
40 | 	methods: {
41 | 		viewDetail(item) {
42 | 			this.$router.push({
43 | 				name: 'listing',
44 | 				params: { id: item.id, item: item },
45 | 			});
46 | 		},
47 | 	},
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/views/DetailPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="Detail" />
 4 | 		<ion-content>
 5 | 			<ion-img
 6 | 				v-if="item.thumbnail_url"
 7 | 				:src="item.thumbnail_url"
 8 | 			></ion-img>
 9 | 			<div class="p-4 font-bold text-gray-700">{{ item.title }}</div>
10 | 			<div class="px-4 pt-0 text-gray-500">
11 | 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
12 | 				ornare, libero in rutrum blandit, quam nulla porta odio, a
13 | 				sodales quam velit at orci. Aliquam gravida dolor non arcu
14 | 				imperdiet tincidunt. Cras commodo, nisl non porta luctus, libero
15 | 				enim pellentesque neque, eget cursus enim nulla in felis.
16 | 				Praesent et est orci. Integer semper non tortor sit amet
17 | 				egestas. Aliquam blandit nisl sed auctor dapibus. Vestibulum
18 | 				aliquam ligula in eros maximus vestibulum. Nulla consectetur
19 | 				ante blandit elit egestas, vitae facilisis diam sagittis. Fusce
20 | 				venenatis lorem nisl, ut cursus tellus vestibulum sed. Donec eu
21 | 				ipsum tortor.
22 | 			</div>
23 | 		</ion-content>
24 | 	</ion-page>
25 | </template>
26 | 
27 | <script>
28 | import AppHeader from '@/components/AppHeader';
29 | 
30 | export default {
31 | 	components: {
32 | 		AppHeader,
33 | 	},
34 | 	props: {},
35 | 	computed: {
36 | 		item() {
37 | 			return this.$route.params.item;
38 | 		},
39 | 	},
40 | };
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/views/Grid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-page>
 3 |     <app-header title="Grid" />
 4 |     <ion-content>
 5 |       <div class="grid">
 6 |         <div
 7 |           v-for="item in items"
 8 |           :key="item.id"
 9 |           class="min-w-sm relative aspect-ratio-square bg-gray-300"
10 |           @click="viewDetail(item)"
11 |         >
12 |           <img
13 |             :src="item.thumbnail_url"
14 |             class="absolute object-cover w-full h-full"
15 |           />
16 |         </div>
17 |       </div>
18 |     </ion-content>
19 |   </ion-page>
20 | </template>
21 | 
22 | <script>
23 | import AppHeader from '@/components/AppHeader';
24 | import { globalStore } from '@/main.js';
25 | 
26 | export default {
27 |   components: {
28 |     AppHeader,
29 |   },
30 |   data() {
31 |     return {
32 |       items: globalStore.items,
33 |     };
34 |   },
35 |   methods: {
36 |     viewDetail(item) {
37 |       this.$router.push({
38 |         name: 'listing',
39 |         params: { id: item.id, item: item },
40 |       });
41 |     },
42 |   },
43 | };
44 | </script>
45 | 
46 | <style>
47 | .grid {
48 |   display: grid;
49 |   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
50 |   grid-auto-rows: 1fr !important;
51 |   grid-gap: 0;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="Home" />
 4 | 		<ion-content padding>
 5 | 			<div class="py-4 ">
 6 | 				<div class="font-bold text-center">
 7 | 					Ionic 4, Vue, Tailwind CSS Demo
 8 | 				</div>
 9 | 				<ion-list class="mt-6">
10 | 					<ion-item v-for="(menu, index) in homeMenus" :key="index">
11 | 						<router-link
12 | 							:to="menu.path"
13 | 							class="w-full flex items-center"
14 | 						>
15 | 							<ion-icon
16 | 								:name="menu.icon"
17 | 								class="flex-shrink-0 text-gray-700 mr-3 w-4 h-4"
18 | 							/>
19 | 							<ion-label class="text-gray-700">
20 | 								{{ menu.title }}
21 | 							</ion-label>
22 | 						</router-link>
23 | 					</ion-item>
24 | 				</ion-list>
25 | 			</div>
26 | 		</ion-content>
27 | 	</ion-page>
28 | </template>
29 | 
30 | <script>
31 | import AppHeader from '@/components/AppHeader';
32 | import { globalStore } from '@/main.js';
33 | 
34 | export default {
35 | 	name: 'home',
36 | 	components: { AppHeader },
37 | 	data() {
38 | 		return {
39 | 			menus: globalStore.menus,
40 | 		};
41 | 	},
42 | 	computed: {
43 | 		homeMenus() {
44 | 			return this.menus.slice(1);
45 | 		},
46 | 	},
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/views/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="List" />
 4 | 		<ion-content>
 5 | 			<ion-list>
 6 | 				<ion-list-header>
 7 | 					<ion-label>Items</ion-label>
 8 | 				</ion-list-header>
 9 | 				<ion-item
10 | 					v-for="item in items"
11 | 					:key="item.id"
12 | 					@click="viewDetail(item)"
13 | 				>
14 | 					<ion-thumbnail slot="start">
15 | 						<ion-img
16 | 							:src="item.thumbnail_url"
17 | 							class="rounded"
18 | 						></ion-img>
19 | 					</ion-thumbnail>
20 | 					<ion-label>{{ item.title }}</ion-label>
21 | 				</ion-item>
22 | 			</ion-list>
23 | 		</ion-content>
24 | 	</ion-page>
25 | </template>
26 | 
27 | <script>
28 | import AppHeader from '@/components/AppHeader';
29 | import { globalStore } from '@/main.js';
30 | 
31 | export default {
32 | 	components: {
33 | 		AppHeader,
34 | 	},
35 | 	data() {
36 | 		return {
37 | 			items: globalStore.items,
38 | 		};
39 | 	},
40 | 	methods: {
41 | 		viewDetail(item) {
42 | 			this.$router.push({
43 | 				name: 'listing',
44 | 				params: { id: item.id, item: item },
45 | 			});
46 | 		},
47 | 	},
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/views/ListVirtual.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="List Virtual" />
 4 | 		<ion-content>
 5 | 			<ion-list>
 6 | 				<ion-list-header>
 7 | 					<ion-label>Items</ion-label>
 8 | 				</ion-list-header>
 9 | 				<RecycleScroller
10 | 					class="scroller"
11 | 					:items="items"
12 | 					:item-size="72"
13 | 					:buffer="200"
14 | 					key-field="id"
15 | 					v-slot="{ item }"
16 | 				>
17 | 					<div class="h-16">
18 | 						<ion-item @click="viewDetail(item)" class="w-full">
19 | 							<ion-thumbnail slot="start">
20 | 								<ion-img
21 | 									:src="item.thumbnail_url"
22 | 									class="rounded"
23 | 								></ion-img>
24 | 							</ion-thumbnail>
25 | 							<ion-label>{{ item.title }}</ion-label>
26 | 						</ion-item>
27 | 					</div>
28 | 				</RecycleScroller>
29 | 			</ion-list>
30 | 		</ion-content>
31 | 	</ion-page>
32 | </template>
33 | 
34 | <script>
35 | import AppHeader from '@/components/AppHeader';
36 | import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
37 | import { RecycleScroller } from 'vue-virtual-scroller';
38 | import { globalStore } from '@/main.js';
39 | // import items from '@/data.json';
40 | 
41 | export default {
42 | 	components: {
43 | 		AppHeader,
44 | 		RecycleScroller,
45 | 	},
46 | 	data() {
47 | 		return {
48 | 			items: globalStore.items,
49 | 		};
50 | 	},
51 | 	methods: {
52 | 		viewDetail(item) {
53 | 			this.$router.push({
54 | 				name: 'listing',
55 | 				params: { id: item.id, item: item },
56 | 			});
57 | 		},
58 | 	},
59 | };
60 | </script>
61 | 
62 | <style>
63 | .scroller {
64 | 	height: 100vh;
65 | 	overflow-y: auto;
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/views/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<ion-page>
 3 | 		<app-header title="Modal" />
 4 | 		<ion-content padding>
 5 | 			<ion-button expand="block" @click="showModal"
 6 | 				>Open Modal</ion-button
 7 | 			>
 8 | 		</ion-content>
 9 | 	</ion-page>
10 | </template>
11 | 
12 | <script>
13 | import AppHeader from '@/components/AppHeader';
14 | import ModalContent from '@/views/ModalContent';
15 | 
16 | export default {
17 | 	components: {
18 | 		AppHeader,
19 | 	},
20 | 	methods: {
21 | 		showModal: async function() {
22 | 			const modal = await this.$ionic.modalController.create({
23 | 				component: ModalContent,
24 | 				componentProps: {
25 | 					router: this.$router,
26 | 					propsData: {
27 | 						title: 'Modal Content',
28 | 					},
29 | 				},
30 | 			});
31 | 			await modal.present();
32 | 		},
33 | 	},
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/views/ModalContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-page>
 3 |     <ion-header>
 4 |       <ion-toolbar>
 5 |         <ion-title>{{ title }}</ion-title>
 6 |         <ion-buttons slot="end">
 7 |           <ion-button @click="dismiss">
 8 |             <ion-icon name="close" slot="icon-only"></ion-icon>
 9 |           </ion-button>
10 |         </ion-buttons>
11 |       </ion-toolbar>
12 |     </ion-header>
13 |     <ion-content class="ion-padding">
14 |       <ion-button expand="block" @click="dismiss()"
15 |         >Dismiss the Modal</ion-button
16 |       >
17 |       <ion-list>
18 |         <ion-list-header>
19 |           <ion-label>Items</ion-label>
20 |         </ion-list-header>
21 |         <ion-item
22 |           v-for="item in items"
23 |           :key="item.id"
24 |           @click="viewDetail(item)"
25 |         >
26 |           <ion-thumbnail slot="start">
27 |             <ion-img :src="item.thumbnail_url"></ion-img>
28 |           </ion-thumbnail>
29 |           <ion-label>{{ item.title }}</ion-label>
30 |         </ion-item>
31 |       </ion-list>
32 |     </ion-content>
33 |   </ion-page>
34 | </template>
35 | 
36 | <script>
37 | import { globalStore } from '@/main.js';
38 | 
39 | export default {
40 |   name: 'Modal',
41 |   props: {
42 |     title: String,
43 |   },
44 |   data() {
45 |     return {
46 |       items: globalStore.items,
47 |     };
48 |   },
49 |   methods: {
50 |     dismiss: async function() {
51 |       await this.$ionic.modalController.dismiss();
52 |     },
53 |     viewDetail(item) {
54 |       this.$router.push({
55 |         name: 'listing',
56 |         params: { id: item.id, item: item },
57 |       });
58 |       this.$ionic.modalController.dismiss();
59 |     },
60 |   },
61 | };
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/views/Widgets.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-page>
 3 |     <app-header title="Widgets" />
 4 |     <ion-content padding>
 5 |       <div v-if="items">
 6 |         <ion-slides ref="slider" pager="false" scrollbar="true" class="mt-4">
 7 |           <ion-slide
 8 |             v-for="item in items"
 9 |             :key="item.id"
10 |             @click="viewDetail(item)"
11 |           >
12 |             <div class="w-full flex flex-col">
13 |               <div class="w-full relative aspect-ratio-square bg-gray-300">
14 |                 <ion-img
15 |                   :src="item.thumbnail_url"
16 |                   class="absolute object-cover w-full h-full"
17 |                 >
18 |                 </ion-img>
19 |               </div>
20 |               <div class="truncate p-2 mb-2 text-gray-700">
21 |                 {{ item.title }}
22 |               </div>
23 |             </div>
24 |           </ion-slide>
25 |         </ion-slides>
26 |       </div>
27 |     </ion-content>
28 |   </ion-page>
29 | </template>
30 | 
31 | <script>
32 | import AppHeader from '@/components/AppHeader';
33 | import { globalStore } from '@/main.js';
34 | 
35 | export default {
36 |   components: {
37 |     AppHeader,
38 |   },
39 |   data() {
40 |     return {
41 |       items: globalStore.items,
42 |       slideOpts: {
43 |         spaceBetween: 0,
44 |         slidesPerView: 2,
45 |         freeMode: true,
46 |       },
47 |     };
48 |   },
49 |   methods: {
50 |     viewDetail(item) {
51 |       this.$router.push({
52 |         name: 'listing',
53 |         params: { id: item.id, item: item },
54 |       });
55 |     },
56 |   },
57 |   mounted() {
58 |     let slides = this.$refs.slider;
59 |     this.$nextTick(() => {
60 |       slides.options = this.slideOpts;
61 |     });
62 |   },
63 |   // Use updated when loading data from API
64 |   updated() {
65 |     let slides = this.$refs.slider;
66 |     this.$nextTick(() => {
67 |       slides.options = this.slideOpts;
68 |     });
69 |   },
70 | };
71 | </script>
72 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	theme: {
 3 | 		aspectRatio: {
 4 | 			// defaults to {}
 5 | 			square: [1, 1],
 6 | 			'16x9': [16, 9],
 7 | 			'4x3': [4, 3],
 8 | 			'21x9': [21, 9],
 9 | 		},
10 | 		extend: {},
11 | 	},
12 | 	variants: {
13 | 		aspectRatio: ['responsive'], // defaults to ['responsive']
14 | 	},
15 | 	plugins: [require('tailwindcss-aspect-ratio')()],
16 | };
17 | 


--------------------------------------------------------------------------------