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


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-vue-example",
 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/core": "^4.0.0-beta.17",
12 |     "@ionic/vue": "0.0.1",
13 |     "axios": "^0.18.0",
14 |     "vue": "^2.5.17",
15 |     "vue-router": "^3.0.1",
16 |     "vuex": "^3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^3.2.0",
20 |     "@vue/cli-plugin-eslint": "^3.2.0",
21 |     "@vue/cli-service": "^3.2.0",
22 |     "babel-eslint": "^10.0.1",
23 |     "eslint": "^5.8.0",
24 |     "eslint-plugin-vue": "^5.0.0-0",
25 |     "vue-template-compiler": "^2.5.17"
26 |   }
27 | }
28 | 


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/ionic-vue-example/09202b88b35e87cbeb757a1083dbec15895f84f0/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-vue-example</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but ionic-vue-example 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 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | #app {
 9 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: #2c3e50;
14 | }
15 | #nav {
16 |   padding: 30px;
17 | }
18 | 
19 | #nav a {
20 |   font-weight: bold;
21 |   color: #2c3e50;
22 | }
23 | 
24 | #nav a.router-link-exact-active {
25 |   color: #42b983;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/ionic-vue-example/09202b88b35e87cbeb757a1083dbec15895f84f0/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <ion-header>
 4 |       <ion-toolbar>
 5 |         <ion-title>Reddit clone /r/aww</ion-title>
 6 |       </ion-toolbar>
 7 |     </ion-header>
 8 |     <ion-list>
 9 |       <ion-item v-for="post in posts" :key="post.data.id" @click="handleClick(post.data.preview.images[0].source.url)">
10 |         <img :src="post.data.thumbnail" alt="thumb" class="thumbnail">
11 |         <ion-label>{{ post.data.title }}</ion-label>
12 |       </ion-item>
13 |     </ion-list>
14 | 
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import axios from 'axios'
20 | 
21 | export default {
22 |   name: 'HelloWorld',
23 |   props: {
24 |     msg: String
25 |   },
26 |   mounted() {
27 |     axios.get('https://www.reddit.com/r/aww.json?raw_json=1')
28 |       .then(response => {
29 |         this.posts = response.data.data.children
30 |       })
31 |   },
32 |   data() {
33 |     return {
34 |       posts: [],
35 |       myInput: ''
36 |     }
37 |   },
38 |   methods: {
39 |     handleClick(imageSrc) {
40 |       this.$router.push({ name: 'about', params: { imageSrc }})
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <!-- Add "scoped" attribute to limit CSS to this component only -->
47 | <style scoped>
48 |   .thumbnail {
49 |     width: 60px;
50 |     height: 60px;
51 |     border-radius: 30px;
52 |     margin-right: 16px;
53 |     margin-top: 10px;
54 |     margin-bottom: 10px;
55 |   }
56 | </style>
57 | 


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


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


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <ion-header>
 4 |       <ion-toolbar>
 5 |         <ion-title>Image</ion-title>
 6 |       </ion-toolbar>
 7 |     </ion-header>
 8 |     <ion-img :src="imageSrc"></ion-img>
 9 |     <ion-button @click="$router.go(-1)">Back</ion-button>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: ['imageSrc']
16 | }
17 | </script>
18 | 
19 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <HelloWorld />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import HelloWorld from '@/components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'home',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 


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