├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── docs
    └── screenshot.png
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        ├── Detail.vue
        └── Home.vue


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ionic4-vue-reddit
 2 | ![](docs/screenshot.png)
 3 | 
 4 | ## Project setup
 5 | ```
 6 | npm install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | ```
11 | npm run serve
12 | ```
13 | 
14 | ### Compiles and minifies for production
15 | ```
16 | npm run build
17 | ```
18 | 
19 | ### Run your tests
20 | ```
21 | npm run test
22 | ```
23 | 
24 | ### Lints and fixes files
25 | ```
26 | npm run lint
27 | ```
28 | 
29 | ### Customize configuration
30 | See [Configuration Reference](https://cli.vuejs.org/config/).
31 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/ionic4-vue-reddit/29337e348113321dc84bb8012d196121fa5c57e9/docs/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic4-vue-reddit",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@ionic/vue": "0.0.4",
12 |     "axios": "^0.18.0",
13 |     "core-js": "^2.6.5",
14 |     "vue": "^2.6.10",
15 |     "vue-router": "^3.0.3"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.7.0",
19 |     "@vue/cli-plugin-eslint": "^3.7.0",
20 |     "@vue/cli-service": "^3.7.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.16.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "vue-template-compiler": "^2.5.21"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/ionic4-vue-reddit/29337e348113321dc84bb8012d196121fa5c57e9/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>ionic4-vue-reddit</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but ionic4-vue-reddit doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ion-app>
 3 |     <div id="nav">
 4 |       <ion-toolbar color="dark">
 5 |         <ion-buttons slot="secondary">
 6 |           <ion-button @click="goToAbout">
 7 |             <ion-icon slot="icon-only" name="logo-ionic"></ion-icon>
 8 |           </ion-button>
 9 |         </ion-buttons>
10 |         <ion-title @click="goToTitle">
11 |           IonicVue
12 |         </ion-title>
13 |       </ion-toolbar>
14 |     </div>
15 |     <ion-content color="dark">
16 |       <router-view/>
17 |     </ion-content>
18 |   </ion-app>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   methods: {
24 |     goToTitle() {
25 |       this.$router.push('/')
26 |     },
27 |     goToAbout() {
28 |       this.$router.push('about')
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FaztWeb/ionic4-vue-reddit/29337e348113321dc84bb8012d196121fa5c57e9/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | import Ionic from '@ionic/vue';
 8 | import '@ionic/core/css/ionic.bundle.css';
 9 | 
10 | Vue.use(Ionic);
11 | 
12 | new Vue({
13 |   router,
14 |   render: h => h(App)
15 | }).$mount('#app')
16 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | import {IonicVueRouter} from '@ionic/vue'
 6 | 
 7 | Vue.use(IonicVueRouter)
 8 | 
 9 | export default new IonicVueRouter({
10 |   mode: 'history',
11 |   base: process.env.BASE_URL,
12 |   routes: [
13 |     {
14 |       path: '/',
15 |       name: 'home',
16 |       component: Home
17 |     },
18 |     {
19 |       path: '/detail',
20 |       name: 'detail',
21 |       component: () => import('./views/Detail.vue'),
22 |       props: true
23 |     },
24 |     {
25 |       path: '/about',
26 |       name: 'about',
27 |       // route level code-splitting
28 |       // this generates a separate chunk (about.[hash].js) for this route
29 |       // which is lazy-loaded when the route is visited.
30 |       component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
31 |     }
32 |   ]
33 | })
34 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ion-card>
 4 |       <ion-card-header>
 5 |         <ion-label>{{post.title}}</ion-label>
 6 |       </ion-card-header>
 7 |       <ion-card-content>
 8 |         <ion-img :src="image"></ion-img>
 9 |         <ion-button color="tertiary" extend="full" @click="$router.go(-1)">Go back</ion-button>
10 |       </ion-card-content>
11 |     </ion-card>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   props: ["post"],
18 |   data() {
19 |     return {
20 |       image: ""
21 |     };
22 |   },
23 |   mounted() {
24 |     console.log(this.post);
25 |     this.image = this.post.preview.images[0].source.url.replace("&amp;", "&");
26 |     console.log(this.image);
27 |   }
28 | };
29 | </script>
30 | 
31 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ion-card v-for="post in posts" :key="post.data.id" style="border: 1px solid blue;">
 4 |       <ion-card-content>
 5 |        <template v-if="post.data.thumbnail.startsWith('https://')">
 6 |           <img :src="post.data.thumbnail">
 7 |         </template>
 8 |         <ion-label color="light">{{post.data.title}}</ion-label>
 9 |         <ion-button color="tertiary" expand="full" @click="viewMore(post.data)">
10 |           View More
11 |         </ion-button>
12 |       </ion-card-content>
13 |     </ion-card>
14 |     <!-- <ion-list>
15 |         <ion-item v-for="post in posts" :key="post.data.id">
16 |           <img :src="post.data.thumbnail" class="thumb">
17 |           <ion-label>{{post.data.title}}</ion-label>
18 |         </ion-item>
19 |     </ion-list> -->
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import axios from "axios";
25 | 
26 | export default {
27 |   name: "home",
28 |   components: {},
29 |   data() {
30 |     return {
31 |       posts: []
32 |     };
33 |   },
34 |   async mounted() {
35 |     const response = await axios.get(
36 |       "https://www.reddit.com/r/marvelstudios.json"
37 |     );
38 |     this.posts = response.data.data.children;
39 |   },
40 |   methods: {
41 |     viewMore(post) {
42 |       this.$router.push({name: 'detail', params: {post}})
43 |     }
44 |   }
45 | };
46 | </script>
47 | 
48 | <style>
49 | .thumb {
50 |   width: 60px;
51 |   height: 60px;
52 |   border-radius: 30px;
53 |   margin-right: 15px;
54 |   margin-top: 10px;
55 |   margin-bottom: 10px;
56 | }
57 | </style>
58 | 


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