Using Capacitor Core Plugin within Vue

The documentation from Ionic and Capacitor doesn’t make it clear how to instantiate the Plugin import within Vue. Most of the documentation is either React or Angular.

<script>
import { Plugins } from '@capacitor/core'
export default {
  name: 'App',
  data() {
    return{ loc: null }
  },
  methods: {
    async getCurrentPosition(){
      const { Geolocation } = Plugins;
      const loc = await Geolocation.getCurrentPosition()
      this.loc = loc
    }
  }
}
</script>

So it looks like you have to create an async method to call the plugin’s method and return the desired info.

Leave a Comment