HTML:
<div id="destiny-output">
    <program-stream-detail-flexible-view>
        <!-- Variables available: status, functions, components, programStream, courses, certificates -->
        <!-- 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>

            <!-- Output program stream name -->
            <h2 class="my-4">{{programStream.name}}</h2>
            <!-- Output program stream description -->
            <div v-html="programStream.description"></div>

            <h3 class="my-4">Offerings</h3>
            <h4>Courses</h4>
            <ul>
                <!-- Loop through and output all courses in this program stream -->
                <li v-for="course in courses">
                    <!-- Link to course page, output course name and code -->
                    <a v-link-to="{view: 'course-detail-view', id: course.id}">{{course.name}} - {{course.code}}</a>
                </li>
            </ul>
            <h4>Certificates</h4>
            <ul>
                <!-- Loop through and output all certificates in this program stream -->
                <li v-for="certificate in certificates">
                    <!-- Link to certificate page, output certificate name and code -->
                    <a v-link-to="{view: 'certificate-detail-view', code: certificate.code}">{{certificate.name}} - {{certificate.code}}</a>
                </li>
            </ul>


            <!-- 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">Program Stream</h2>
            <endpoint-table :data="programStream"></endpoint-table>

            <h2 class="my-4">Certificates</h2>
            <endpoint-table :data="certificates"></endpoint-table>

            <h2 class="my-4">Courses</h2>
            <endpoint-table :data="courses"></endpoint-table>
        </template>
    </program-stream-detail-flexible-view>
</div>

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

    setup: ({vue, status, functions, programStream, courses, certificates}) => {
        /*
            vue refs must be accessed with .value
            status: object containing info on view state. Contains 'state' and 'errorMessage' properties
            functions: object containing various functions
            programStream: vue ref object containing program stream information
            courses: vue ref array containing courses
            certificates: vue ref array containing certificates

            Example of access:
            programStream.value.name
            courses.value[0].name
        */

        // 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',
        });

        // programStream, courses and certificates are null until the data is loaded
        console.log("programStream: ", programStream.value);
        console.log("courses: ", courses.value);
        console.log("certificates: ", certificates.value);

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

                // Override default page title
                setTimeout(() => functions.setPageTitle('My Page'), 0);
            }
        });

        // Return anything you want to be available in the template as an object
        // (Note: template refs must be returned in order to function)
        return {
            exampleReactive,
        };
    },
});