HTML:
<div id="destiny-output">
    <program-area-list-flexible-view>
        <!-- Variables available: status, functions, components, programAreas -->
        <!-- 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>Programs</h2>
            <ul>
                <!-- Loop through all program areas -->
                <li v-for="programArea in programAreas">
                    <!-- Output program area name and link to that page -->
                    <h3><a v-link-to="{view: 'program-area-detail-view', code: programArea.code}">{{programArea.name}}</a></h3>
                    <ul>
                        <!-- Loop through all program streams in a program area, output them and link to that page -->
                        <li v-for="programStream in programArea.programStreams"><a v-link-to="{view: 'program-stream-detail-view', code: programStream.code}">{{programStream.name}}</a></li>
                    </ul>
                </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 Areas</h2>
            <endpoint-table :data="programAreas"></endpoint-table>
        </template>
    </program-area-list-flexible-view>
</div>

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

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

            Example of access:
            programAreas.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',
        });

        // programAreas is null until the data is loaded
        console.log("programAreas: ", programAreas.value);

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

                // Override default page title
                functions.setPageTitle('My Page');
            }
        });

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