vue-plugin-load-script

import { createApp, defineComponent, onMounted } from 'vue'; import LoadScript, { loadScript } from 'vue-plugin-load-script'; const RootComponent = defineComponent({ template: ` <div id="app"> <h1>Script Loader Example</h1> <p>Check console for script load status.</p> <div id="map" style="height: 300px; width: 100%;"></div> </div> `, setup() { // Replace with your actual Google Maps API key or use environment variable const GOOGLE_MAPS_API_KEY = process.env.VUE_APP_GOOGLE_MAPS_API_KEY ?? 'YOUR_API_KEY_HERE'; const googleMapsUrl = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&callback=initMap`; // Define a global callback function required by Google Maps API (window as any).initMap = () => { console.log('Google Maps API script loaded and initMap callback executed!'); // Example: Initialize a basic map const mapElement = document.getElementById('map'); if (mapElement && (window as any).google?.maps?.Map) { new (window as any).google.maps.Map(mapElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); console.log('Google Map initialized.'); } }; onMounted(async () => { console.log('Attempting to load Google Maps script...'); try { await loadScript(googleMapsUrl); console.log('Google Maps script load promise resolved.'); // initMap will be called automatically by the Google Maps script once loaded } catch (error) { console.error('Failed to load Google Maps script:', error); } }); return {}; }, }); const app = createApp(RootComponent); app.use(LoadScript); // Register the plugin globally for Options API access ($loadScript) app.mount('#app');