Update viewer to not be a ref

src/App.vue

@@ -1,6 +1,7 @@
 <template>
-  <main>
+  <main class="relative">
     <SpeckleViewer />
+    <ControlPanel />
   </main>
 </template>
 

src/components/ControlPanel.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="absolute top-20 left-10 bg-white rounded-lg p-4 shadow-md">
+    <h2 class="text-2xl font-bold mb-4">Control Panel</h2>
+  </div>
+</template>

src/components/SpeckleViewer.vue

@@ -14,6 +14,8 @@ const { init: initViewer, viewer, loadModelFromUrl } = useViewer()
 onMounted(async () => {
   if (!canvas.value) return
   await initViewer(canvas.value)
-  await loadModelFromUrl('https://app.speckle.systems/projects/24c98619ac/models/38639656b8')
+  await loadModelFromUrl(
+    'https://app.speckle.systems/projects/24c98619ac/models/38639656b8'
+  )
 })
 </script>

src/composables/viewer.ts

@@ -8,9 +8,9 @@ import {
   Viewer,
 } from '@speckle/viewer'
 
-export default function useViewer() {
-  const viewer = ref<Viewer | null>(null)
+let viewer: Viewer | null = null
 
+export default function useViewer() {
   /**
    * Initialize the viewer
    * @param element - HTMLDivElement to initialize the viewer on
@@ -22,11 +22,13 @@ export default function useViewer() {
     params.verbose = true
 
     // Create the viewer instance on the element
-    viewer.value = new Viewer(element, params)
+    viewer = new Viewer(element, params)
+
+    await viewer.init()
 
     // Add the stock camera controller and selection extensions
-    viewer.value.createExtension(CameraController)
-    viewer.value.createExtension(SelectionExtension)
+    viewer.createExtension(CameraController)
+    viewer.createExtension(SelectionExtension)
   }
 
   /**
@@ -34,12 +36,12 @@ export default function useViewer() {
    * @param url - The URL of the Speckle model
    */
   const loadModelFromUrl = async (url: string) => {
-    if (!viewer.value) return
+    if (!viewer) return
 
     const urls = await UrlHelper.getResourceUrls(url)
     urls.forEach(async (url) => {
-      const loader = new SpeckleLoader(viewer.value.getWorldTree(), url, '')
-      await viewer.value.loadObject(loader, true)
+      const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
+      await viewer.loadObject(loader, true)
     })
   }