Vue Event Loader

We love Vue, so we wanted to provide a way for Vue users to get their events using a Vue component that has relatively the same syntax as the {{ events }} counter-part.

We provide an <events> tag. the parameters are the same, but for Vue.

The core concept is simple. The <events> tag provides two slots, default and loading. The default slot scope provides the returned data, and some more methods to fetch and manipulate the request.

Required Scripts

        <title>Basic Example</title>
        <script src="" defer></script>
        <script src="/vendor/statamic-events/js/events.js" defer></script>

        // app.js
        Vue.component('events', window.Events);

        new Vue({
            el: '#app'

        <div id="app">
            <events start="01/01/2020" end="01/31/2020">
                <template v-slot:loading>
                <template v-slot:default="{ events, fetch }">
                    <div for="event in events" :key="">
                        {{ event }}
                    <a href="#" @click.prevent="fetch">Reload</a>

Advanced Example Using v-calendar