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


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


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/W4G1/ionic-vue-starter/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/W4G1/ionic-vue-starter/HEAD/src/assets/logo.png


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


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/capacitor.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "appId": "io.ionic.starter",
3 |   "appName": "ionic-vue-starter",
4 |   "bundledWebRuntime": false,
5 |   "webDir": "dist",
6 |   "windowsAndroidStudioPath": "C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe",
7 |   "linuxAndroidStudioPath": "/usr/local/android-studio/bin/studio.sh"
8 | }
9 | 


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


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


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


--------------------------------------------------------------------------------
/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: function () { 
23 |         return import(/* webpackChunkName: "about" */ './views/About.vue')
24 |       }
25 |     }
26 |   ]
27 | })
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-vue-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "npx vue-cli-service serve",
 7 |     "sync": "npx capacitor copy",
 8 |     "presync": "npx vue-cli-service build",
 9 |     "postsync": "rm -rf dist",
10 |     "build": "npx capacitor open",
11 |     "prebuild": "npx vue-cli-service build && npx capacitor copy && rm -rf dist",
12 |     "init": "npx capacitor add",
13 |     "preinit": "npx vue-cli-service build",
14 |     "postinit": "rm -rf dist"
15 |   },
16 |   "dependencies": {
17 |     "@capacitor/core": "1.0.0-beta.11",
18 |     "@ionic/core": "^4.0.0-beta.17",
19 |     "@ionic/vue": "0.0.1",
20 |     "ionic": "^4.5.0",
21 |     "vue": "^2.5.21",
22 |     "vue-router": "^3.0.1",
23 |     "vuex": "^3.0.1"
24 |   },
25 |   "devDependencies": {
26 |     "@capacitor/cli": "1.0.0-beta.11",
27 |     "@vue/cli-service": "^3.0.5",
28 |     "vue-template-compiler": "^2.5.21"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |     </ul>
12 |     <h3>Essential Links</h3>
13 |     <ul>
14 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
15 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
16 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
17 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
18 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
19 |     </ul>
20 |     <h3>Ecosystem</h3>
21 |     <ul>
22 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
23 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
24 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
25 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
26 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
27 |     </ul>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: 'HelloWorld',
34 |   props: {
35 |     msg: String
36 |   }
37 | }
38 | </script>
39 | 
40 | <!-- Add "scoped" attribute to limit CSS to this component only -->
41 | <style scoped>
42 | h3 {
43 |   margin: 40px 0 0;
44 | }
45 | ul {
46 |   list-style-type: none;
47 |   padding: 0;
48 | }
49 | li {
50 |   display: inline-block;
51 |   margin: 0 10px;
52 | }
53 | a {
54 |   color: #42b983;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # :blue_book: Ionic Vue Starter
 2 | [![NPM Version](https://img.shields.io/badge/npm-6.4.1-brightgreen.svg)](https://nodejs.org/) [![Node Version](https://img.shields.io/badge/node-v8.12.0-green.svg)](https://nodejs.org/) [![Ionic Version](https://img.shields.io/badge/ionic-4.0.0--beta-blue.svg)](https://beta.ionicframework.com/)
 3 | 
 4 | Ionic Vue Starter is a basic Vue CLI 3 (including Vuex & Vue Router) template with Ionic 4 and Capacitor integrated.
 5 | 
 6 | Ionic components be used in every Vue component. Take a look here for all the available components: https://beta.ionicframework.com/docs/components/
 7 | 
 8 | ## :wrench: Getting started
 9 | ### Requirements
10 | - [Node](https://nodejs.org/) (Of course) v8.12.0 <
11 | - [NPM](https://www.npmjs.com/) v6.4.1 <
12 | - Ionic CLI v4.5.0 <
13 | (`npm install -g ionic`)
14 | - Vue CLI v3.0.5 <
15 | (`npm install -g @vue/cli`)
16 | #### (Optional) for Android Compiling
17 | - [Android Studio](https://developer.android.com/studio/)
18 | #### (Optional) for IOS Compiling
19 | - [Xcode](https://developer.apple.com/xcode/) (OS X only)
20 | 
21 | ### Download
22 | Clone the repository
23 | ```sh
24 | git clone https://github.com/W4G1/ionic-vue-starter
25 | ```
26 | Or [download](https://github.com/W4G1/ionic-vue-starter/archive/master.zip) directly as .zip
27 | 
28 | ### Installing dependencies
29 | ```sh
30 | npm install
31 | ```
32 | 
33 | ### Adding a platform for development
34 | {platform} can be 'android', 'electron', 'ios', or 'web'.
35 | ```sh
36 | npm run init {platform}
37 | ```
38 | 
39 | ### Running the development server
40 | This is the Vue dev server, and features hot reloading.
41 | ```sh
42 | npm run serve
43 | ```
44 | 
45 | ## :fire: Commands
46 | | Command | Description |
47 | | ------ | ------ |
48 | | `npm run serve` | Starts development server with hot reloading. |
49 | | `npm run build {platform}` | Builds the project and opens the native platform workspace. |
50 | | `npm run init {platform}` | Adds a new platform to the project with its own folder (e.g /android or /ios). |
51 | | `npm run sync {platform}` | Synchronizes the web assets with a specific project folder, or all initialized platforms if {platform} is left empty. |
52 | 
53 | ## :package: Building
54 | ### Android
55 | #### Requirements
56 | - [Android Studio](https://developer.android.com/studio/).
57 | #### Guide
58 | Run this command to sync the web assets with the android project folder, and open the project in Android Studio.
59 | ```sh
60 | npm run build android
61 | ```
62 | Android Studio should now be started. If not, you either didn't install it, or it is installed at a custom location.
63 | 
64 | If that is the case, you can specify the Android Studio path in `capacitor.config.json`.
65 | 
66 | For Windows:
67 | ```json
68 | {
69 |     ...
70 |     "windowsAndroidStudioPath": "C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe",
71 | }
72 | ```
73 | Or Linux:
74 | ```json
75 | {
76 |     ...
77 |     "linuxAndroidStudioPath": "/usr/local/android-studio/bin/studio.sh"
78 | }
79 | ```
80 | 
81 | The project should now be loaded in Android Studio, and is ready for building. If you don't know how to build a project in Android Studio, take a look [here](https://developer.android.com/studio/run/).
82 | 
83 | ### IOS
84 | #### Requirements
85 | - [Xcode](https://developer.apple.com/xcode/) (OS X only).
86 | #### Guide
87 | Coming soon!
88 | 
89 | ## Bugs & Questions
90 | For any bugs or questions, feel free to create an issue [here](https://github.com/W4G1/ionic-vue-starter/issues).
91 | 


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