docs: add vue example (#13)

Co-authored-by: Pedro Bilro <[email protected]>

Author: reslear

README.md

@@ -245,6 +245,57 @@ const MyMap: React.FC = () => {
 export default MyMap;
 ```
 
+### Vue
+
+```vue
+<script lang="ts" setup>
+import { ref, shallowRef, useTemplateRef } from 'vue'
+import { GoogleMap } from '@capacitor/google-maps'
+
+const mapRef = useTemplateRef<HTMLElement>('mapRef')
+const newMap = shallowRef<GoogleMap>()
+
+async function createMap() {
+  if (!mapRef.value) return
+
+  newMap.value = await GoogleMap.create({
+    id: 'my-cool-map',
+    element: mapRef.value,
+    apiKey: import.meta.env.VITE_YOUR_API_KEY_HERE,
+    config: {
+      center: {
+        lat: 33.6,
+        lng: -117.9,
+      },
+      zoom: 8,
+    },
+  })
+}
+</script>
+
+<template>
+  <capacitor-google-map
+    ref="mapRef"
+    style="display: inline-block; width: 275px; height: 400px"
+  ></capacitor-google-map>
+  <button @click="createMap()">Create Map</button>
+</template>
+
+```
+
+make sure you need enable [recognize native custom elements](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) like 
+
+```ts
+// vite.config.mts > plugins
+Vue({
+  template: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag.startsWith('capacitor-')
+    },
+  },
+}),
+```
+
 ### Javascript
 
 ```html