Astrojs: share server vars to client
In your astro file.
---
const foregroundColor = "rgb(221 243 228)"; // CSS variable shared
const backgroundColor = "rgb(24 121 78)"; // CSS variable shared
const message = "Astro is awesome!"; // Javascript variable shared
---/* +++++ CSS variables to share as below +++++ */
<style define:vars={{ textColor: foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--textColor);
}
</style>
/* ++++ Javascript variables to share as below ++++ */
<script define:vars={{ message }}>
alert(message);
</script>There is also a concept of sharing states using nanostore stated in documentation . It allows sharing states between components at framework level on client-side. Not between client and server.
Theoretically sharing states from server to client can be done using hydration technique by combining define:vars and nanostore library map api during the onLoad event may be 🧪.
Updated: Alternatively load the full script externaly
The previous code here seems to have been deprecated. But this is much smaller if it works as suggested:
<script>
import 'lightbox2/dist/js/lightbox.min.js'
</script>