diff --git a/src/views/card/CardDemo.vue b/src/views/card/CardDemo.vue
index 725bf05e5..48b4915eb 100755
--- a/src/views/card/CardDemo.vue
+++ b/src/views/card/CardDemo.vue
@@ -9,30 +9,30 @@
 
         <div class="content-section implementation">
             <Card style="width: 25rem; margin-bottom: 2em">
-                <template v-slot:title>
+                <template #title>
                     Simple Card
                 </template>
-                <template v-slot:content>
+                <template #content>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                 </template>
             </Card>
 
             <Card style="width: 25em">
-                <template v-slot:header>
+                <template #header>
                     <img alt="user header" src="demo/images/usercard.png">
                 </template>
-                <template v-slot:title>
+                <template #title>
                     Advanced Card
                 </template>
-                <template v-slot:subtitle>
+                <template #subtitle>
                     Card subtitle
                 </template>
-                <template v-slot:content>
+                <template #content>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                 </template>
-                <template v-slot:footer>
+                <template #footerfooter>
                     <Button icon="pi pi-check" label="Save" />
                     <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
                 </template>
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 5566a24f5..973bc032b 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -10,31 +10,21 @@ import Card from 'primevue/card';
 </code></pre>
 
 				<h5>Getting Started</h5>
-				<p>Card is used as a container.</p>
-<pre v-code>
-<code>
-&lt;Card&gt;
-	Content
-&lt;/Card&gt;
-
-</code></pre>
-
-                <h5>Templates</h5>
                 <p>Card provides <i>header</i>, <i>title</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
 <pre v-code>
 <code>
 &lt;Card&gt;
-    &lt;template slot="header"&gt;
+    &lt;template #header&gt;
         &lt;img alt="user header" src="demo/images/usercard.png"&gt;
     &lt;/template&gt;
-    &lt;template slot="title"&gt;
+    &lt;template #title&gt;
         Advanced Card
     &lt;/template&gt;
-    &lt;template slot="content"&gt;
+    &lt;template #content&gt;
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
         quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
     &lt;/template&gt;
-    &lt;template slot="footer"&gt;
+    &lt;template #footer&gt;
         &lt;Button icon="pi pi-check" label="Save" /&gt;
         &lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
     &lt;/template&gt;
@@ -88,30 +78,30 @@ import Card from 'primevue/card';
 <pre v-code>
 <code><template v-pre>
 &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
-    &lt;template slot="title"&gt;
+    &lt;template #title&gt;
         Simple Card
     &lt;/template&gt;
-    &lt;template slot="content"&gt;
+    &lt;template #content&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
         quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
     &lt;/template&gt;
 &lt;/Card&gt;
 
 &lt;Card style="width: 25em"&gt;
-    &lt;template slot="header"&gt;
+    &lt;template #header&gt;
         &lt;img alt="user header" src="demo/images/usercard.png"&gt;
     &lt;/template&gt;
-    &lt;template slot="title"&gt;
+    &lt;template #title&gt;
         Advanced Card
     &lt;/template&gt;
-    &lt;template slot="subtitle"&gt;
+    &lt;template subtitle&gt;
         Card subtitle
     &lt;/template&gt;
-    &lt;template slot="content"&gt;
+    &lt;template #content&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
         quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
     &lt;/template&gt;
-    &lt;template slot="footer"&gt;
+    &lt;template #footer&gt;
         &lt;Button icon="pi pi-check" label="Save" /&gt;
         &lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
     &lt;/template&gt;
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 156525657..14205ceee 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -10,12 +10,12 @@
 		<div class="content-section implementation">
             <div class="card">
                 <Toolbar class="p-mb-4">
-                    <template v-slot:left>
+                    <template #left>
                         <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                         <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
 
-                    <template v-slot:right>
+                    <template #right>
                         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                         <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                     </template>
@@ -147,12 +147,12 @@
 <pre v-code>
 <code><template v-pre>
 &lt;Toolbar class="p-mb-4"&gt;
-    &lt;template slot="left"&gt;
+    &lt;template #left&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
         &lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
     &lt;/template&gt;
 
-    &lt;template slot="right"&gt;
+    &lt;template #right&gt;
         &lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
         &lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  /&gt;
     &lt;/template&gt;
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 8ea1920e2..55898b2f7 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -22,7 +22,7 @@ import Editor from 'primevue/editor';
 <pre v-code>
 <code>
 &lt;Editor v-model="value" editorStyle="height: 320px"&gt;
