Vue Js Ionic Todo App
Creating a project with the Ionic
1.To begin, let's install the latest version of the Ionic CLI.
npm install -g ionic@latest
make the base app call my-app using the vue-cli; pick the default settings
vue create app-name
- now we need ionic libraries, here we give to a specific version to install or directly copy-paste it
if you are a mac user npm instead use yarn
npm add @ionic/vue@0.0.9 npm add @ionic/core npm add vue-router 3.You're folder structure look like this
A look at a Vue Application Structure Start with main.js
If you open up main.js you will see the following. here I'm adding to custom ionic-vue-router and added basic route pointing to our home page here default '/' path redirect to home page main.js
import Vue from 'vue' import App from './App.vue'
import Ionic from "@ionic/vue" import "@ionic/core/css/core.css" import "@ionic/core/css/ionic.bundle.css" import { IonicVueRouter } from "@ionic/vue"; Vue.config.productionTip = false; Vue.use(Ionic); Vue.use(IonicVueRouter);
const router = new IonicVueRouter({ routes: [ { path: "/", redirect: "/home" }, { path: "/home", name: "home", component: () => import(/ webpackChunkName: "home" / "@/components/HelloWorld"), } ] });
new Vue({ render: h => h(App),
/ router object initialized we need to access to all Vue components in the application now we are passing the router all component and can you use this.$router like this /
router }).$mount('#app')
HelloWorld.vue
HomeCreate Idea
Run Idea by Brandy 5 Daysthat's it run it it's worked well later on added you can what you want
and Build a Native App here I'm using Cordova so I'll configure Cordova
Installing Cordova If Cordova is not installed, install with
npm install -g cordova after that just add vue Cordova run below command in your terminal
vue add cordova
here you can see the folder structure like this
after that Add Cordova Plugins
To add a Cordova plugin, go to src-cordova
Then add the plugin you wish to add, in this example we will add the cordova plugin
build to apk Then launch the application from mobile if you have any doubts! regarding this please drop a comment I'll tell you guys
Subscribe to my newsletter
Read articles from ramu k directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
ramu k
ramu k
Fullstack developer