HTML:

There was an error: {{status.errorMessage}}

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