[{"_path":"/setup","_draft":false,"_partial":false,"_empty":false,"title":"Setup","description":"Learn how to setup atoms locator module in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/nuxt.config#buildmodules","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt 3 documentation"}]},{"type":"text","value":" for more information about installing and using modules."}]},{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@atoms-studio/atoms-locator"}]},{"type":"text","value":" dependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add @atoms-studio/atoms-locator\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add @atoms-studio/atoms-locator\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install @atoms-studio/atoms-locator\n","filename":"npm","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @atoms-studio/atoms-locator\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@atoms-studio/atoms-locator"}]},{"type":"text","value":" to the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/features/modules#the-modules-property","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]}]},{"type":"text","value":" section of your Nuxt configuration:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  modules: ['@atoms-studio/atoms-locator'],\n  atomsLocator: {\n    // Options\n  }\n}\n","filename":"nuxt.config.js|ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  modules: ['@atoms-studio/atoms-locator'],\n  atomsLocator: {\n    // Options\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Defaults:"}]},{"type":"element","tag":"code","props":{"code":"{\n  key: process.env.GOOGLE_API_KEY || 'google_api_key',\n  markerIcon: '',\n  activeMarkerIcon: '',\n  clustererIcon: '',\n  autoImports: false\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  key: process.env.GOOGLE_API_KEY || 'google_api_key',\n  markerIcon: '',\n  activeMarkerIcon: '',\n  clustererIcon: '',\n  autoImports: false\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"key"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"key"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Google Maps Api key."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Environment variable "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GOOGLE_API_KEY"}]},{"type":"text","value":" can be used to override "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"key"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"markericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"markerIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide the path for the Google Marker icon."}]},{"type":"element","tag":"h3","props":{"id":"activemarkericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"activeMarkerIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide the path for the Google Marker active icon."}]},{"type":"element","tag":"h3","props":{"id":"clusterericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clustererIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Provide the path for the Google Clusterer icon."}]},{"type":"element","tag":"h3","props":{"id":"autoimports"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autoImports"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Automatic injection of a Pinia store with some utilities and methods for easy implementation of a store locator project."}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you set "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autoImports: true"}]},{"type":"text","value":" check your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":".\nProbably, Pinia is included in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" array.\nIf "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules: ['@pinia/nuxt']"}]},{"type":"text","value":" you need to configure the autoImports composables:"}]},{"type":"element","tag":"code","props":{"code":"[\n  \"@pinia/nuxt\",\n  {\n    autoImports: [\"defineStore\", \"storeToRefs\", \"acceptHMRUpdate\"],\n  },\n]\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[\n  \"@pinia/nuxt\",\n  {\n    autoImports: [\"defineStore\", \"storeToRefs\", \"acceptHMRUpdate\"],\n  },\n]\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also you need to check and remove the packages "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pinia"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@pinia/nuxt"}]},{"type":"text","value":" from your package.json because they will be automatically installed by the module."}]}]}]},"_type":"markdown","_id":"content:2.setup.md","_source":"content","_file":"2.setup.md","_extension":"md"},{"_path":"/atoms-composables","_draft":false,"_partial":false,"_empty":false,"title":"Atoms Composables","description":"Learn how to use the atoms composables in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes composables that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"usegooglekey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This composable return the Google Api Key provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const API_KEY = useGoogleKey()\n  console.log('my google key', API_KEY)\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const API_KEY = useGoogleKey()\n  console.log('my google key', API_KEY)\n</script>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegooglemapref"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleMapRef"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which provide the Google Map instance after initialization."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { init, mapInstance } = useGoogleMapRef()\n  console.log('my mapInstance', mapInstance.value)\n\n  onMounted(() => {\n    init(DomElement)\n  })\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { init, mapInstance } = useGoogleMapRef()\n  console.log('my mapInstance', mapInstance.value)\n\n  onMounted(() => {\n    init(DomElement)\n  })\n</script>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegoogleclusterer"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleClusterer"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which deals with the Google Map markers instance."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markersInstance, addGoogleMarker } = useGoogleClusterer()\n  console.log('my reactive markers', markersInstance.value)\n\n  onMounted(() => {\n    addGoogleMarker(GoogleMarker)\n  })\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { markersInstance, addGoogleMarker } = useGoogleClusterer()\n  console.log('my reactive markers', markersInstance.value)\n\n  onMounted(() => {\n    addGoogleMarker(GoogleMarker)\n  })\n</script>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"markersinstance"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"markersInstance"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the reactive google markers."}]},{"type":"element","tag":"h3","props":{"id":"clusterericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clustererIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the clustererIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"h3","props":{"id":"addgooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"addGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Adds a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h3","props":{"id":"deletegooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"deleteGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Removes a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h2","props":{"id":"usemarkericons"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useMarkerIcons"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the markerIcon and activeMarkerIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markerIcon, activeMarkerIcon } = useMarkerIcons()\n  console.log('icon path', markerIcon.value)\n  console.log('active icon path', activeMarkerIcon.value)\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { markerIcon, activeMarkerIcon } = useMarkerIcons()\n  console.log('icon path', markerIcon.value)\n  console.log('active icon path', activeMarkerIcon.value)\n</script>\n"}]}]}]}]},"_type":"markdown","_id":"content:4.atoms-composables.md","_source":"content","_file":"4.atoms-composables.md","_extension":"md"}]