Learn how to use the atoms composables in your Nuxt 3 application.
This module exposes composables that are auto-imported by Nuxt 3.
useGoogleKeyThis composable return the Google Api Key provided in the nuxt.config.ts
<script setup lang="ts"> const API_KEY = useGoogleKey() console.log('my google key', API_KEY)</script>useGoogleMapRefThis is a global state composable which provide the Google Map instance after initialization.
<script setup lang="ts"> const { init, mapInstance } = useGoogleMapRef() console.log('my mapInstance', mapInstance.value) onMounted(() => { init(DomElement) })</script>useGoogleClustererThis is a global state composable which deals with the Google Map markers instance.
<script setup lang="ts"> const { markersInstance, addGoogleMarker } = useGoogleClusterer() console.log('my reactive markers', markersInstance.value) onMounted(() => { addGoogleMarker(GoogleMarker) })</script>markersInstanceReturns the reactive google markers.
clustererIconReturns the path for the clustererIcon provided in the nuxt.config.ts
addGoogleMarkerAdds a marker in the markersInstance. It needs to be a google Marker.
deleteGoogleMarkerRemoves a marker in the markersInstance. It needs to be a google Marker.
useMarkerIconsReturns the path for the markerIcon and activeMarkerIcon provided in the nuxt.config.ts
<script setup lang="ts"> const { markerIcon, activeMarkerIcon } = useMarkerIcons() console.log('icon path', markerIcon.value) console.log('active icon path', activeMarkerIcon.value)</script>