HTML:
<div id="destiny-output">
    <certificate-search-flexible-view>
        <!-- Variables available: vue, status, searchStatus, functions, components, filterOptions, currentFilters, certificates, pagination, searched, keyword -->
        <!-- Show different content depending on the state of the view ('loading', 'error' or 'ready') -->
        <loading-icon v-if="status.state === 'loading'"></loading-icon>
        <p v-else-if="status.state === 'error'">There was an error: {{status.errorMessage}}</p>

        <template v-else>
            <!-- Example of using data -->
            <h1 class="border-b my-4">Example</h1>
            <h2>Certificate Search</h2>

            <div class="flex my-4">
                <!-- Bind 'keyword' vue ref to input so variable always has the value of the input -->
                <!-- Trigger search when on input and pressing 'enter' -->
                <input type="text" class="border flex-grow mr-2" v-model="keyword" @keydown.enter="functions.search">
                <!-- Trigger search when clicking 'Search' button -->
                <button class="btn" @click="functions.search">Search</button>
            </div>

            <div class="grid grid-cols-4 gap-4">
                <!-- Output filters based on the 'filters' object returned in the JavaScript -->
                <template v-for="filter in filters">
                    <!-- Determine the type of input to show -->
                    <label v-if="filter.type === 'text'">
                        <span class="block">{{filter.label}}</span>
                        <!-- Bind input to currentFilters so we always have the value of the input -->
                        <!-- Trigger search when input changes -->
                        <input type="text" class="border w-full" v-model="currentFilters[filter.optionKey]" @change="functions.search">
                    </label>
                    <label v-else-if="filter.type === 'multiselect-tree'">
                        <span class="block">{{filter.label}}</span>
                        <!-- Bind input to currentFilters so we always have the value of the input -->
                        <!-- Trigger search when input changes -->
                        <select class="border w-full" v-model="currentFilters[filter.optionKey]" multiple @change="functions.search">
                            <!-- Loop through all options and display -->
                            <template v-for="option in filterOptions[filter.optionKey].items">
                                <option :value="option.value">{{option.label}}</option>
                                <option v-for="suboption in option.subItems" :value="suboption.value">&nbsp;&nbsp;{{suboption.label}}</option>
                            </template>
                        </select>
                    </label>
                    <label v-else>
                        <span class="block">{{filter.label}}</span>
                        <!-- Bind input to currentFilters so we always have the value of the input -->
                        <!-- Trigger search when input changes -->
                        <select class="border-b w-full" v-model="currentFilters[filter.optionKey]" :multiple="filter.type === 'multiselect'" @change="functions.search">
                            <!-- Loop through all options and display -->
                            <option v-for="option in filterOptions[filter.optionKey].items" :value="option.value">{{option.label}}</option>
                        </select>
                    </label>
                </template>

                <!-- Reset currentFilters when clicked -->
                <button @click="resetFilters" class="btn">Reset Filters</button>
            </div>

            <!-- Only show this content after first search -->
            <div v-if="searched" class="mt-4">
                <!-- Provide loading and error messages while executing a search -->
                <loading-icon v-if="searchStatus.state === 'loading'"></loading-icon>
                <p v-else-if="searchStatus.state === 'error'">There was an error searching: {{searchStatus.errorMessage}}</p>

                <!-- Show this content after a successful search -->
                <template v-else>
                    <!-- Output total number of certificates found -->
                    <h3>{{pagination.numTotalCourses}} Certificates Found</h3>
                    <!-- Output search results for this page -->
                    <div v-for="certificate in certificates" class="bg-gray-100 mb-2 p-3">
                        <!-- Link to certificate page -->
                        <h3><a v-link-to="{view: 'certificate-detail-view', code: certificate.id}" class>{{certificate.name}}</a></h3>
                        <p>{{certificate.code}}</p>
                    </div>

                    <!-- Use pre-built pagination. Works out of the box -->
                    <component :is="components.Pagination"></component>

                    <!-- Make your own pagination -->
                    <ul class="mt-4 list-none m-0 p-0 flex justify-center">
                        <li v-for="i in pagination.numPages.value" class="mx-1">
                            <a href="javascript:;" @click="functions.goToPage(i)" :class="{'!no-underline !text-black': i == pagination.currentPage.value}">{{i}}</a>
                        </li>
                    </ul>
                </template>
            </div>

            <!-- Data information -->
            <h1 class="border-b my-4">Data</h1>

            <h2 class="my-4">Functions</h2>
            <div v-html="functions.list()"></div>

            <h2 class="my-4">Filter Options</h2>
            <endpoint-table :data="filterOptions"></endpoint-table>

            <h2 class="my-4">Certificates</h2>
            <endpoint-table :data="certificates"></endpoint-table>
        </template>
    </certificate-search-flexible-view>
</div>

JavaScript:
new CMSStartD1Connector({
    el: document.getElementById("destiny-output"),
    config: CMSConfigObject.destinyOne,

    setup: ({vue, status, searchStatus, functions, filterOptions, currentFilters, certificates, pagination, searched, keyword}) => {
        /*
            vue refs must be accessed with .value
            status: object containing info on view state. Contains 'state' and 'errorMessage' properties
            searchStatus: object containing info on searchingstate. Contains 'state' and 'errorMessage' properties
            functions: object containing various functions
            filterOptions: vue ref object with information on what filters are available and their corresponding options
            currentFilters: vue reactive object detailing current filter values
            certificates: vue ref object containing search results
            pagination: object of vue refs containing info about pagination. Contains 'currentPage', 'numPages' and 'numTotalCourses' properties
            searched: vue ref boolean specifying if a search has been performed (false on load, true after first search has been executed)
            keyword: vue ref string specifying the value of the keyword search input

            Example of access:
            filterOptions.value.availability.default
            currentFilters.availability
            certificates.value[0].name
            pagination.currentPage.value
            keyword.value
        */

        /* EXAMPLE CODE */
        // Vue utilities are properties of vue (vue.ref, vue.reactive, etc)
        // Available vue utilities: ref, reactive, computed, onMounted, onUnmounted, watch, watchEffect, nextTick, onUpdated
        const exampleRef = vue.ref(null);
        const exampleReactive = vue.reactive({
            prop1: 'value 1',
            prop2: 'value 2',
        });

        // filterOptions is null until the data is loaded
        console.log("filterOptions: ", filterOptions.value);
        // courses is are null until a search is performed
        console.log("certificates: ", certificates.value);

        // Watch for the 'ready' state to know filterOptions are loaded and the view is ready
        vue.watch(status, () => {
            if (status.state === 'ready') {
                console.log("filterOptions: ", filterOptions.value);

                // Override default page title
                functions.setPageTitle('My Page');
            }
        });
        // Watch for the 'ready' state to know courses are loaded
        vue.watch(searchStatus, () => {
            if (searchStatus.state === 'ready') {
                console.log("certificates: ", certificates.value);
            }
        });
        /* /EXAMPLE CODE */
        
        // Return anything you want to be available in the template as an object
        // (Note: template refs must be returned in order to function)
        return {
            resetFilters () {
                functions.resetFilters();
                functions.search();
            },
            filters: [
                {
                    label: 'Type',
                    optionKey: 'types',
                },
                {
                    label: 'Interest Area',
                    optionKey: 'interestAreas',
                },
                {
                    label: 'Subject',                   // visual label
                    optionKey: 'programAreaStreams',    // key in active filters
                    type: 'multiselect-tree',
                },
            ],
        };
    },
});