-	&lt;template slot="toolbar"&gt;
+	&lt;template #toolbar&gt;
 		&lt;span class="ql-formats"&gt;
 			&lt;button class="ql-bold"&gt;&lt;/button&gt;
 			&lt;button class="ql-italic"&gt;&lt;/button&gt;
@@ -157,12 +157,12 @@ npm install quill --save
 
 &lt;h3&gt;Customized&lt;/h3&gt;
 &lt;Editor v-model="value2" editorStyle="height: 320px"&gt;
-    &lt;template slot="toolbar"&gt;
-    &lt;span class="ql-formats"&gt;
-        &lt;button class="ql-bold" v-tooltip.bottom="'Bold'"&gt;&lt;/button&gt;
-        &lt;button class="ql-italic" v-tooltip.bottom="'Italic'"&gt;&lt;/button&gt;
-        &lt;button class="ql-underline" v-tooltip.bottom="'Underline'"&gt;&lt;/button&gt;
-    &lt;/span&gt;
+    &lt;template #toolbar&gt;
+        &lt;span class="ql-formats"&gt;
+            &lt;button class="ql-bold" v-tooltip.bottom="'Bold'"&gt;&lt;/button&gt;
+            &lt;button class="ql-italic" v-tooltip.bottom="'Italic'"&gt;&lt;/button&gt;
+            &lt;button class="ql-underline" v-tooltip.bottom="'Underline'"&gt;&lt;/button&gt;
+        &lt;/span&gt;
     &lt;/template&gt;
 &lt;/Editor&gt;
 </template>
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index 90bbb61dc..0ffb0731f 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -275,13 +275,13 @@ export default {
 <code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
-        &lt;template slot="title"&gt;
+        &lt;template #title&gt;
             Seat Information
         &lt;/template&gt;
-        &lt;template slot="subtitle"&gt;
+        &lt;template #subtitle&gt;
             Choose your seat
         &lt;/template&gt;
-        &lt;template slot="content"&gt;
+        &lt;template #content&gt;
             &lt;div class="p-fluid p-formgrid p-grid"&gt;
                 &lt;div class="p-field p-col-12 p-md-6"&gt;
                     &lt;label for="class"&gt;Class&lt;/label&gt;
@@ -297,7 +297,7 @@ export default {
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/template&gt;
-        &lt;template slot="footer"&gt;
+        &lt;template #footer&gt;
             &lt;div class="p-grid p-nogutter p-justify-between"&gt;
                 &lt;Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /&gt;
                 &lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
@@ -359,13 +359,13 @@ export default {
 <code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
-        &lt;template slot="title"&gt;
+        &lt;template #title&gt;
             Payment Information
         &lt;/template&gt;
-        &lt;template slot="subtitle"&gt;
+        &lt;template #subtitle&gt;
             Enter your card details
         &lt;/template&gt;
-        &lt;template slot="content"&gt;
+        &lt;template #content&gt;
             &lt;div class="p-fluid p-formgrid p-grid"&gt;
                 &lt;div class="p-field p-col-12"&gt;
                     &lt;label for="class"&gt;Class&lt;/label&gt;
@@ -389,7 +389,7 @@ export default {
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/template&gt;
-        &lt;template slot="footer"&gt;
+        &lt;template #footer&gt;
             &lt;div class="p-grid p-nogutter p-justify-between"&gt;
                 &lt;Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /&gt;
                 &lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
@@ -430,10 +430,10 @@ export default {
 <code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
-        &lt;template slot="title"&gt;
+        &lt;template #title&gt;
             Confirmation
         &lt;/template&gt;
-        &lt;template slot="content"&gt;
+        &lt;template #content&gt;
             &lt;div class="p-field p-col-12"&gt;
                 &lt;label for="class"&gt;Name&lt;/label&gt;
                 &lt;b&gt;{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}&lt;/b&gt;
@@ -471,7 +471,7 @@ export default {
                 &lt;b&gt;{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}&lt;/b&gt;
             &lt;/div&gt;
         &lt;/template&gt;
-        &lt;template slot="footer"&gt;
+        &lt;template #footer&gt;
             &lt;div class="p-grid p-nogutter p-justify-between"&gt;
                 &lt;Button label="Back" @click="prevPage()"  icon="pi pi-angle-left" /&gt;
                 &lt;Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/&gt;