Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/deferredcontent/DeferredContent.d.ts

@@ -0,0 +1,54 @@
+/**
+ *
+ * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
+ *
+ * [Live Demo](https://www.primevue.org/deferredcontent/)
+ *
+ * @module deferredcontent
+ *
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface DeferredContentProps {}
+
+/**
+ * Defines valid slots in DeferredContent component.
+ */
+export interface DeferredContentSlots {
+    /**
+     * Default content slot.
+     */
+    default(): VNode[];
+}
+
+/**
+ * Defines valid emits in DeferredContent component.
+ */
+export interface DeferredContentEmits {
+    /**
+     * Callback to invoke when deferred content is loaded.
+     */
+    load(): void;
+}
+
+/**
+ * **PrimeVue - DeferredContent**
+ *
+ * _DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll._
+ *
+ * [Live Demo](https://www.primevue.org/deferredcontent/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class DeferredContent extends ClassComponent<DeferredContentProps, DeferredContentSlots, DeferredContentEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        DeferredContent: GlobalComponentConstructor<DeferredContent>;
+    }
+}
+
+export default DeferredContent;

components/lib/deferredcontent/DeferredContent.spec.js

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+import DeferredContent from './DeferredContent.vue';
+
+describe('DeferredContent', () => {
+    it('should exist', async () => {
+        const wrapper = mount(DeferredContent, {
+            slots: {
+                default: '<img src="/images/nature/nature4.jpg" alt="Nature"/>'
+            }
+        });
+
+        await wrapper.setData({ loaded: true });
+        expect(wrapper.find('img').exists()).toBe(true);
+    });
+});

components/lib/deferredcontent/DeferredContent.vue

@@ -0,0 +1,59 @@
+<template>
+    <div ref="container">
+        <slot v-if="loaded"></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeferredContent',
+    emits: ['load'],
+    data() {
+        return {
+            loaded: false
+        };
+    },
+    mounted() {
+        if (!this.loaded) {
+            if (this.shouldLoad()) this.load();
+            else this.bindScrollListener();
+        }
+    },
+    beforeUnmount() {
+        this.unbindScrollListener();
+    },
+    methods: {
+        bindScrollListener() {
+            this.documentScrollListener = () => {
+                if (this.shouldLoad()) {
+                    this.load();
+                    this.unbindScrollListener();
+                }
+            };
+
+            window.addEventListener('scroll', this.documentScrollListener);
+        },
+        unbindScrollListener() {
+            if (this.documentScrollListener) {
+                window.removeEventListener('scroll', this.documentScrollListener);
+                this.documentScrollListener = null;
+            }
+        },
+        shouldLoad() {
+            if (this.loaded) {
+                return false;
+            } else {
+                const rect = this.$refs.container.getBoundingClientRect();
+                const docElement = document.documentElement;
+                const winHeight = docElement.clientHeight;
+
+                return winHeight >= rect.top;
+            }
+        },
+        load(event) {
+            this.loaded = true;
+            this.$emit('load', event);
+        }
+    }
+};
+</script>

components/lib/deferredcontent/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./deferredcontent.cjs.js",
+  "module": "./deferredcontent.esm.js",
+  "unpkg": "./deferredcontent.min.js",
+  "types": "./DeferredContent.d.ts",
+  "browser": {
+    "./sfc": "./DeferredContent.vue"
+  }
+}