Update Nuxt Configuration and Enhance ProcessFlowCanvas Component

- Added optimization settings for 'vue-toastification' in nuxt.config.js to improve dependency handling.
- Wrapped VueFlow component in a <client-only> tag within ProcessFlowCanvas.vue to prevent server-side rendering issues, ensuring proper rendering of flow components only on the client side.
- Maintained existing functionality while enhancing the user experience in the process flow interface.

components/process-flow/ProcessFlowCanvas.vue

@@ -1135,7 +1135,9 @@ function fromObject(flowObject) {
     @drop="onDrop"
     @dragover="onDragOver"
   >
+    <client-only>
       <VueFlow
+        v-if="nodes.length > 0"
         v-bind="flowOptions"
         class="bg-slate-50 process-flow"
         :nodeTypes="customNodeTypes"
@@ -1192,16 +1194,13 @@ function fromObject(flowObject) {
         <Background pattern-color="#aaa" gap="20" />
         <Controls />
         <MiniMap />
-      
         <!-- Custom edge template -->
         <template #edge-custom="edgeProps">
           <InteractiveArrowEdge v-bind="edgeProps" />
         </template>
-      
         <template #edge-label="{ label }">
           <div class="edge-label">{{ label }}</div>
         </template>
-
         <Panel position="top-right" class="node-controls">
           <div class="p-2 bg-white rounded shadow-sm text-sm">
             <div class="mb-1 font-medium">Controls:</div>
@@ -1217,6 +1216,7 @@ function fromObject(flowObject) {
           </div>
         </Panel>
       </VueFlow>
+    </client-only>
   </div>
 </template>
 

nuxt.config.js

@@ -29,6 +29,12 @@ export default defineNuxtConfig({
         interval: 1000,
       },
     },
+    optimizeDeps: {
+      include: ['vue-toastification'],
+    },
+    ssr: {
+      noExternal: ['vue-toastification'],
+    },
   },
   head: {
     title: "corrad",