diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 0a6f6b3c4..8c4e3c684 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -26,12 +26,12 @@ import DomHandler from '../utils/DomHandler';
 
 export default {
     props: {
+		header: null,
+		footer: null,
         visible: Boolean,
-        header: null,
-        footer: null,
         modal: Boolean,
+		contentStyle: null,
         rtl: Boolean,
-        contentStyle: null,
         closable: {
             type: Boolean,
             default: true
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 5b6d74bcc..c3592690d 100644
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -20,10 +20,14 @@
                 </template>
             </Dialog>
         </div>
+
+        <DialogDoc/>
     </div>
 </template>
 
 <script>
+import DialogDoc from './DialogDoc';
+
 export default {
     data() {
         return {
@@ -37,6 +41,9 @@ export default {
         close() {
             this.display = false;
         }
+    },
+    components: {
+        'DialogDoc': DialogDoc
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
new file mode 100644
index 000000000..3da47d676
--- /dev/null
+++ b/src/views/dialog/DialogDoc.vue
@@ -0,0 +1,242 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Dialog from 'primevue/dialog';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Dialog is used as a container and visibility is managed with <i>visible</i> property, use the sync operator for two-way binding.</p>
+<CodeHighlight>
+&lt;Dialog header=&quot;Godfather I&quot; :visible.sync=&quot;display&quot; &gt;
+	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+	Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+	kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+&lt;/Dialog&gt;
+</CodeHighlight>
+<CodeHighlight lang="js">
+export default {
+	data() {
+		return {
+			display: false
+		}
+	}
+}
+</CodeHighlight>
+
+				<h3>Header and Footer</h3>
+				<p>Header and Footer sections are defined using properties with the same name that accept simple strings or slots for custom content.</p>
+<CodeHighlight>
+&lt;Dialog header=&quot;Godfather I&quot; :visible.sync=&quot;display&quot;&gt;
+	Content
+	&lt;template slot=&quot;footer&quot;&gt;
+		&lt;Button label=&quot;Yes&quot; icon=&quot;pi pi-check&quot; /&gt;
+		&lt;Button label=&quot;No&quot; icon=&quot;pi pi-times&quot; class=&quot;p-button-secondary&quot;/&gt;
+	&lt;/template&gt;
+&lt;/Dialog&gt;
+</CodeHighlight>
+
+				<h3>Dynamic Content</h3>
+				<p>Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via <i>contentStyle</i> so longer content displays a scrollbar.</p>
+
+				<h3>Properties</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Type</th>
+							<th>Default</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>header</td>
+							<td>any</td>
+							<td>null</td>
+							<td>Title content of the dialog.</td>
+						</tr>
+						<tr>
+							<td>footer</td>
+							<td>any</td>
+							<td>null</td>
+							<td>Footer content of the dialog.</td>
+						</tr>
+						<tr>
+							<td>visible</td>
+							<td>boolean</td>
+							<td>false</td>
+							<td>Specifies the visibility of the dialog.</td>
+						</tr>
+						<tr>
+							<td>modal</td>
+							<td>boolean</td>
+							<td>null</td>
+							<td>Defines if background should be blocked when dialog is displayed.</td>
+						</tr>
+						<tr>
+							<td>contentStyle</td>
+							<td>object</td>
+							<td>null</td>
+							<td>Style of the content section.</td>
+						</tr>
+						<tr>
+							<td>rtl</td>
+							<td>boolean</td>
+							<td>null</td>
+							<td>When enabled dialog is displayed in RTL direction.</td>
+						</tr>
+						<tr>
+							<td>closable</td>
+							<td>boolean</td>
+							<td>true</td>
+							<td>Adds a close icon to the header to hide the dialog.</td>
+						</tr>
+						<tr>
+							<td>showHeader</td>
+							<td>boolean</td>
+							<td>true</td>
+							<td>Whether to show the header or not.</td>
+						</tr>
+						<tr>
+							<td>baseZIndex</td>
+							<td>number</td>
+							<td>0</td>
+							<td>Base zIndex value to use in layering.</td>
+						</tr>
+						<tr>
+							<td>autoZIndex</td>
+							<td>boolean</td>
+							<td>true</td>
+							<td>Whether to automatically manage layering.</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Events</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Parameters</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>hide</td>
+							<td>event: Event object</td>
+							<td>Callback to invoke when dialog is hidden.</td>
+						</tr>
+						<tr>
+							<td>show</td>
+							<td>event: Event object</td>
+							<td>Callback to invoke when dialog is showed.</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>p-dialog</td>
+							<td>Container element.</td>
+						</tr>
+						<tr>
+							<td>p-dialog-titlebar</td>
+							<td>Container of header.</td>
+						</tr>
+						<tr>
+							<td>p-dialog-title</td>
+							<td>Header element.</td>
+						</tr>
+						<tr>
+							<td>p-dialog-titlebar-icon</td>
+							<td>Icon container inside header.</td>
+						</tr>
+						<tr>
+							<td>p-dialog-titlebar-close</td>
+							<td>Close icon element.</td>
+						</tr>
+						<tr>
+							<td>p-dialog-content</td>
+							<td>Content element</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;template&gt;
+	&lt;div&gt;
+		&lt;div class=&quot;content-section introduction&quot;&gt;
+			&lt;div class=&quot;feature-intro&quot;&gt;
+				&lt;h1&gt;Dialog&lt;/h1&gt;
+				&lt;p&gt;Dialog is a container to display content in an overlay window.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class=&quot;content-section implementation&quot;&gt;
+			&lt;Button label=&quot;Show&quot; icon=&quot;pi pi-external-link&quot; @click=&quot;open&quot; /&gt;
+			&lt;Dialog header=&quot;Godfather I&quot; :visible.sync=&quot;display&quot; :style=&quot;{width: '50vw'}&quot; :modal=&quot;true&quot;&gt;
+				The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+				His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+				Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+				kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+				&lt;template slot=&quot;footer&quot;&gt;
+					&lt;Button label=&quot;Yes&quot; icon=&quot;pi pi-check&quot; @click=&quot;close&quot; /&gt;
+					&lt;Button label=&quot;No&quot; icon=&quot;pi pi-times&quot; @click=&quot;close&quot; class=&quot;p-button-secondary&quot;/&gt;
+				&lt;/template&gt;
+			&lt;/Dialog&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/template&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			display: false
+		}
+	},
+	methods: {
+		open() {
+			this.display = true;
+		},
+		close() {
+			this.display = false;
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file