Hybrid app template built with vue, ionic and capacitor

Hybrid app template built with vue, ionic and capacitor

Hybrid mobile template built with (latest) vue-ionic and using capacitor for native builds - These templates are from app design inspiration pages on Instagram or Dribble.

Ionic Vue Mobile Template 01

Hybrid mobile template built with (latest) vue-ionic and using capacitor for native builds - These templates are from app design inspiration pages on Instagram or Dribble.

Demo

Project setup

npm install

Run on the browser - development

npm run serve

Design

alt text

Native

Using Capacitor for native builds

Prepare native builds

iOS testing and distribution

  1. Download latest Xcode
  2. npm run build
  3. npx cap add ios
  4. npx cap copy
  5. npx cap open ios Xcode takes a few minutes to index the files; keep an eye at the top of Xcode's window for progress.

[Not compulsory] For sanity check click on the play button in top left. This will prepare and run the app in a simulator, if all goes well you should be able to login and click around. If not, create an issue 🤷 and I will have a look.

Icons and launch images - Xcode (v11.5) cannot map icons listed in config.xml so this has to be done manually 😞. In the root folder look for Resources and select Images.xcassets. A panel will show up where you can select AppIcon to add app icons or LaunchImage to add launch images.

Android testing and distribution

  1. Download latest Android Studio
  2. npm run build
  3. npx cap add android
  4. npx cap copy
  5. npx cap open android Android Studio takes a few minutes to index the files, keep an eye at the bottom of Android Studio for progress.
  6. Testing - When indexing is complete, look for a green play button. Click the play button and it will launch the app in an emulator (See here to setup Emulator) or on the phone if a phone is connected via USB.

Disclaimer

Ionic Vue is still in beta; I am using this setup in production but please use with caution. Keep an eye on Ionic Twitter account, forum and slack group for updates, RCs and production release expected towards the end of the year.

Credits

Contact

Download Details:

Author: dlodeprojuicer

Demo: https://ionic-vue-mobile-template-01.netlify.app/

Source Code: https://github.com/dlodeprojuicer/ionic-vue-mobile-template-01

vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.