fix: use onMounted for Prism code

EnergySage · Sep 16, 2024 · 02abf54 · 02abf54
1 parent 9ff8afe
commit 02abf54
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/es-ds-docs/pages/molecules/slider.vue b/es-ds-docs/pages/molecules/slider.vue
@@ -5,28 +5,30 @@ const max = ref(1000);
 const step = ref(50);
 const ariaLabel = ref('Sample aria-label');
 
-const { $prism } = useNuxtApp();
-const compCode = ref('');
-const docCode = ref('');
-
-if ($prism) {
-    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
-    const compSource = await import('@energysage/es-ds-components/components/es-slider.vue?raw');
-    const docSource = await import('./slider.vue?raw');
-    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
-
-    compCode.value = $prism.normalizeCode(compSource.default);
-    docCode.value = $prism.normalizeCode(docSource.default);
-    $prism.highlight();
-}
-
 const propTableRows = [
     ['min', 'Number', '0', 'Required. Minimum value of slider.'],
     ['max', 'Number', '100', 'Required. Maximum value of slider.'],
     ['step', 'Number', '1', 'Step factor to increment/decrement the value.'],
     ['ariaLabel', 'String', '"Pick a number"', 'Aria-label for slider handle.'],
     ['labelFormatter', 'Function', 'n/a', 'Function that modifies label value.'],
 ];
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+onMounted(async () => {
+    if ($prism) {
+        /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+        const compSource = await import('@energysage/es-ds-components/components/es-slider.vue?raw');
+        const docSource = await import('./slider.vue?raw');
+        /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
+
+        compCode.value = $prism.normalizeCode(compSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+});
 </script>
 
 <template>