Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@techiediaries/vue-cli-plugin-capacitor

Package Overview
Dependencies
Maintainers
3
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@techiediaries/vue-cli-plugin-capacitor

A Vue CLI 4 Plugin for Capacitor

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

Vue CLI Plugin Capacitor

This plugin allows you to convert your Vue app to an Android or iOS app using Ionic Capacitor

How to Install?

Head over to a command-line interface and run the following command from your Vue project's folder:

vue add @techiediaries/capacitor

Next, configure Capacitor to hide your app's splash screen when VueJS is ready by adding the following code to your src/app.js:

import Vue from 'vue'
import App from './App.vue'
+ import { Plugins } from '@capacitor/core'
+ const { SplashScreen } = Plugins

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
+ mounted() {
+   SplashScreen.hide()
+ }
}).$mount('#app')

Start a Live Dev Server

Start the dev server by running:

With Yarn:

yarn capacitor:serve # add --android or --ios to specify a target platform

Or with npm:

npm run capacitor:serve # add --android or --ios to specify a target platform

This will start a dev server, then open your native IDE (Android Studio or XCode). From here, run your app on an emulator or physical device. The app will connect to the dev server, allowing HMR.

Build Your App

Build your app by running:

With Yarn:

yarn capacitor:build # add --android and/or --ios to specify a target platform(s)

Or with npm:

npm run capacitor:build # add --android and/or --ios to specify a target platform(s)

This will bundle your app, then open your native IDE (Android Studio or XCode). From here, build your app with the IDE tooling to create an Android/iOS app.

Further Configuration

To learn more about Capacitor and how to use it, visit Capacitor's Website. This plugin simply provides an easy-to-use interface for Vue CLI projects.

How It Works

Dev Server

  1. The normal development server is started with vue-cli-service serve.
  2. Capacitor is configured to load your app from the dev server's network url.
  3. The platform's native IDE is opened with cap open [platform].
  4. When the native app is run, it connects to the dev server, allowing for HMR.

Build

  1. Your app is built as normal with vue-cli-service build.
  2. The bundled output is copied to the native app with cap copy [platform]. This runs for each platform specified.
  3. The platform's native IDE is opened, allowing you to create a final build of the native app.

FAQs

Package last updated on 11 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc