Skip to content

Instantly share code, notes, and snippets.

@fvanzeijl
Last active November 10, 2022 13:35
Show Gist options
  • Save fvanzeijl/ad48a352b6f05adb422539b72ad6e013 to your computer and use it in GitHub Desktop.
Save fvanzeijl/ad48a352b6f05adb422539b72ad6e013 to your computer and use it in GitHub Desktop.
Register npm modules globaly in Alpinejs via alpine.store
// Import modules
import Swiper from 'swiper'
// Import alpine
import Alpine from 'alpinejs'
window.Alpine = Alpine
// Register module in alpines store
Alpine.store('Swiper', Swiper)
// Start alpine
Alpine.start()
<div x-data="mySliderComponent">
<div class="swiper">
...
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('mySliderComponent', () => ({
slider: null,
init() {
if(this.$refs.slider) {
this.slider = new this.$store.Swiper(this.$refs.slider, {})
}
}
})
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment