Moved logic to composable

src/components/SpeckleViewer.vue

@@ -6,38 +6,13 @@
 
 <script lang="ts" setup>
 import { onMounted, useTemplateRef } from 'vue'
-import {
-  CameraController,
-  DefaultViewerParams,
-  SelectionExtension,
-  SpeckleLoader,
-  UrlHelper,
-  Viewer,
-} from '@speckle/viewer'
+import useViewer from '@/composables/viewer'
 
 const canvas = useTemplateRef('canvas')
+const { init: initViewer, viewer, loadModelFromUrl } = useViewer()
 
 onMounted(async () => {
-  const params = DefaultViewerParams
-  params.showStats = false
-  params.verbose = true
-
-  const viewer = new Viewer(canvas.value, params)
-  await viewer.init()
-
-  /** Add the stock camera controller extension */
-  viewer.createExtension(CameraController)
-  /** Add the selection extension for extra interactivity */
-  viewer.createExtension(SelectionExtension)
-
-  /** Create a loader for the speckle stream */
-  const urls = await UrlHelper.getResourceUrls(
-    'https://app.speckle.systems/projects/24c98619ac/models/38639656b8',
-  )
-  for (const url of urls) {
-    const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
-    /** Load the speckle data */
-    await viewer.loadObject(loader, true)
-  }
+  await initViewer(canvas.value)
+  await loadModelFromUrl('https://app.speckle.systems/projects/24c98619ac/models/38639656b8')
 })
 </script>

src/composables/viewer.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import {
+  CameraController,
+  DefaultViewerParams,
+  SelectionExtension,
+  SpeckleLoader,
+  UrlHelper,
+  Viewer,
+} from '@speckle/viewer'
+
+export default function useViewer() {
+  const viewer = ref<Viewer | null>(null)
+
+  /**
+   * Initialize the viewer
+   * @param element - HTMLElement to initialize the viewer on
+   */
+  async function init(element: HTMLElement) {
+    // Set the default viewer parameters
+    const params = DefaultViewerParams
+    params.showStats = false
+    params.verbose = true
+
+    // Create the viewer instance on the element
+    viewer.value = new Viewer(element, params)
+
+    // Add the stock camera controller and selection extensions
+    viewer.value.createExtension(CameraController)
+    viewer.value.createExtension(SelectionExtension)
+  }
+
+  /**
+   * Load a model from a Speckle URL
+   * @param url - The URL of the Speckle model
+   */
+  const loadModelFromUrl = async (url: string) => {
+    if (!viewer.value) 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)
+    })
+  }
+
+  return {
+    init,
+    viewer,
+    loadModelFromUrl,
+  }
+}