diff --git a/pages/datatable/Paginator.vue b/pages/datatable/Paginator.vue
index cb1ac75fb..6aa7cc6eb 100755
--- a/pages/datatable/Paginator.vue
+++ b/pages/datatable/Paginator.vue
@@ -1,4 +1,5 @@
 <template>
+      <ClientOnly>
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
@@ -32,11 +33,10 @@
                 </DataTable>
             </div>
         </div>
-
-        <ClientOnly>
 <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
-</ClientOnly>
+
     </div>
+</ClientOnly>
 </template>
 
 <script>
diff --git a/pages/liveeditor/LiveEditor.vue b/pages/liveeditor/LiveEditor.vue
index 3ad504206..128e9ba90 100644
--- a/pages/liveeditor/LiveEditor.vue
+++ b/pages/liveeditor/LiveEditor.vue
@@ -1,7 +1,9 @@
 <template>
+    <div>
     <span v-if="showEditor" class="flex justify-content-end">
         <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false" />
     </span>
+</div>
 </template>
 
 <script>
@@ -109,7 +111,7 @@ export default {
 
             let extIndexCSS = extFiles['index.css'] || '';
             delete extFiles['index.css'];
-            
+
             const dependencies = packageJson ? packageJson.devDependencies : {};
 
             let defaultCss = {
diff --git a/pages/liveeditor/LiveEditorData.js b/pages/liveeditor/LiveEditorData.js
index 7409b34d1..a9eb83b89 100644
--- a/pages/liveeditor/LiveEditorData.js
+++ b/pages/liveeditor/LiveEditorData.js
@@ -3,7 +3,7 @@ const services = {
 export default class CountryService {
 
     getCountries() {
-        return fetch('demo/data/countries.json').then(res => res.json())
+        return useFetch('demo/data/countries.json').then(res => res.json())
             .then(d => d.data);
     }
 }
@@ -12,28 +12,28 @@ export default class CountryService {
 export default class CustomerService {
 
     getCustomersSmall() {
-        return fetch('demo/data/customers-small.json').then(res => res.json())
+        return useFetch('demo/data/customers-small.json').then(res => res.json())
                 .then(d => d.data);
     }
 
     getCustomersMedium() {
-        return fetch('demo/data/customers-medium.json').then(res => res.json())
+        return useFetch('demo/data/customers-medium.json').then(res => res.json())
                 .then(d => d.data);
     }
 
     getCustomersLarge() {
-        return fetch('demo/data/customers-large.json').then(res => res.json())
+        return useFetch('demo/data/customers-large.json').then(res => res.json())
                 .then(d => d.data);
     }
 
     getCustomersXLarge() {
-        return fetch('demo/data/customers-xlarge.json').then(res => res.json())
+        return useFetch('demo/data/customers-xlarge.json').then(res => res.json())
                 .then(d => d.data);
     }
 
     getCustomers(params) {
         const queryParams = params ? Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&') : '';
-        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
+        return useFetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
     }
 }
     `,
@@ -41,7 +41,7 @@ export default class CustomerService {
 export default class EventService {
 
     getEvents() {
-        return fetch('demo/data/events.json').then(res => res.json())
+        return useFetch('demo/data/events.json').then(res => res.json())
                 .then(d => d.data);
     }
 }
@@ -50,12 +50,12 @@ export default class EventService {
 export default class NodeService {
 
     getTreeTableNodes() {
-        return fetch('demo/data/treetablenodes.json').then(res => res.json())
+        return useFetch('demo/data/treetablenodes.json').then(res => res.json())
                 .then(d => d.root);
     }
 
     getTreeNodes() {
-        return fetch('demo/data/treenodes.json').then(res => res.json())
+        return useFetch('demo/data/treenodes.json').then(res => res.json())
                 .then(d => d.root);
     }
 }
@@ -64,7 +64,7 @@ export default class NodeService {
 export default class PhotoService {
 
     getImages() {
-        return fetch('demo/data/photos.json').then(res => res.json())
+        return useFetch('demo/data/photos.json').then(res => res.json())
                 .then(d => d.data);
     }
 }
@@ -73,15 +73,15 @@ export default class PhotoService {
 export default class ProductService {
 
     getProductsSmall() {
-		return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
+		return useFetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
 	}
 
 	getProducts() {
-		return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
+		return useFetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
     }
 
     getProductsWithOrdersSmall() {
-		return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
+		return useFetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
 	}
 }
 
diff --git a/pages/validation/index.vue b/pages/validation/index.vue
index 41cef1a33..3358b3d01 100644
--- a/pages/validation/index.vue
+++ b/pages/validation/index.vue
@@ -1,4 +1,5 @@
 <template>
+    <ClientOnly>
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
@@ -92,7 +93,7 @@
             </div>
         </div>
 
-        <ClientOnly>
+        
 <AppDoc
             name="VuelidateFormDemo"
             :sources="sources"
@@ -101,8 +102,9 @@
             github="validation/VuelidateFormDemo.vue"
             :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }"
         />
-        </ClientOnly>
+        
     </div>
+</ClientOnly>
 </template>
 
 <script>