Vue Js Ionic Todo App

ramu kramu k
2 min read

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

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

Screenshot from 2022-01-26 22-23-31.png

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

Home

Create Idea

Run Idea by Brandy 5 Days

that'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

cordova.png

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

0
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