diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 5c134d0d4..77dd2cf59 100644
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -10,12 +10,12 @@
 export default {
     props: {
         value: Number,
+		disabled: Boolean,
+		readonly: Boolean,
         stars: {
             type: Number,
             default: 5
         },
-        readonly: Boolean,
-        disabled: Boolean,
         cancel: {
             type: Boolean,
             default: true
diff --git a/src/views/rating/RatingDemo.vue b/src/views/rating/RatingDemo.vue
index 9a57660be..2bf7b26bc 100644
--- a/src/views/rating/RatingDemo.vue
+++ b/src/views/rating/RatingDemo.vue
@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <h3 class="first">Basic {{val1}}</h3>
-            <Rating v-model="val1"  />
+            <Rating v-model="val1" />
 
             <h3>No Cancel {{val2}}</h3> 
             <Rating v-model="val2" :cancel="false" />
@@ -20,16 +20,23 @@
             <h3>Disabled</h3> 
             <Rating :value="8" :disabled="true" :stars="10" />
         </div>
+
+        <RatingDoc/>
     </div>
 </template>
 
 <script>
+import RatingDoc from './RatingDoc';
+
 export default {
     data() {
         return {
             val1: null,
             val2: 3,
         }
+    },
+    components: {
+        'RatingDoc': RatingDoc
     }
 }
 </script>
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
new file mode 100644
index 000000000..a2c1e476f
--- /dev/null
+++ b/src/views/rating/RatingDoc.vue
@@ -0,0 +1,183 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Rating from 'primevue/rating';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Two-way value binding is defined using v-model.</p>
+<CodeHighlight>
+&lt;Rating v-model=&quot;val&quot; /&gt;
+</CodeHighlight>
+
+				<h3>Number of Stars</h3>
+				<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
+<CodeHighlight>
+&lt;Rating v-model=&quot;val&quot; :stars=&quot;7&quot;/&gt;
+</CodeHighlight>
+
+				<h3>Cancel</h3>
+				<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
+<CodeHighlight>
+&lt;Rating v-model=&quot;val&quot; :cancel=&quot;false&quot; /&gt;
+</CodeHighlight>
+
+				<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>value</td>
+							<td>number</td>
+							<td>null</td>
+							<td>Value of the rating.</td>
+						</tr>
+						<tr>
+							<td>disabled</td>
+							<td>boolean</td>
+							<td>false</td>
+							<td>When present, it specifies that the element should be disabled.</td>
+						</tr>
+						<tr>
+							<td>readonly</td>
+							<td>boolean</td>
+							<td>false</td>
+							<td>When present, changing the value is not possible.</td>
+						</tr>
+						<tr>
+							<td>stars</td>
+							<td>number</td>
+							<td>5</td>
+							<td>Number of stars.</td>
+						</tr>
+						<tr>
+							<td>cancel</td>
+							<td>boolean</td>
+							<td>true</td>
+							<td>When specified a cancel icon is displayed to allow removing the value.</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>change</td>
+							<td>event.originalEvent: Browser event <br />
+								event.value: selected value
+							</td>
+							<td>Callback to invoke on value change.</td>
+						</tr>
+						<tr>
+							<td>input</td>
+							<td>event: selected value
+							</td>
+							<td>Callback to invoke on value change.</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-rating</td>
+							<td>Container element</td>
+						</tr>
+						<tr>
+							<td>p-rating-star</td>
+							<td>Star element</td>
+						</tr>
+						<tr>
+							<td>p-rating-star-on</td>
+							<td>Selected star element.</td>
+						</tr>
+						<tr>
+							<td>p-rating-cancel</td>
+							<td>Cancel icon.</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/rating" 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;Rating&lt;/h1&gt;
+				&lt;p&gt;Rating component is a star based selection input.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class=&quot;content-section implementation&quot;&gt;
+			&lt;h3 class=&quot;first&quot;&gt;Basic {{val1}}&lt;/h3&gt;
+			&lt;Rating v-model=&quot;val1&quot; /&gt;
+
+			&lt;h3&gt;No Cancel {{val2}}&lt;/h3&gt;
+			&lt;Rating v-model=&quot;val2&quot; :cancel=&quot;false&quot; /&gt;
+
+			&lt;h3&gt;ReadOnly&lt;/h3&gt;
+			&lt;Rating :value=&quot;5&quot; :readonly=&quot;true&quot; :stars=&quot;10&quot; :cancel=&quot;false&quot; /&gt;
+
+			&lt;h3&gt;Disabled&lt;/h3&gt;
+			&lt;Rating :value=&quot;8&quot; :disabled=&quot;true&quot; :stars=&quot;10&quot; /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/template&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			val1: null,
+			val2: 3,
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file