capacitor-community / vue-cli-plugin-capacitor

A Vue CLI 3/4 Plugin for Capacitor

Vue CLI Plugin Capacitor

Turn your Vue SPA into an Android or iOS app with Capacitor

Install

Open a terminal in the directory of a Vue CLI 3/4 project, or create one with vue create my-app, and run the following command:

vue add capacitor

Then, configure Capacitor to hide your app's splash screen when VueJS is ready by adding the following code to your src/main.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.

vue-cli-plugin-capacitor's Issues

Should we add to version control each env folder?

Hi,
The plugin made adding capacitor a breeze.

I wanted to ask should we add the android folder for example to version control?

Asking because I inspected and saw it is augmenting the capacitor.config.js every time we serve or build, which I get is necessary, but it injects data that is only relevant to my env (paths or IPs).

Thanks!

How to upgrade capacitor version 3?

I need to upgrade capacitor v3 from v2 .any docs for that?

Lost plugin:generate command

When I type 'npx @capacitor/cli plugin:generate' console hangs for about 2 seconds, and then nothing happens. I suspect using this vue-cli plugin has something to do with it. Any advice?

Serving the app causes error

Describe the bug

> [email protected] capacitor:serve
> vue-cli-service capacitor:serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'vue/compiler-sfc'
        Require stack:
        - /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js
        - /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/lib/config/base.js
        - /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/lib/Service.js
        - /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js
Error: Cannot find module 'vue/compiler-sfc'
Require stack:
- /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js
- /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/lib/config/base.js
- /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/lib/Service.js
- /home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/joe/.nvm/versions/node/v16.15.1/lib/node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js:8:24)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

To Reproduce
Steps to reproduce the behavior:

npm run capacitor:serve

Expected behavior
Should serve the mobile app (via emulator?)

Flag to skip standard vue cli build

Just wondering what your thoughts on having a flag that could skip the vue cli build part of the "capacitor:build" script. I build the android app as part of a larger pipeline, and the app has already been built by this stage, so it seems unnecessary to run it again (unless it does something different and I didn't realise it?)

// Build app with Vue CLI
await api.service.run('build', args)

Please use capacitor v1.x (final)

"vue add capacitor@next" throws errors

Hi,

running "vue add capacitory@next" in the vue CLI 3 project folder gives me errors:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue-cli-plugin-capacitor@next
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I'm using npm 6.5.0.

How do I install the right package? "vue add capacitor" installs https://github.com/techiediaries/vue-cli-plugin-capacitor.

Thanks!

Running a command just after build

To be able to use the Ionic AppFlow service, a manifest file needs to be created from the generated files, which is done via ionic deploy manifest.

Can we add a way to run a custom command right after the build command? Because I tried without it, and the deployment fails.

Maybe a config inside pluginOptions in vue.config.js?

pluginOptions: {
    outputDir: '',
    capacitorScripts: {
      postbuild: 'custom --thing',
    },

I tried searching for a way to run a command on every vue-cli-service build, but didnt find anything.

npm capacitor:serve --ios not honored

When using the command
npm capacitor:serve --ios
It still only opens android and not xcode.

Any ideas?

deleteme

Errors with plugins. All of them.

While this may not be a bug, but I have no one else to ask.

I get this error anytime I use a plugin.

I also get this error on some plugins.

This is during npm run capacitor:serve -- --android
and also running directly on a device, not an emulator

Any help is greatly appreciated!

Update to Capactor 2

Thanks for the really great plugin!
Could you update it so it uses Capacitor 2 version?

Thanks!

How to print document?

I need to print html content but I can't see any document relative to print. I have seen cordova-plugin-printer how to configure inside capacitor?

Update documentation for existing capacitor setup

Is your feature request related to a problem? Please describe.
Using vue add capacitor on a project already setup with capacitor the installation fails.

Describe the solution you'd like
Installation instructions for installing the cli plugin on an existing Vue / Capacitor setup.

Open to collaborate and join the capacitor-community?

Hey there! I'm making from the Ionic team! It's great to see there's already a Vue CLI plugin for capacitor. Great work on this.

We've recently launched a community org here on github for capacitor that includes various plugins and I was thinking this would be a good candidate for joining the community.

The TL;DR is you'd join the org as a member and would maintain the plugin under that org. That means transferring this repo to a new org with you as the primary maintainer. You would then be able to republish the CLI add on under the npm scope @capacitor-community

You can take a look at the community org here

https://github.com/capacitor-community

Feel free to reach out if you have any other questions!

Unable to app load , are you sure your server running at ipaddress:port?

Describe the bug

This error i am getting in debug apk , i am using npm run capacitor:serve to run debug mode while app running appear "unable to app load, are you sure server running at ipaddress:port?"
then i tested same url in my computer browser worked well but not worked in my mobile and i also tried turn off my firewall and allowed inbound rule 8080 this case also not worked for me.

then i run ipconfig command in shell it list out some ip address one of them worked in my mobile but i don't how to use that ipaddress in capacitor ?.

what is the solution for this?