docs: replace vuepress specific components

docs/src/examples/edges/connection-line.md

@@ -11,9 +11,9 @@ functionality you can use your own custom connection line.
 Simply pass a component in the designated template slot, and you're good to go.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="connectionline"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>

docs/src/examples/edges/index.md

@@ -9,9 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
 In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="edges"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>

docs/src/examples/edges/updatable-edge.md

@@ -14,9 +14,9 @@ for specific edges by using the `updatable` attribute.
 
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="updateEdge"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>

docs/src/examples/edges/validation.md

@@ -31,9 +31,9 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="validation"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>