diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html
index 0b21825a8..53427b231 100644
--- a/ej2-vue-toc.html
+++ b/ej2-vue-toc.html
@@ -33,6 +33,13 @@
     </ul>
 </li>
 <li>
+AI Coding Assistant
+<ul>
+  <li><a href="/ej2-vue/ai-coding-assistant/overview">Overview</a></li>
+  <li><a href="/ej2-vue/ai-coding-assistant/mcp-server">MCP Server</a></li>
+</ul> 
+</li>
+<li>
 Installation and Upgrade
     <ul>
     <li><a href="/ej2-vue/installation-and-upgrade/installation">Installation with NPM cli</a></li>
@@ -176,7 +183,7 @@
                     <a href="/ej2-vue/ai-assistview/ai-integrations/gemini-integration">Google Gemini</a>
                 </li>
                 <li>
-                    <a href="/ej2-vue/ai-assistview/ai-integrations/openai-integration">Azure Open AI</a>
+                    <a href="/ej2-vue/ai-assistview/ai-integrations/openai-integration">Azure OpenAI</a>
                 </li>
                 <li>
                     <a href="/ej2-vue/ai-assistview/ai-integrations/ollama-llm-integration">Ollama LLM</a>
@@ -571,10 +578,10 @@
         <li>Chat Bot Integrations
             <ul>
                 <li>
-                    <a href="/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow">Integration with Google Dialogflow</a>
+                    <a href="/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow">Google Dialogflow</a>
                 </li>
                 <li>
-                    <a href="/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework">Integration with Microsoft Bot Framework</a>
+                    <a href="/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework">Microsoft Bot Framework</a>
                 </li>
             </ul>
         </li>
@@ -586,6 +593,7 @@
         <li><a href="/ej2-vue/chat-ui/header">Header</a></li>
         <li><a href="/ej2-vue/chat-ui/footer">Footer</a></li>
         <li><a href="/ej2-vue/chat-ui/templates">Templates</a></li>
+        <li><a href="/ej2-vue/chat-ui/speech-to-text">Speech to Text</a></li>
         <li><a href="/ej2-vue/chat-ui/appearance">Appearance</a></li>
         <li><a href="/ej2-vue/chat-ui/globalization">Globalization</a></li>
         <li><a href="/ej2-vue/chat-ui/accessibility">Accessibility</a></li>
@@ -1114,6 +1122,7 @@
 <li><a href="/ej2-vue/file-manager/localization">Localization</a></li>
 <li><a href="/ej2-vue/file-manager/accessibility">Accessibility</a></li>
 <li><a href="/ej2-vue/file-manager/upload">Upload</a></li>
+<li><a href="/ej2-vue/file-manager/add-style-and-appearance-for-file-manager-component">Style and Appearance</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-vue/file-manager/how-to/adding-custom-item-to-context-menu">Adding Custom Item To Context Menu</a></li>
@@ -2181,6 +2190,7 @@
       <li><a href="/ej2-vue/rich-text-editor/tools/custom-tools">Custom Tools</a></li>
       <li><a href="/ej2-vue/rich-text-editor/tools/text-formatting">Text formatting and structural</a></li>
       <li><a href="/ej2-vue/rich-text-editor/tools/styling-tools">Styling Tools</a></li>
+      <li><a href="/ej2-vue/rich-text-editor/tools/fullscreen-tool">Expanding Editor to Fullscreen View</a></li>
    </ul>
 </li>
 <li>Editor Types
@@ -2204,6 +2214,7 @@
       <li><a href="/ej2-vue/rich-text-editor/smart-editing/mentions">Mention Integration</a></li>
       <li><a href="/ej2-vue/rich-text-editor/smart-editing/slash-menu">Slash Commands</a></li>
       <li><a href="/ej2-vue/rich-text-editor/smart-editing/emoji-picker">Emoji Picker</a></li>
+      <li><a href="/ej2-vue/rich-text-editor/smart-editing/mail-merge">Mail Merge Integration</a></li>
    </ul>
 </li>
 <li>Validation and Security
@@ -2216,6 +2227,7 @@
 <li><a href="/ej2-vue/rich-text-editor/link">Link Manipulation</a></li>
 <li><a href="/ej2-vue/rich-text-editor/table">Table Manipulation</a></li>
 <li><a href="/ej2-vue/rich-text-editor/code-block">Code Block</a></li>
+<li><a href="/ej2-vue/rich-text-editor/selection">Selection</a></li>
 <li><a href="/ej2-vue/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
 <li><a href="/ej2-vue/rich-text-editor/enter-key-configuration">Enter Key Configuration</a></li>
 <li><a href="/ej2-vue/rich-text-editor/undo-redo">Undo and Redo</a></li>
@@ -2991,9 +3003,23 @@
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/uploader/">API Reference</a></li>
 </ul>
 </li> <li>Release Notes
-                <ul>
-				<li>2025 Volume 3 - 31.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/31.1.23">31.1.23</a></li></ul></li><li><a href="/ej2-vue/release-notes/31.2.2">31.2.2 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/31.1.17">31.1.17 Main Release</a></li></ul></li>
-				<li>2025 Volume 2 - 30.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/30.2.7">30.2.7</a></li><li><a href="/ej2-vue/release-notes/30.2.6">30.2.6</a></li><li><a href="/ej2-vue/release-notes/30.2.5">30.2.5</a></li><li><a href="/ej2-vue/release-notes/30.1.42">30.1.42</a></li><li><a href="/ej2-vue/release-notes/30.1.41">30.1.41</a></li><li><a href="/ej2-vue/release-notes/30.1.40">30.1.40</a></li><li><a href="/ej2-vue/release-notes/30.1.39">30.1.39</a></li><li><a href="/ej2-vue/release-notes/30.1.38">30.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/30.2.4">30.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/30.1.37">30.1.37 Main Release</a></li></ul></li><li>2025 Volume 1 - 29.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/29.2.11">29.2.11</a></li><li><a href="/ej2-vue/release-notes/29.2.10">29.2.10</a></li><li><a href="/ej2-vue/release-notes/29.2.8">29.2.8</a></li><li><a href="/ej2-vue/release-notes/29.2.7">29.2.7</a></li><li><a href="/ej2-vue/release-notes/29.2.5">29.2.5</a></li><li><a href="/ej2-vue/release-notes/29.1.41">29.1.41</a></li><li><a href="/ej2-vue/release-notes/29.1.40">29.1.40</a></li><li><a href="/ej2-vue/release-notes/29.1.39">29.1.39</a></li><li><a href="/ej2-vue/release-notes/29.1.38">29.1.38</a></li><li><a href="/ej2-vue/release-notes/29.1.37">29.1.37</a></li><li><a href="/ej2-vue/release-notes/29.1.35">29.1.35</a></li></ul></li><li><a href="/ej2-vue/release-notes/29.2.4">29.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/29.1.33">29.1.33 Main Release</a></li></ul></li><li>2024 Volume 4 - 28.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/28.2.12">28.2.12</a></li><li><a href="/ej2-vue/release-notes/28.2.11">28.2.11</a></li><li><a href="/ej2-vue/release-notes/28.2.9">28.2.9</a></li><li><a href="/ej2-vue/release-notes/28.2.7">28.2.7</a></li><li><a href="/ej2-vue/release-notes/28.2.6">28.2.6</a></li><li><a href="/ej2-vue/release-notes/28.2.5">28.2.5</a></li><li><a href="/ej2-vue/release-notes/28.2.4">28.2.4</a></li><li><a href="/ej2-vue/release-notes/28.1.41">28.1.41</a></li><li><a href="/ej2-vue/release-notes/28.1.39">28.1.39</a></li><li><a href="/ej2-vue/release-notes/28.1.38">28.1.38</a></li><li><a href="/ej2-vue/release-notes/28.1.37">28.1.37</a></li><li><a href="/ej2-vue/release-notes/28.1.36">28.1.36</a></li><li><a href="/ej2-vue/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/ej2-vue/release-notes/28.2.3">28.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-vue/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-vue/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-vue/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-vue/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-vue/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-vue/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-vue/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-vue/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-vue/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-vue/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-vue/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-vue/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-vue/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-vue/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-vue/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-vue/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-vue/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-vue/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-vue/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-vue/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+     <ul>
+		 <li>2025 Volume 3 - 31.*
+			<ul>
+			    <li>Weekly Release
+					<ul><li><a href="/ej2-vue/release-notes/31.2.10">31.2.10</a></li><li><a href="/ej2-vue/release-notes/31.2.5">31.2.5</a></li><li><a href="/ej2-vue/release-notes/31.2.4">31.2.4</a></li>
+						<li><a href="/ej2-vue/release-notes/31.2.3">31.2.3</a></li>
+						<li><a href="/ej2-vue/release-notes/31.1.23">31.1.23</a></li>
+						<li><a href="/ej2-vue/release-notes/31.1.22">31.1.22</a></li>
+						<li><a href="/ej2-vue/release-notes/31.1.21">31.1.21</a></li>
+						<li><a href="/ej2-vue/release-notes/31.1.20">31.1.20</a></li>
+						<li><a href="/ej2-vue/release-notes/31.1.18">31.1.18</a></li>
+					</ul>
+				</li>
+				<li><a href="/ej2-vue/release-notes/31.2.12">31.2.12 Service Pack Release</a></li>
+				<li><a href="/ej2-vue/release-notes/31.2.2">31.2.2 Service Pack Release</a></li>
+				<li><a href="/ej2-vue/release-notes/31.1.17">31.1.17 Main Release</a></li></ul></li>
+		 <li>2025 Volume 2 - 30.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/30.2.7">30.2.7</a></li><li><a href="/ej2-vue/release-notes/30.2.6">30.2.6</a></li><li><a href="/ej2-vue/release-notes/30.2.5">30.2.5</a></li><li><a href="/ej2-vue/release-notes/30.1.42">30.1.42</a></li><li><a href="/ej2-vue/release-notes/30.1.41">30.1.41</a></li><li><a href="/ej2-vue/release-notes/30.1.40">30.1.40</a></li><li><a href="/ej2-vue/release-notes/30.1.39">30.1.39</a></li><li><a href="/ej2-vue/release-notes/30.1.38">30.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/30.2.4">30.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/30.1.37">30.1.37 Main Release</a></li></ul></li><li>2025 Volume 1 - 29.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/29.2.11">29.2.11</a></li><li><a href="/ej2-vue/release-notes/29.2.10">29.2.10</a></li><li><a href="/ej2-vue/release-notes/29.2.8">29.2.8</a></li><li><a href="/ej2-vue/release-notes/29.2.7">29.2.7</a></li><li><a href="/ej2-vue/release-notes/29.2.5">29.2.5</a></li><li><a href="/ej2-vue/release-notes/29.1.41">29.1.41</a></li><li><a href="/ej2-vue/release-notes/29.1.40">29.1.40</a></li><li><a href="/ej2-vue/release-notes/29.1.39">29.1.39</a></li><li><a href="/ej2-vue/release-notes/29.1.38">29.1.38</a></li><li><a href="/ej2-vue/release-notes/29.1.37">29.1.37</a></li><li><a href="/ej2-vue/release-notes/29.1.35">29.1.35</a></li></ul></li><li><a href="/ej2-vue/release-notes/29.2.4">29.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/29.1.33">29.1.33 Main Release</a></li></ul></li><li>2024 Volume 4 - 28.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/28.2.12">28.2.12</a></li><li><a href="/ej2-vue/release-notes/28.2.11">28.2.11</a></li><li><a href="/ej2-vue/release-notes/28.2.9">28.2.9</a></li><li><a href="/ej2-vue/release-notes/28.2.7">28.2.7</a></li><li><a href="/ej2-vue/release-notes/28.2.6">28.2.6</a></li><li><a href="/ej2-vue/release-notes/28.2.5">28.2.5</a></li><li><a href="/ej2-vue/release-notes/28.2.4">28.2.4</a></li><li><a href="/ej2-vue/release-notes/28.1.41">28.1.41</a></li><li><a href="/ej2-vue/release-notes/28.1.39">28.1.39</a></li><li><a href="/ej2-vue/release-notes/28.1.38">28.1.38</a></li><li><a href="/ej2-vue/release-notes/28.1.37">28.1.37</a></li><li><a href="/ej2-vue/release-notes/28.1.36">28.1.36</a></li><li><a href="/ej2-vue/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/ej2-vue/release-notes/28.2.3">28.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-vue/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-vue/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-vue/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-vue/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-vue/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-vue/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-vue/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-vue/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-vue/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-vue/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-vue/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-vue/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-vue/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-vue/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-vue/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-vue/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-vue/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-vue/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-vue/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-vue/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-vue/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-vue/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-vue/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-vue/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-vue/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-vue/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-vue/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-vue/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-vue/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-vue/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-vue/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-vue/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-vue/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-vue/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-vue/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-vue/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-vue/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-vue/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-vue/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-vue/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-vue/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
 				<li>2023 Volume 2 - 22.*
diff --git a/ej2-vue/Release-notes/31.1.18.md b/ej2-vue/Release-notes/31.1.18.md
new file mode 100644
index 000000000..12f996f3f
--- /dev/null
+++ b/ej2-vue/Release-notes/31.1.18.md
@@ -0,0 +1,99 @@
+---
+title: Essential Studio® for Vue Release Notes - v31.1.18
+description: Essential Studio® for Vue Weekly Release - Release Notes - v31.1.18
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio® for Vue - v31.1.18 Release Notes 
+
+{% include release-info.html date="September 10, 2025"  version="v31.1.18" passed="96429" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.1.18 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 106 | 106 | 0 | All Passed |
+| AI Assist View | 429 | 429 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 165 | 165 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4080 | 4080 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 137 | 137 | 0 | All Passed |
+| Common | 849 | 849 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 2754 | 2754 | 0 | All Passed |
+| Date Picker | 425 | 425 | 0 | All Passed |
+| Date Range Picker | 420 | 420 | 0 | All Passed |
+| Date Time Picker | 323 | 323 | 0 | All Passed |
+| Diagram | 19893 | 19893 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 191 | 191 | 0 | All Passed |
+| Dropdown Tree | 106 | 106 | 0 | All Passed |
+| File Manager | 2196 | 2196 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 3468 | 3468 | 0 | All Passed |
+| HeatMap Chart | 478 | 478 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 83 | 83 | 0 | All Passed |
+| Maps | 1244 | 1244 | 0 | All Passed |
+| Mention | 39 | 39 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 373 | 373 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| PDF Viewer | 18612 | 18612 | 0 | All Passed |
+| Pivot Table | 5297 | 5297 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 197 | 197 | 0 | All Passed |
+| Ribbon | 496 | 496 | 0 | All Passed |
+| Rich Text Editor | 4591 | 4591 | 0 | All Passed |
+| schedule | 4609 | 4609 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 56 | 56 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Spreadsheet | 10393 | 10393 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 132 | 132 | 0 | All Passed |
+| ToolTip | 131 | 131 | 0 | All Passed |
+| TreeGrid | 3656 | 3656 | 0 | All Passed |
+| Treemap | 264 | 264 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.1.20.md b/ej2-vue/Release-notes/31.1.20.md
new file mode 100644
index 000000000..943ad5b12
--- /dev/null
+++ b/ej2-vue/Release-notes/31.1.20.md
@@ -0,0 +1,99 @@
+---
+title: Essential Studio® for Vue Release Notes - v31.1.20
+description: Essential Studio® for Vue Weekly Release - Release Notes - v31.1.20
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio® for Vue - v31.1.20 Release Notes 
+
+{% include release-info.html date="September 17, 2025"  version="v31.1.20" passed="98403" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.1.20 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 106 | 106 | 0 | All Passed |
+| AI Assist View | 429 | 429 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 165 | 165 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4080 | 4080 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 137 | 137 | 0 | All Passed |
+| Common | 2436 | 2436 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 2756 | 2756 | 0 | All Passed |
+| Date Picker | 425 | 425 | 0 | All Passed |
+| Date Range Picker | 420 | 420 | 0 | All Passed |
+| Date Time Picker | 323 | 323 | 0 | All Passed |
+| Diagram | 19893 | 19893 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 191 | 191 | 0 | All Passed |
+| Dropdown Tree | 106 | 106 | 0 | All Passed |
+| File Manager | 2196 | 2196 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 3513 | 3513 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 83 | 83 | 0 | All Passed |
+| Maps | 1365 | 1365 | 0 | All Passed |
+| Mention | 39 | 39 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 373 | 373 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| PDF Viewer | 18612 | 18612 | 0 | All Passed |
+| Pivot Table | 5297 | 5297 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 197 | 197 | 0 | All Passed |
+| Ribbon | 496 | 496 | 0 | All Passed |
+| Rich Text Editor | 4591 | 4591 | 0 | All Passed |
+| schedule | 4609 | 4609 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 56 | 56 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Spreadsheet | 10393 | 10393 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 132 | 132 | 0 | All Passed |
+| ToolTip | 131 | 131 | 0 | All Passed |
+| TreeGrid | 3656 | 3656 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.1.21.md b/ej2-vue/Release-notes/31.1.21.md
new file mode 100644
index 000000000..6bc0aeead
--- /dev/null
+++ b/ej2-vue/Release-notes/31.1.21.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio® for Vue Release Notes - v31.1.21
+description: Learn here about the controls in the Essential Studio® for Vue Weekly Release - Release Notes - v31.1.21
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio® for Vue - v31.1.21 Release Notes 
+
+{% include release-info.html date="September 23, 2025"  version="v31.1.21" passed="103560" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.1.21 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 431 | 431 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 164 | 164 | 0 | All Passed |
+| Button | 144 | 144 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4597 | 4597 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 136 | 136 | 0 | All Passed |
+| Common | 2506 | 2506 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 2799 | 2799 | 0 | All Passed |
+| Date Picker | 425 | 425 | 0 | All Passed |
+| Date Range Picker | 420 | 420 | 0 | All Passed |
+| Date Time Picker | 323 | 323 | 0 | All Passed |
+| Diagram | 18967 | 18967 | 0 | All Passed |
+| Dialog | 58 | 58 | 0 | All Passed |
+| Document Editor | 4997 | 4997 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 191 | 191 | 0 | All Passed |
+| Dropdown Tree | 105 | 105 | 0 | All Passed |
+| File Manager | 2187 | 2187 | 0 | All Passed |
+| Floating Action Button | 132 | 132 | 0 | All Passed |
+| Gantt | 3513 | 3513 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 390 | 390 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| PDF Viewer | 19130 | 19130 | 0 | All Passed |
+| Pivot Table | 5298 | 5298 | 0 | All Passed |
+| Progress Bar | 79 | 79 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 36 | 36 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 197 | 197 | 0 | All Passed |
+| Ribbon | 496 | 496 | 0 | All Passed |
+| Rich Text Editor | 4564 | 4564 | 0 | All Passed |
+| schedule | 4609 | 4609 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 57 | 57 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 122 | 122 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Spreadsheet | 10393 | 10393 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 132 | 132 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3786 | 3786 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.1.22.md b/ej2-vue/Release-notes/31.1.22.md
new file mode 100644
index 000000000..9035518bd
--- /dev/null
+++ b/ej2-vue/Release-notes/31.1.22.md
@@ -0,0 +1,97 @@
+---
+title: Essential Studio® for Vue Release Notes - v31.1.22
+description: Learn here about the controls in the Essential Studio® for Vue Weekly Release - Release Notes - v31.1.22
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio® for Vue - v31.1.22 Release Notes 
+
+{% include release-info.html date="October 01, 2025"  version="v31.1.22" passed="61802" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.1.22 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 431 | 431 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 164 | 164 | 0 | All Passed |
+| Button | 144 | 144 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4605 | 4605 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 136 | 136 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 2800 | 2800 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 58 | 58 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 191 | 191 | 0 | All Passed |
+| Dropdown Tree | 105 | 105 | 0 | All Passed |
+| File Manager | 2187 | 2187 | 0 | All Passed |
+| Floating Action Button | 132 | 132 | 0 | All Passed |
+| Gantt | 3515 | 3515 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 390 | 390 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5298 | 5298 | 0 | All Passed |
+| Progress Bar | 79 | 79 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 36 | 36 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 4564 | 4564 | 0 | All Passed |
+| schedule | 4609 | 4609 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 57 | 57 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 122 | 122 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 677 | 677 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 112 | 112 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3786 | 3786 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.2.10.md b/ej2-vue/Release-notes/31.2.10.md
new file mode 100644
index 000000000..132daffff
--- /dev/null
+++ b/ej2-vue/Release-notes/31.2.10.md
@@ -0,0 +1,98 @@
+---
+title: Essential Studio for Vue Release Notes - v31.2.10
+description: Learn here about the controls in the Essential Studio for Vue Weekly Release - Release Notes - v31.2.10
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue - v31.2.10 Release Notes 
+
+{% include release-info.html date="November 12, 2025"  version="v31.2.10" passed="64195" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.2.10 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 432 | 432 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 168 | 168 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4958 | 4958 | 0 | All Passed |
+| Chat UI | 500 | 500 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3670 | 3670 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 63 | 63 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 194 | 194 | 0 | All Passed |
+| Dropdown Tree | 104 | 104 | 0 | All Passed |
+| File Manager | 2188 | 2188 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 3530 | 3530 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 437 | 437 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5303 | 5303 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 5100 | 5100 | 0 | All Passed |
+| schedule | 4644 | 4644 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 533 | 533 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 58 | 58 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 115 | 115 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3787 | 3787 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.2.12.md b/ej2-vue/Release-notes/31.2.12.md
new file mode 100644
index 000000000..db2e7a5aa
--- /dev/null
+++ b/ej2-vue/Release-notes/31.2.12.md
@@ -0,0 +1,98 @@
+---
+title: Essential Studio for Vue Release Notes
+description: Learn here about the controls in the Essential Studio for Vue 2025 Volume 3 SP Release - Release Notes
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue - v31.2.12 Release Notes
+
+{% include release-info.html date="November 18, 2025"  version="v31.2.12" passed="64043" failed="0" %} 
+
+{% directory path: _includes/release-notes/v31.2.12 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 432 | 432 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 168 | 168 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4958 | 4958 | 0 | All Passed |
+| Chat UI | 500 | 500 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3670 | 3670 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 63 | 63 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 194 | 194 | 0 | All Passed |
+| Dropdown Tree | 104 | 104 | 0 | All Passed |
+| File Manager | 2188 | 2188 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 3530 | 3530 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 437 | 437 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5303 | 5303 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 5100 | 5100 | 0 | All Passed |
+| schedule | 4644 | 4644 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 58 | 58 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 117 | 117 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3787 | 3787 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.2.2.md b/ej2-vue/Release-notes/31.2.2.md
index f69756da3..a13b6d518 100644
--- a/ej2-vue/Release-notes/31.2.2.md
+++ b/ej2-vue/Release-notes/31.2.2.md
@@ -7,7 +7,7 @@ documentation: ug
 
 # Essential Studio for Vue - v31.2.2 Release Notes
 
-{% include release-info.html date="October 14, 2025"  version="v31.2.2" passed="63079" failed="0" %} 
+{% include release-info.html date="October 15, 2025"  version="v31.2.2" passed="63079" failed="0" %} 
 
 {% directory path: _includes/release-notes/v31.2.2 %}
 
diff --git a/ej2-vue/Release-notes/31.2.3.md b/ej2-vue/Release-notes/31.2.3.md
new file mode 100644
index 000000000..3fbcc896f
--- /dev/null
+++ b/ej2-vue/Release-notes/31.2.3.md
@@ -0,0 +1,97 @@
+---
+title: Essential Studio for Vue Release Notes - v31.2.3
+description: Learn here about the controls in the Essential Studio for Vue Weekly Release - Release Notes - v31.2.3
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue - v31.2.3 Release Notes 
+
+{% include release-info.html date="October 22, 2025"  version="v31.2.3" passed="63245" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.2.3 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 431 | 431 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 168 | 168 | 0 | All Passed |
+| Button | 144 | 144 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4905 | 4905 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3662 | 3662 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 58 | 58 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 193 | 193 | 0 | All Passed |
+| Dropdown Tree | 105 | 105 | 0 | All Passed |
+| File Manager | 2187 | 2187 | 0 | All Passed |
+| Floating Action Button | 132 | 132 | 0 | All Passed |
+| Gantt | 3515 | 3515 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 422 | 422 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5303 | 5303 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 36 | 36 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 5095 | 5095 | 0 | All Passed |
+| schedule | 4608 | 4608 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 122 | 122 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 112 | 112 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3786 | 3786 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.2.4.md b/ej2-vue/Release-notes/31.2.4.md
new file mode 100644
index 000000000..c82b818b5
--- /dev/null
+++ b/ej2-vue/Release-notes/31.2.4.md
@@ -0,0 +1,97 @@
+---
+title: Essential Studio for Vue Release Notes - v31.2.4
+description: Learn here about the controls in the Essential Studio for Vue Weekly Release - Release Notes - v31.2.4
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue - v31.2.4 Release Notes 
+
+{% include release-info.html date="October 28, 2025"  version="v31.2.4" passed="63272" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 431 | 431 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 168 | 168 | 0 | All Passed |
+| Button | 144 | 144 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4919 | 4919 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3662 | 3662 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 63 | 63 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 194 | 194 | 0 | All Passed |
+| Dropdown Tree | 105 | 105 | 0 | All Passed |
+| File Manager | 2187 | 2187 | 0 | All Passed |
+| Floating Action Button | 132 | 132 | 0 | All Passed |
+| Gantt | 3522 | 3522 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 422 | 422 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5303 | 5303 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 36 | 36 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 5095 | 5095 | 0 | All Passed |
+| schedule | 4608 | 4608 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 122 | 122 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 112 | 112 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3786 | 3786 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/Release-notes/31.2.5.md b/ej2-vue/Release-notes/31.2.5.md
new file mode 100644
index 000000000..23bdadb97
--- /dev/null
+++ b/ej2-vue/Release-notes/31.2.5.md
@@ -0,0 +1,98 @@
+---
+title: Essential Studio for Vue Release Notes - v31.2.5
+description: Learn here about the controls in the Essential Studio for Vue Weekly Release - Release Notes - v31.2.5
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue - v31.2.5 Release Notes 
+
+{% include release-info.html date="November 04, 2025"  version="v31.2.5" passed="63682" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 205 | 205 | 0 | All Passed |
+| AI Assist View | 432 | 432 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 168 | 168 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 4957 | 4957 | 0 | All Passed |
+| Chat UI | 184 | 184 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 904 | 904 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3663 | 3663 | 0 | All Passed |
+| Date Picker | 426 | 426 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 324 | 324 | 0 | All Passed |
+| Diagram | 12813 | 12813 | 0 | All Passed |
+| Dialog | 63 | 63 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 194 | 194 | 0 | All Passed |
+| Dropdown Tree | 105 | 105 | 0 | All Passed |
+| File Manager | 2188 | 2188 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 3522 | 3522 | 0 | All Passed |
+| HeatMap Chart | 635 | 635 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 642 | 642 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1368 | 1368 | 0 | All Passed |
+| Mention | 35 | 35 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 422 | 422 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5303 | 5303 | 0 | All Passed |
+| Progress Bar | 81 | 81 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 623 | 623 | 0 | All Passed |
+| Rich Text Editor | 5095 | 5095 | 0 | All Passed |
+| schedule | 4644 | 4644 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 54 | 54 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 112 | 112 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3786 | 3786 | 0 | All Passed |
+| Treemap | 326 | 326 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-vue/ai-assistview/ai-integrations/gemini-integration.md b/ej2-vue/ai-assistview/ai-integrations/gemini-integration.md
index 52d07bc54..33b13d583 100644
--- a/ej2-vue/ai-assistview/ai-integrations/gemini-integration.md
+++ b/ej2-vue/ai-assistview/ai-integrations/gemini-integration.md
@@ -8,58 +8,63 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
+# Integrate Gemini AI with Vue AI AssistView component 
 
-# Gemini AI with Vue AI AssistView component 
+The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences.
 
-The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your Vue applications.
+## Prerequisites
 
-## Getting Started with the AI AssistView component
+* **Node.js**: Version 16 or higher with npm.
 
-Before integrating Gemini AI, ensure that the Syncfusion AI AssistView component is correctly rendered in your Vue app:
+* **Google Account**: For generating a Gemini API key.
 
-[Vue Getting Started Guide](../getting-started)
+* **Syncfusion AI AssistView**: Package [@syncfusion/ej2-vue-interactive-chat](https://www.npmjs.com/package/@syncfusion/ej2-vue-interactive-chat) installed.
 
-## Prerequisites
+* **Marked Library**: For parsing Markdown responses (`npm install marked --save`).
 
-* Requires `Node.js` (v16 or higher) and `npm`.
-* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs).
-* Syncfusion AI AssistView for Vue `@syncfusion/ej2-vue-interactive-chat` installed in your project.
+## Set Up the Vue Environment
+
+Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in your Vue application.
 
 ## Install Dependencies
 
-Install the Syncfusion AI AssistView in your project
+Install the required packages:
+
+* Google Generative AI SDK:
 
-```bash 
+```bash
 
-npm install @syncfusion/ej2-vue-interactive-chat --save
+npm install @google/generative-ai
 
 ```
 
-Install the Gemini AI dependencies
+* Marked Library:
 
 ```bash
 
-npm install @google/generative-ai
+npm install marked --save
 
 ```
 
 ## Generate API Key
 
-1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account.
+1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. 
 
-2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
+2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. 
 
-3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed.
+3. **Project Selection**: Choose an existing Google Cloud project or create a new one.
 
-4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once.
+4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once.
 
-> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+> `Security Note`: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production.
 
 ## Configure Gemini AI with AI AssistView
 
-Create `src/App.Vue` to integrate the Gemini AI with AI AssistView component
+To integrate Gemini AI with the Syncfusion AI AssistView component in your application:
+
+* Modify the `src/App.Vue` file to host the integration logic.
 
-* Add your generated `API Key` at the line 
+* Add your Gemini API key securely in the configuration:
 
 ```bash
 
@@ -77,15 +82,3 @@ const geminiApiKey = 'Place your API key here';
 {% endtabs %}
   
 {% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %}
-
-## Run and Test 
-
-Run the application in the browser using the following command.
-
-```bash
-
-npm run dev
-
-```
-
-Open the hosted link to interact with the Gemini AI for dynamic response
diff --git a/ej2-vue/ai-assistview/ai-integrations/ollama-llm-integration.md b/ej2-vue/ai-assistview/ai-integrations/ollama-llm-integration.md
index c94687b0f..b674d58f4 100644
--- a/ej2-vue/ai-assistview/ai-integrations/ollama-llm-integration.md
+++ b/ej2-vue/ai-assistview/ai-integrations/ollama-llm-integration.md
@@ -8,31 +8,33 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# LLM via Ollama with Vue AI AssistView component
+# Integrate LLM via Ollama with Vue AI AssistView component
 
-The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls.
+The AI AssistView component integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your Vue application. The component acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses.
 
 ## Prerequisites
 
-* Requires `Node.js` (v16 or higher) and `npm`.
-* [Ollama](https://ollama.com) application should be installed to run and manage LLM models locally.
-* Syncfusion AI AssistView for Vue `@syncfusion/ej2-vue-interactive-chat` installed in your react project.
+Before starting, ensure you have the following:
 
-## Step 1: Getting Started with the AI AssistView component
+* **Node.js**: Version 16 or higher with npm.
 
-Before integrating LLM model, ensure that the Syncfusion AI AssistView component is correctly rendered in your application:
+* [Ollama](https://ollama.com) installed to run and manage LLM models locally.
 
-[ Vue Getting Started Guide](../getting-started)
+* **Syncfusion AI AssistView**: Package [@syncfusion/ej2-vue-interactive-chat](https://www.npmjs.com/package/@syncfusion/ej2-vue-interactive-chat) installed.
 
-## Step 2: Install Dependencies
+* **Marked Library**: For parsing Markdown responses (`npm install marked --save`).
 
-* Install the Syncfusion AI AssistView in your project
+## Set Up the Vue Environment
 
-```bash 
+Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in your vue application.
 
-npm install @syncfusion/ej2-vue-interactive-chat --save
+## Install Dependency
 
-```
+To install the marked library, run `npm install marked --save` in your project directory to add it as a dependency in your package.json file.
+
+## Configuring Ollama
+
+Install Ollama for your operating system:
 
 * Download and install `Ollama` based on your operating system:
 
@@ -45,7 +47,7 @@ npm install @syncfusion/ej2-vue-interactive-chat --save
 
 {% endhighlight %}
 
-{% highlight ts tabtitle="MAC" %}
+{% highlight ts tabtitle="macOS" %}
 
 1. Visit [macOS](https://ollama.com/download/mac)
 2. Click `Download for macOS` to get `.dmg file`
@@ -67,9 +69,9 @@ curl -fSSL https://ollama.com/install.sh | sh
 {% endhighlight %}
 {% endtabs %}
 
-## Step 3: Install and Run an Ollama Model
+## Download and run an Ollama model
 
-1. Download and run a model using the following command. Replace with your preferred model (e.g., `llama3`, `phi4`). See the [Ollama model](https://ollama.com/search) library for available models
+* Download and run a model using the following command. Replace with your preferred model (e.g., `llama3`, `phi4`). See the [Ollama model](https://ollama.com/search) library for available models.
 
 ```bash
 
@@ -77,7 +79,7 @@ ollama run deepseek-r1
 
 ```
 
-2. Once the model download is complete, start the Ollama server to make the model accessible:
+* After the model download completes, start the Ollama server to make the model accessible:
 
 ```bash
 
@@ -85,9 +87,9 @@ ollama serve
 
 ```
 
-## Step 4: Configure AI AssistView in React
+## Configure AI AssistView with Ollama
 
-Create `src/App.js` to connect the Syncfusion AI AssistView to the LLM model:
+Modify the `src/App.js` file to connect the Syncfusion AI AssistView to the LLM model:
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -99,15 +101,3 @@ Create `src/App.js` to connect the Syncfusion AI AssistView to the LLM model:
 {% endtabs %}
   
 {% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/llm-model" %}
-
-## Step 5: Run and Test 
-
-Run the application in the browser using the following command.
-
-```bash
-
-npm run dev
-
-```
-
-Open the hosted link to interact with your AI model where you can enter prompts and receive responses from the Ollama model.
\ No newline at end of file
diff --git a/ej2-vue/ai-assistview/ai-integrations/openai-integration.md b/ej2-vue/ai-assistview/ai-integrations/openai-integration.md
index 57bf1f9e5..e93724bf9 100644
--- a/ej2-vue/ai-assistview/ai-integrations/openai-integration.md
+++ b/ej2-vue/ai-assistview/ai-integrations/openai-integration.md
@@ -1,56 +1,56 @@
 ---
 layout: post
-title: Azure Open AI With Vue AI AssistView component | Syncfusion
-description:  Checkout and learn about Integration of Azure Open AI With Vue AI AssistView component of Syncfusion Essential JS 2 and more details.
+title: Azure OpenAI With Vue AI AssistView component | Syncfusion
+description:  Checkout and learn about Integration of Azure OpenAI With Vue AI AssistView component of Syncfusion Essential JS 2 and more details.
 platform: ej2-vue
 control: AI AssistView
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Azure Open AI with Vue AI AssistView component 
+# Integrate Azure OpenAI with Vue AI AssistView component 
 
-The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your Vue applications.
+The AI AssistView component integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The component acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses.
 
-## Getting Started with the AI AssistView component
-
-Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView component is correctly rendered in your Vue app:
+## Prerequisites
 
-[Vue Getting Started Guide](../getting-started)
+* **Node.js**: Version 16 or higher with npm.
 
-## Prerequisites
+* **Azure Account**: With access to Azure OpenAI services and a generated API key.
 
-* Requires `Node.js` (v16 or higher) and `npm`.
-* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key.I
-* Syncfusion AI AssistView for Vue `@syncfusion/ej2-vue-interactive-chat` installed in your project.
+* **Syncfusion AI AssistView**: Package [@syncfusion/ej2-vue-interactive-chat](https://www.npmjs.com/package/@syncfusion/ej2-vue-interactive-chat) installed.
 
-## Install Dependencies
+* **Marked Library**: For parsing Markdown responses (`npm install marked --save`).
 
-Install the Syncfusion AI AssistView in your project
+## Set Up the vue Environment
 
-```bash 
+Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in your vue application.
 
-npm install @syncfusion/ej2-vue-interactive-chat --save
+## Install Dependency
 
-```
+To install the marked library, run `npm install marked --save` in your project directory to add it as a dependency in your package.json file.
 
-## Generate Azure API Key
+## Configure Azure OpenAI
 
-1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. 
+1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. 
 
-2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.  
+2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL.
 
-3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.
+3. Note the following values:
+   - API key
+   - Endpoint
+   - API version (must be supported by your resource)
+   - Deployment name (for example, gpt-4o-mini)
 
 4. Store these values securely, as they will be used in your application.
 
 > `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely.
 
-##  Configure Open AI with AI AssistView
+## Configure AI AssistView with Azure OpenAI  
 
-Create `src/App.js` to integrate the Azure Open AI with AI AssistView component
+Modify the `src/App.js` file to integrate the Azure OpenAI with AI AssistView component
 
-* Update the following configuration values with your Azure Open AI details:
+* Update the following configuration values with Azure OpenAI details:
 
 ```bash
 
@@ -71,15 +71,3 @@ const azureDeploymentName = 'Your_Deployment_Name';
 {% endtabs %}
   
 {% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
-
-## Run and Test 
-
-Run the application in the browser using the following command.
-
-```bash
-
-npm run dev
-
-```
-
-Open the hosted link to interact with your Azure Open AI for dynamic response.
diff --git a/ej2-vue/ai-assistview/speech/speech-to-text.md b/ej2-vue/ai-assistview/speech/speech-to-text.md
index 15b0c6587..7f8f3c42a 100644
--- a/ej2-vue/ai-assistview/speech/speech-to-text.md
+++ b/ej2-vue/ai-assistview/speech/speech-to-text.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Speech-to-Text in Vue AI AssistView
 
-The Syncfusion Vue AI AssistView component supports `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API), enabling conversion of spoken words into text using the device's microphone.
+The Syncfusion Vue AI AssistView component integrates `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). This enables the conversion of spoken words into text using the device's microphone, allowing users to interact with the AI AssistView through voice input.
 
 ## Prerequisites
 
@@ -24,7 +24,18 @@ Before integrating `Speech-to-Text`, ensure the following:
 
 ## Configure Speech-to-Text
 
-To enable Speech-to-Text functionality, modify the `App.vue` file to incorporate the Web Speech API. The [SpeechToText](https://ej2.syncfusion.com/vue/documentation/speech-to-text/getting-started) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
+To enable Speech-to-Text functionality in the Vue AI AssistView component, update the `App.vue` file to incorporate the Web Speech API.
+
+The [SpeechToText](https://ej2.syncfusion.com/vue/documentation/speech-to-text/getting-started) component listens to audio input from the device’s microphone, transcribes spoken words into text, and updates the AI AssistView’s editable footer using the [footerTemplate](https://ej2.syncfusion.com/vue/documentation/api/ai-assistview/#footertemplate) property to display the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
+
+### Configuration Options
+
+* **[`lang`](https://ej2.syncfusion.com/vue/documentation/api/speech-to-text/#lang)**: Specifies the language for speech recognition. For example:
+
+    * `en-US` for American English
+    * `fr-FR` for French
+
+* **[`allowInterimResults`](https://ej2.syncfusion.com/vue/documentation/api/speech-to-text/#allowInterimResults)**: Set to `true` to receive real-time (interim) recognition results, or `false` to receive only final results.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -37,6 +48,14 @@ To enable Speech-to-Text functionality, modify the `App.vue` file to incorporate
   
 {% previewsample "page.domainurl/code-snippet/ai-assistview/speech/stt" %}
 
+## Error Handling
+
+The `SpeechToText` component provides events to handle errors that may occur during speech recognition. For more information, refer to the [Error Handling](https://ej2.syncfusion.com/vue/documentation/speech-to-text/speech-recognition#error-handling) section in the documentation.
+
+## Browser Compatibility
+
+The `SpeechToText` component relies on the [Speech Recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition), which has limited browser support. Refer to the [Browser Compatibility](https://ej2.syncfusion.com/vue/documentation/speech-to-text/speech-recognition#browser-support) section for detailed information.
+
 ## See Also
 
 * [Text-to-Speech](./text-to-speech.md)
diff --git a/ej2-vue/ai-assistview/speech/text-to-speech.md b/ej2-vue/ai-assistview/speech/text-to-speech.md
index 1102bcaca..a37f84768 100644
--- a/ej2-vue/ai-assistview/speech/text-to-speech.md
+++ b/ej2-vue/ai-assistview/speech/text-to-speech.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Text-to-Speech in Vue AI AssistView
 
-The Syncfusion Vue AI AssistView component supports `Text-to-Speech` (TTS) functionality using the browser's Web Speech API specifically using the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface to convert AI-generated response into spoken audio.
+The Syncfusion Vue AI AssistView component integrates `Text-to-Speech` (TTS) functionality using the browser's Web Speech API, specifically the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface. This allows AI-generated responses to be converted into spoken audio, enhancing accessibility and user interaction.
 
 ## Prerequisites
 
diff --git a/ej2-vue/ai-coding-assistant/mcp-server.md b/ej2-vue/ai-coding-assistant/mcp-server.md
new file mode 100644
index 000000000..692547e97
--- /dev/null
+++ b/ej2-vue/ai-coding-assistant/mcp-server.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: SyncfusionVueAssistant MCP Server | Syncfusion
+description: Learn how to configure and use SyncfusionVueAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Vue apps.
+control: Getting started with SyncfusionVueAssistant MCP Server
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# SyncfusionVueAssistant MCP Server
+
+## Overview
+
+The [SyncfusionVueAssistant](https://www.npmjs.com/package/@syncfusion/vue-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's Vue component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Vue applications with Syncfusion<sup style="font-size:70%">&reg;</sup> components.
+
+### Key Benefits
+
+* Intelligent code generation for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components.
+* Detailed component documentation and usage examples.
+* Troubleshooting assistance for common integration challenges.
+
+## Prerequisites
+
+Before using [SyncfusionVueAssistant](https://www.npmjs.com/package/@syncfusion/vue-assistant), ensure you have:
+
+* Required [node](https://nodejs.org/en/) version >= 18
+* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio](https://www.syncfusion.com/code-studio/), etc.)
+* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
+  - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
+  - [Free Community License](https://www.syncfusion.com/products/communitylicense)
+  - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
+* An active [API KEY](https://syncfusion.com/account/api-key)
+
+## Unlimited Access
+
+Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to this MCP server. There are no restrictions on:
+
+* Number of requests
+* Components usage
+* Query caps
+* Usage duration
+
+This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
+
+## Installation and setup
+
+Before you can invoke the `SyncfusionVueAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients:
+
+### Generic MCP Server Settings
+
+- **npm package name**: `@syncfusion/vue-assistant`
+- **Type**: stdio (standard input/output transport)
+- **Command**: npx
+- **Arguments**: -y
+- **Server name**: SyncfusionVueAssistant
+
+You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file:
+
+```json
+"env": {
+  "Syncfusion_API_Key": "YOUR_API_KEY"
+}
+```
+
+Below are setup instructions for popular MCP clients:
+
+### Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio
+
+* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab.
+* Enter the Server Name as `vue-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/vue-assistant`.
+* Add an environment variable as `Syncfusion_API_Key` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**.
+* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file.
+* The server is now ready for use in Code Studio. For more details, refer to the [Code Studio documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server).
+
+### VS Code (GitHub Copilot MCP)
+
+* To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder.
+
+```json
+{
+  "servers": {
+    "syncfusion-vue-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@syncfusion/vue-assistant@latest"
+      ],
+      "env": {
+        "Syncfusion_API_Key": "YOUR_API_KEY"
+      }
+    }
+  }
+}
+```
+
+* After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionVueAssistant](https://www.npmjs.com/package/@syncfusion/vue-assistant) server directly from the settings interface without additional commands.
+
+* Confirm the server is active by checking for a message like: `SyncfusionVueAssistant is running...` in the output.
+
+* For additional guidance, refer to the [VS Code documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server).
+
+### Cursor
+
+To configure an MCP server for a specific workspace, you can create a `.cursor/mcp.json` file in your workspace folder.
+
+```json
+{
+  "mcpServers": {
+    "syncfusion-vue-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@syncfusion/vue-assistant@latest"
+      ],
+      "env": {
+       "Syncfusion_API_Key": "YOUR_API_KEY"
+      }
+    }
+  }
+}
+```
+
+For more details, refer to the [Cursor documentation](https://cursor.com/docs/context/mcp#using-mcp-json).
+
+### JetBrains IDEs
+
+* Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP).
+* Click + Add to add a new MCP server configuration.
+* In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config:
+
+```json
+{
+  "mcpServers": {
+    "syncfusion-vue-assistant": {
+      "command": "npx.cmd",
+      "args": [
+        "-y",
+        "@syncfusion/vue-assistant@latest"
+      ],
+      "env": {
+       "Syncfusion_API_Key": "YOUR_API_KEY"
+      }
+    }
+  }
+}
+```
+
+* Click OK and Apply.
+ 
+For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).
+
+> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
+
+## Usage
+
+To activate the SyncfusionVueAssistant MCP server:
+
+1. Start your prompt with one of the following:
+    * 'SyncfusionVueAssistant'
+    * '/syncfusion-vue-assistant'
+    * '/syncfusion-vue'
+    * '@syncfusion-vue'
+    * '@ask_syncfusion_vue'
+    * 'ej2-vue'
+
+   In VS Code, use `#SyncfusionVueAssistant` for direct invocation.
+
+2. Grant permission for the server to run (for the session, workspace, or always).
+3. For best results, start a new chat for each new topic to maintain clean context.
+
+### Mode availability
+
+Syncfusion<sup style="font-size:70%">&reg;</sup> MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients.
+
+### Best Practices for Effective Usage
+
+1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Vue Grid with paging and filtering?").
+2. `Provide context`: Include details about your use case for more targeted solutions.
+3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
+4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
+
+### Example Queries
+
+Here are some effective ways to use [SyncfusionVueAssistant](https://www.npmjs.com/package/@syncfusion/vue-assistant):
+
+ * "Create a Syncfusion Vue Grid component with paging, sorting and filtering."
+ * "How do I implement data binding with Syncfusion Vue scheduler?"
+ * "Show me how to create a dashboard with multiple Syncfusion components."
+
+## Troubleshooting
+
+If you encounter issues:
+
+ * Verify your API key is correctly configured.
+ * Ensure the MCP server is enabled in your client's tools selection.
+ * Check that you're using a compatible MCP client version.
+ * Try restarting your development environment.
+
+## Support
+
+Product support is available through the following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
+* [Community forum](https://www.syncfusion.com/forums/essential-js2)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript)
+* Live chat
+
+## See also
+
+* [Syncfusion Vue Documentation](https://ej2.syncfusion.com/vue/documentation)
diff --git a/ej2-vue/ai-coding-assistant/overview.md b/ej2-vue/ai-coding-assistant/overview.md
new file mode 100644
index 000000000..52815a623
--- /dev/null
+++ b/ej2-vue/ai-coding-assistant/overview.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Syncfusion AI Coding Assistant Overview | Syncfusion
+description: Learn how Syncfusion AI Coding Assistant boost Vue productivity by generating accurate code snippets, configuration examples, and contextual guidance.
+control: Syncfusion AI Coding Assistant Overview
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant Overview
+
+The **Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant** are designed to streamline your development workflow when building Vue applications with Syncfusion<sup style="font-size:70%">&reg;</sup> components. It uses contextual knowledge of the Syncfusion<sup style="font-size:70%">&reg;</sup> component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity.
+
+AI Coding Assistant:
+
+* **The SyncfusionVueAssistant MCP Server**
+  Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients).
+
+## Getting Started
+
+To use the AI Coding Assistant, you need:
+
+* A [Syncfusion<sup style="font-size:70%">&reg;</sup> user account](https://www.syncfusion.com/account)
+* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
+  - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
+  - [Free Community License](https://www.syncfusion.com/products/communitylicense)
+  - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
+* An active [API KEY](https://syncfusion.com/account/api-key)
+* A [Vue application that includes SyncfusionVue](https://ej2.syncfusion.com/vue/documentation/getting-started/vue-3-js-composition)
+
+## Unlimited Access
+
+Syncfusion<sup style="font-size:70%">&reg;</sup> offers unlimited access to the AI Coding Assistant, with no limitations on:
+
+* Number of requests
+* Components usage
+* Query caps
+* Usage duration
+
+This ensures users can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components to enhance their development experience without limitations.
+
+## Best Practices
+
+* Initial Setup: Use the tools to quickly add and configure Syncfusion<sup style="font-size:70%">&reg;</sup> components in your Vue application.
+* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality.
+* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security.
+* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Documentation](https://ej2.syncfusion.com/vue/documentation) for in-depth information.
+* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/vue/documentation) or [support](https://support.syncfusion.com/support/tickets/create).
+
+> Always check AI-generated content and code for accuracy before using it.
+
+## Recommendations
+
+* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus.
+* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4.
+
+## Privacy & Data Handling
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant is designed with privacy in mind:
+
+* The tools do not access your project files or workspace directly.
+* User prompts are not stored by any of the tools or used for any other purpose.
+* Prompts are not used to train Syncfusion<sup style="font-size:70%">&reg;</sup> models.
+* The assistant generates context, while the final output is handled by your selected AI model.
+
+## See also
+
+* Add the [SyncfusionVueAssistant MCP Server](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client
+* [Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Documentation](https://ej2.syncfusion.com/vue/documentation)
diff --git a/ej2-vue/chart/getting-started.md b/ej2-vue/chart/getting-started.md
index 90e1e2f21..d4dbcaa30 100644
--- a/ej2-vue/chart/getting-started.md
+++ b/ej2-vue/chart/getting-started.md
@@ -12,13 +12,15 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Chart component.
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 To get start quickly with Vue Charts, you can check on this video:
 
 {% youtube "https://www.youtube.com/watch?v=RplZL-3B1G4&t=3s" %}
 
 ## Prerequisites
 
-[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)
+[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
 
 ## Dependencies
 
diff --git a/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md b/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md
index a7a3cb0c6..6a1e17492 100644
--- a/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md
+++ b/ej2-vue/chat-ui/bot-integrations/integration-with-bot-framework.md
@@ -8,34 +8,34 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Microsoft Bot Framework with Vue Chat UI component
+# Integrate Microsoft Bot Framework with Vue Chat UI component
 
-The Syncfusion vue Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in a vue application.
+The Chat UI component integrates with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application.
 
-## Getting Started with the Chat UI Component
-
-Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI component is correctly rendered in your vue app:
+## Prerequisites
 
-[Vue Getting Started Guide](../getting-started)
+Before starting, ensure you have the following:
 
-## Prerequisites
+* **Node.js**: Version 16 or higher with npm.
 
 * [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot.
-* Node.js Environment: The backend portion requires Node.js and npm.
-* Syncfusion Chat UI for Vue: Install `@syncfusion/ej2-vue-interactive-chat` in your Vue project.
-* Deployed Azure Bot: A bot should be created and published using the Bot Framework, which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide.
+
+* **Syncfusion Chat UI**: Package [@syncfusion/ej2-vue-interactive-chat](https://www.npmjs.com/package/@syncfusion/ej2-vue-interactive-chat) installed.
+
+* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide.
+
+## Set Up the vue Environment
+
+Follow the [Getting Started](../getting-started) guide to configure and render the Chat UI component in your vue application.
 
 ## Install Dependencies
   
-* Install `frontend` dependencies for bot communication and the Syncfusion Chat UI:
+Install the required packages:
 
-    * Install `directline-js` package to handle communication with the Bot Framework.
-
-    * Install `axios` for the HTTP requests.
+* Install `frontend` dependencies for bot communication and the Syncfusion Chat UI:
 
 ```bash
 
-npm install @syncfusion/ej2-vue-interactive-chat --save
 npm install directline-js axios --save
 
 ```
@@ -112,7 +112,7 @@ app.listen(port, () => console.log(`Token server running on http://localhost:${p
 
 ## Configure ChatUI
 
-Create `src/App.vue` to connect the Syncfusion Chat UI to the bot via the direct line API:
+Modify the `src/App.vue` file to connect the Chat UI to the bot via the direct line API:
 
 {% tabs %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
@@ -209,14 +209,14 @@ const messageSend = (args) => {
 
 ### Start the Token Server
 
-Navigate to the token-server folder and run the following command to start the server:
+Navigate to the `token-server` folder and run the following command to start the server:
 
 ```bash
 
 node index.js
 
 ```
-## Start the Vue frontend
+### Start the Vue frontend
 
 In a separate terminal window, navigate to your Vue project folder and start the development server:
 
diff --git a/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow.md b/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow.md
index 5f6dddc29..d8cd6ce88 100644
--- a/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow.md
+++ b/ej2-vue/chat-ui/bot-integrations/integration-with-dialogflow.md
@@ -8,46 +8,41 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Google Dialogflow With Vue Chat UI component
+# Integrate Google Dialogflow With Vue Chat UI component
 
-The Syncfusion Chat UI supports integration with Google Dialogflow, enabling advanced conversational AI features in your Vue applications.
+The Chat UI component integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your vue applications. The component acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses.
 
-## Getting Started With the ChatUI Component
+## Prerequisites
 
-Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is correctly rendered in your Vue app:
+* **Node.js**: Version 16 or higher with npm.
 
-[Vue Getting Started Guide](../getting-started)
+* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/).
 
-## Prerequisites
+* **Syncfusion Chat UI**: Package [@syncfusion/ej2-vue-interactive-chat](https://www.npmjs.com/package/@syncfusion/ej2-vue-interactive-chat) installed.
 
-* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/).
-* Backend requires `Node.js` (v16 or higher) and `npm`.
-* Syncfusion Chat UI for Vue `@syncfusion/ej2-vue-interactive-chat` installed in your Vue project.
 * Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file.
 
-## Install Dependencies
+## Set Up the vue Environment
 
-* Install `backend` dependencies for Dialogflow and server setup:
+Follow the [Getting Started](../getting-started) guide to configure and render the Chat UI component in your vue application.
 
-```bash
+## Install Dependency
 
-npm install express body-parser dialogflow cors
-
-```
-* Install the Syncfusion Chat UI in your Vue project:
+`Backend` dependencies for Dialogflow and server setup:
 
 ```bash
 
-npm install @syncfusion/ej2-vue-interactive-chat --save
+npm install express body-parser dialogflow cors
 
 ```
+
 ## Set Up the Dialogflow Agent
 
 1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`).
 
 2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator.
 
-3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file.
+3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file.
 
 > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production.
 
@@ -122,7 +117,8 @@ app.listen(5000, () => console.log('Backend running on http://localhost:5000'));
 > Use a unique `sessionId` (e.g., UUID) for each user to maintain conversation context.
 
 ## Configure message send 
-Use the Chat UI `messageSend` event to exchanges  message. Each time a user sends a message, this event will be invoked with details of the sent message.
+
+Use the Chat UI [messageSend](../api/chat-ui/#messagesend) event to exchanges  message. Each time a user sends a message, this event will be invoked with details of the sent message.
 
 ### Forward Message to backend:
 
@@ -130,7 +126,7 @@ Upon message submission, a POST request is sent to your backend API endpoint (`/
 
 ### Displaying Bot response:
 
-Create `src/App.vue` to integrate the Syncfusion Chat UI with the dialogflow backend:
+Modify the `src/App.vue` file to integrate the Chat UI with the dialogflow backend:
 
 {% tabs %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
diff --git a/ej2-vue/chat-ui/speech-to-text.md b/ej2-vue/chat-ui/speech-to-text.md
new file mode 100644
index 000000000..1118f1586
--- /dev/null
+++ b/ej2-vue/chat-ui/speech-to-text.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Speech-to-Text With Vue Chat UI component | Syncfusion
+description:  Checkout and learn about configuration of Speech-to-Text with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
+platform: ej2-vue
+control: Chat UI
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Speech-to-Text in Vue Chat UI
+
+The Syncfusion Vue Chat UI component integrates `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). This enables the conversion of spoken words into text using the device's microphone, allowing users to interact with the Chat UI through voice input.
+
+## Configure Speech-to-Text
+
+To enable Speech-to-Text functionality in the Vue Chat UI component, update the `App.vue` file to incorporate the Web Speech API.
+
+The [SpeechToText](https://ej2.syncfusion.com/vue/documentation/speech-to-text/getting-started) component listens to audio input from the device’s microphone, transcribes spoken words into text, and updates the Chat UI’s editable footer using the [footerTemplate](https://ej2.syncfusion.com/vue/documentation/api/chat-ui/#footertemplate) property to display the transcribed text. Once the transcription appears in the footer, users can send it as a message to others.
+
+### Configuration Options
+
+* **[`lang`](https://ej2.syncfusion.com/vue/documentation/api/speech-to-text/#lang)**: Specifies the language for speech recognition. For example:
+
+    * `en-US` for American English
+    * `fr-FR` for French
+
+* **[`allowInterimResults`](https://ej2.syncfusion.com/vue/documentation/api/speech-to-text/#allowInterimResults)**: Set to `true` to receive real-time (interim) recognition results, or `false` to receive only final results.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/stt/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chat-ui/stt/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+  
+{% previewsample "page.domainurl/code-snippet/chat-ui/stt" %}
+
+## Error Handling
+
+The `SpeechToText` component provides events to handle errors that may occur during speech recognition. For more information, refer to the [Error Handling](https://ej2.syncfusion.com/vue/documentation/speech-to-text/speech-recognition#error-handling) section in the documentation.
+
+## Browser Compatibility
+
+The `SpeechToText` component relies on the [Speech Recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition), which has limited browser support. Refer to the [Browser Compatibility](https://ej2.syncfusion.com/vue/documentation/speech-to-text/speech-recognition#browser-support) section for detailed information.
+
+## See Also
+
+* [Messages](./messages)
diff --git a/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app-composition.vue
index 8a2893559..2c54781e0 100644
--- a/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app-composition.vue
+++ b/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app-composition.vue
@@ -1,21 +1,21 @@
 <template>
-<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
-  <ejs-aiassistview
-    ref="aiAssist"
-    :promptSuggestions="suggestions"
-    :toolbarSettings="toolbarSettings"
-    bannerTemplate="bannerTemplate"
-    :prompt-request="onPromptRequest"
-    :stop-responding-click="stopRespondingClick"
-  >
-    <template v-slot:bannerTemplate>
-      <div class="banner-content">
-        <div class="e-icons e-assistview-icon"></div>
-        <h3>How can I help you?</h3>
-      </div>
-    </template>
-  </ejs-aiassistview>
-</div>
+  <div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
+    <ejs-aiassistview
+      ref="aiAssist"
+      :promptSuggestions="suggestions"
+      :toolbarSettings="toolbarSettings"
+      bannerTemplate="bannerTemplate"
+      :prompt-request="onPromptRequest"
+      :stop-responding-click="stopRespondingClick"
+    >
+      <template v-slot:bannerTemplate>
+        <div class="banner-content">
+          <div class="e-icons e-assistview-icon"></div>
+          <h3>How can I help you?</h3>
+        </div>
+      </template>
+    </ejs-aiassistview>
+  </div>
 </template>
  
 <script setup>
@@ -28,25 +28,29 @@ const suggestions = ref([
   'How can I maintain work-life balance effectively?',
 ]);
  
+const aiAssist = ref(null);
+const stopStreaming = ref(false);
+
 const toolbarSettings = {
-  items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
+  items: [{ iconCss: 'e-icons e-refresh', align: 'Right', tooltip: 'Clear Prompts' }], // Added tooltip for clarity
   itemClicked: (args) => {
     if (args.item.iconCss === 'e-icons e-refresh') {
-      aiAssist.value.prompts = [];
-      aiAssist.value.promptSuggestions = suggestions.value;
+      // Clear the prompts by resetting the prompts array
+      if (aiAssist.value && aiAssist.value.ej2Instances) {
+        aiAssist.value.ej2Instances.prompts = [];       // This empties the messages in the UI
+        aiAssist.value.ej2Instances.promptSuggestions = suggestions.value; // Reset suggestions
+        stopStreaming.value = true;                     // Stop any ongoing streaming
+      }
     }
   },
 };
  
-const aiAssist = ref(null);
-const stopStreaming: false;
- 
 const streamResponse = async (response) => {
   let lastResponse = '';
   const responseUpdateRate = 10;
   let i = 0;
   const responseLength = response.length;
-  while (i < responseLength && !stopStreaming.value) {
+  while (i < responseLength && !stopStreaming.value) { 
     lastResponse += response[i];
     i++;
     if (i % responseUpdateRate === 0 || i === responseLength) {
@@ -59,7 +63,7 @@ const streamResponse = async (response) => {
   aiAssist.value.ej2Instances.promptSuggestions = suggestions.value;
 };
 
- const onPromptRequest(args) {
+const onPromptRequest = async (args) => {
     fetch('http://localhost:11434/api/generate', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -72,27 +76,30 @@ const streamResponse = async (response) => {
       .then(response => response.json())
       .then(reply => {
         const responseText = reply.response?.trim() || 'No response received.';
-        this.stopStreaming = false;
-        this.streamResponse(responseText);
+        stopStreaming.value = false;
+        streamResponse(responseText);
       })
       .catch(error => {
-        this.$refs.aiAssist.ej2Instances.addPromptResponse(
+        aiAssist.value.ej2Instances.addPromptResponse(
           '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'
         );
-        this.$refs.aiAssist.ej2Instances.promptSuggestions = this.suggestions;
-        this.stopStreaming = true;
+        aiAssist.value.ej2Instances.promptSuggestions = suggestions.value;
+        stopStreaming.value = true;
       });
-  },
-  stopRespondingClick() {
-    this.stopStreaming = true;
-  },
+  };
+
+const stopRespondingClick = () => {
+    stopStreaming.value = true;
 };
+
 </script>
 
 <style>
+
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-</style>
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app.vue b/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app.vue
index c170d22dd..0dd1d413c 100644
--- a/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app.vue
+++ b/ej2-vue/code-snippet/ai-assistview/ai-integrations/llm-model/app.vue
@@ -93,9 +93,11 @@ methods: {
 </script>
 
 <style>
+
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+
 </style>
diff --git a/ej2-vue/code-snippet/ai-assistview/ai-integrations/open-ai/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/ai-integrations/open-ai/app-composition.vue
index 07e5e858c..2046bb026 100644
--- a/ej2-vue/code-snippet/ai-assistview/ai-integrations/open-ai/app-composition.vue
+++ b/ej2-vue/code-snippet/ai-assistview/ai-integrations/open-ai/app-composition.vue
@@ -21,7 +21,6 @@
 <script setup>
 import { ref } from 'vue';
 import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
-import { GoogleGenerativeAI } from '@google/generative-ai';
 import { marked } from 'marked';
 
 const azureOpenAIApiKey: 'YOUR_AZURE_OPENAI_API_KEY', // replace your key
diff --git a/ej2-vue/code-snippet/ai-assistview/speech/stt/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/speech/stt/app-composition.vue
index 75f350220..d75228d2d 100644
--- a/ej2-vue/code-snippet/ai-assistview/speech/stt/app-composition.vue
+++ b/ej2-vue/code-snippet/ai-assistview/speech/stt/app-composition.vue
@@ -58,12 +58,13 @@ import { SpeechToTextComponent as EjsSpeechtotext } from "@syncfusion/ej2-vue-in
 import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
 import { marked } from 'marked';
 
-const azureOpenAIApiKey: '', // YOUR_AZURE_OPENAI_API_KEY
-const azureOpenAIEndpoint: '', // YOUR_AZURE_OPENAI_API_ENDPOINT
-const azureOpenAIApiVersion: '', // YOUR_AZURE_OPENAI_API_VERSION
-const azureDeploymentName: '', // YOUR_DEPLOYMENT_NAME
+// Remove the colon after the variable names
+const azureOpenAIApiKey = ''; // YOUR_AZURE_OPENAI_API_KEY
+const azureOpenAIEndpoint = ''; // YOUR_AZURE_OPENAI_API_ENDPOINT
+const azureOpenAIApiVersion = ''; // YOUR_AZURE_OPENAI_API_VERSION
+const azureDeploymentName = ''; // YOUR_DEPLOYMENT_NAME
 
-const stopStreaming = false;
+const stopStreaming = ref(false); // This should also be ref for reactivity if it changes
 
 const toolbarSettings = {
   items: [
@@ -73,16 +74,18 @@ const toolbarSettings = {
       tooltip: 'Clear Prompts',
     },
   ],
-  itemClicked: () => {
+  // Corrected 'this' context issues for itemClicked
+  itemClicked: (args) => {
     aiAssist.value.ej2Instances.prompts = [];
     stopStreaming.value = true;
   },
 };
 const promptToolbarSettings = {
+  // Corrected 'this' context issues for itemClicked
   itemClicked: (args) => {
     if (args.item.iconCss === 'e-icons e-assist-edit') {
       assistviewFooter.value.innerHTML = aiAssist.value.ej2Instances.prompts[args.dataIndex].prompt;
-      this.toggleButtons();
+      toggleButtons(); // Call the function directly
     }
   },
 };
@@ -92,12 +95,14 @@ const assistviewFooter = ref(null);
 const speechToTextObj = ref(null);
 const assistviewSendButton = ref(null);
 
+// Streams the AI response character by character to create a typing effect
 const streamResponse = async (response) => {
   let lastResponse = '';
   const responseUpdateRate = 10;
   let i = 0;
   const responseLength = response.length;
-  while (i < responseLength && !this.stopStreaming) {
+  // Corrected 'this' context issues
+  while (i < responseLength && !stopStreaming.value) {
     lastResponse += response[i];
     i++;
     if (i % responseUpdateRate === 0 || i === responseLength) {
@@ -112,6 +117,8 @@ const streamResponse = async (response) => {
   }
   toggleButtons();
 };
+
+// Handles prompt requests by sending them to the Azure OpenAI API and streaming the response
 const onPromptRequest = (args) => {
     const url= azureOpenAIEndpoint.replace(/\/$/, '') +
     `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
@@ -142,25 +149,37 @@ const onPromptRequest = (args) => {
       toggleButtons();
     });
 };
+
+// Stops the ongoing streaming response and toggles button visibility
 const stopRespondingClick = () => {
   stopStreaming.value = true;
   toggleButtons();
 };
+
+// Updates the footer input with the latest speech transcript
 const onTranscriptChange = (args) => {
   assistviewFooter.value.innerText = args.transcript;
 };
+
+// Toggles button visibility when speech-to-text listening stops
 const onListeningStop = () => {
-  this.toggleButtons();
+  toggleButtons(); // Call the function directly
 };
+
+// Initializes button visibility when the speech-to-text component is created
 const created = () => {
-  this.toggleButtons();
+  toggleButtons(); // Call the function directly
 };
+
+// Handles Enter key press in the input to send the prompt without Shift
 const handleEvent = (e) => {
   if (e.key === 'Enter' && !e.shiftKey) {
-    this.sendIconClicked();
+    sendIconClicked(); // Call the function directly
     e.preventDefault();
   }
 };
+
+// Toggles visibility of send and speech buttons based on whether the input has text
 const toggleButtons = () => {
   const assistviewFooterEl = assistviewFooter.value;
   const sendButtonEl = assistviewSendButton.value?.$el;
@@ -175,6 +194,8 @@ const toggleButtons = () => {
     assistviewFooterEl.innerHTML = '';
   }
 };
+
+// Executes the current prompt from the footer input and clears it
 const sendIconClicked = (args) => {
   aiAssist.value.ej2Instances.executePrompt(assistviewFooter.value.innerText);
   assistviewFooter.value.innerText = '';
@@ -182,9 +203,13 @@ const sendIconClicked = (args) => {
 </script>
 
 <style>
+
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-</style>
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/ai-assistview/speech/stt/app.vue b/ej2-vue/code-snippet/ai-assistview/speech/stt/app.vue
index 08a577345..2a09af700 100644
--- a/ej2-vue/code-snippet/ai-assistview/speech/stt/app.vue
+++ b/ej2-vue/code-snippet/ai-assistview/speech/stt/app.vue
@@ -100,6 +100,7 @@ export default {
     });
   },
   methods: {
+    // Streams the AI response character by character to create a typing effect
     async streamResponse(response) {
       let lastResponse = '';
       const responseUpdateRate = 10;
@@ -120,6 +121,7 @@ export default {
       }
       this.toggleButtons();
     },
+    // Handles prompt requests by sending them to the Azure OpenAI API and streaming the response
     onPromptRequest(args) {
       if (!args?.prompt?.trim() || !this.$refs.aiAssist.ej2Instances) return;
       this.stopStreaming = false;
@@ -158,25 +160,31 @@ export default {
           toggleButtons();
         });
     },
+    // Stops the ongoing streaming response and toggles button visibility
     stopRespondingClick() {
       this.stopStreaming = true;
       this.toggleButtons();
     },
+    // Updates the footer input with the latest speech transcript
     onTranscriptChange(args) {
       this.$refs.assistviewFooter.innerText = args.transcript;
     },
+    // Toggles button visibility when speech-to-text listening stops
     onListeningStop() {
       this.toggleButtons();
     },
+    // Initializes button visibility when the speech-to-text component is created
     created() {
       this.toggleButtons();
     },
+    // Handles Enter key press in the input to send the prompt without Shift
     handleEvent(e) {
       if (e.key === 'Enter' && !e.shiftKey) {
         this.sendIconClicked();
         e.preventDefault();
       }
     },
+    // Toggles visibility of send and speech buttons based on whether the input has text
     toggleButtons() {
       const assistviewFooter = this.$refs.assistviewFooter;
       const sendButton = this.$refs.assistviewSendButton?.$el;
@@ -191,6 +199,7 @@ export default {
         assistviewFooter.innerHTML = '';
       }
     },
+    // Executes the current prompt from the footer input and clears it
     sendIconClicked(args) {
       this.$refs.aiAssist.ej2Instances.executePrompt(this.$refs.assistviewFooter.innerText);
       this.$refs.assistviewFooter.innerText = '';
@@ -199,9 +208,13 @@ export default {
 };
 </script>
 <style>
-  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-</style>
+
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/ai-assistview/speech/tts/app-composition.vue b/ej2-vue/code-snippet/ai-assistview/speech/tts/app-composition.vue
index 033e80f52..6dfd04cc3 100644
--- a/ej2-vue/code-snippet/ai-assistview/speech/tts/app-composition.vue
+++ b/ej2-vue/code-snippet/ai-assistview/speech/tts/app-composition.vue
@@ -24,10 +24,10 @@ import { ref } from 'vue';
 import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
 import { marked } from 'marked';
 
-const azureOpenAIApiKey: '', // YOUR_AZURE_OPENAI_API_KEY
-const azureOpenAIEndpoint: '', // YOUR_AZURE_OPENAI_API_ENDPOINT
-const azureOpenAIApiVersion: '', // YOUR_AZURE_OPENAI_API_VERSION
-const azureDeploymentName: '', // YOUR_DEPLOYMENT_NAME
+const azureOpenAIApiKey = ''; // YOUR_AZURE_OPENAI_API_KEY
+const azureOpenAIEndpoint = ''; // YOUR_AZURE_OPENAI_API_ENDPOINT
+const azureOpenAIApiVersion = ''; // YOUR_AZURE_OPENAI_API_VERSION
+const azureDeploymentName = ''; // YOUR_DEPLOYMENT_NAME // YOUR_DEPLOYMENT_NAME
 
 const stopStreaming = false;
 const currentUtterance = null;
@@ -52,10 +52,11 @@ const responseToolbarSettings = {
       { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Need Improvement' },
   ],
   itemClicked: (args) => onResponseToolbarItemClicked(args)
-},
+};
 
-const aiAssist = ref(null);
+  const aiAssist = ref(null);
 
+// Streams the AI response character by character to create a typing effect
 const streamResponse = async (response) => {
   let lastResponse = '';
   const responseUpdateRate = 10;
@@ -75,6 +76,8 @@ const streamResponse = async (response) => {
     await new Promise((resolve) => setTimeout(resolve, 15)); // Delay for streaming effect
   }
 };
+
+// Handles prompt requests by sending them to the Azure OpenAI API and streaming the response
 const onPromptRequest = (args) => {
     const url= azureOpenAIEndpoint.replace(/\/$/, '') +
     `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
@@ -104,9 +107,13 @@ const onPromptRequest = (args) => {
       stopStreaming.value = true;
     });
 };
+
+// Stops the ongoing streaming response
 const stopRespondingClick = () => {
   stopStreaming.value = true;
 };
+
+// Handles clicks on response toolbar items, such as copying, reading aloud, liking, or disliking the response
 const onResponseToolbarItemClicked = (args) => {
     const responseHtml = aiAssist.value.ej2Instances.prompts[args.dataIndex].response;
     if (responseHtml) {
@@ -137,9 +144,13 @@ const onResponseToolbarItemClicked = (args) => {
 </script>
 
 <style>
+
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-</style>
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/ai-assistview/speech/tts/app.vue b/ej2-vue/code-snippet/ai-assistview/speech/tts/app.vue
index b34165484..bc8922ad3 100644
--- a/ej2-vue/code-snippet/ai-assistview/speech/tts/app.vue
+++ b/ej2-vue/code-snippet/ai-assistview/speech/tts/app.vue
@@ -60,6 +60,7 @@ export default {
     };
   },
   methods: {
+    // Streams the AI response character by character to create a typing effect
     async streamResponse(response) {
       let lastResponse = '';
       const responseUpdateRate = 10;
@@ -79,6 +80,7 @@ export default {
         await new Promise((resolve) => setTimeout(resolve, 15)); // Delay for streaming effect
       }
     },
+    // Handles prompt requests by sending them to the Azure OpenAI API and streaming the response
     onPromptRequest(args) {
       if (!args?.prompt?.trim() || !this.$refs.aiAssist.ej2Instances) return;
       this.stopStreaming = false;
@@ -116,9 +118,11 @@ export default {
           this.stopStreaming = true;
         });
     },
+    // Stops the ongoing streaming response
     stopRespondingClick() {
       this.stopStreaming = true;
     },
+    // Handles clicks on response toolbar items, such as copying, reading aloud, liking, or disliking the response
     onResponseToolbarItemClicked(args) {
         const responseHtml = this.$refs.aiAssist.ej2Instances.prompts[args.dataIndex].response;
         if (responseHtml) {
@@ -149,10 +153,15 @@ export default {
   },
 };
 </script>
+
 <style>
-  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
-  @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-</style>
+
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/chat-ui/stt/app-composition.vue b/ej2-vue/code-snippet/chat-ui/stt/app-composition.vue
new file mode 100644
index 000000000..af31c2926
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/app-composition.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="integration-speechtotext">
+    <ejs-chatui
+      id="chatUI"
+      ref="chatUIInstance"
+      footerTemplate="footerTemplate"
+      :user="currentUser"
+    >
+    <e-messages>
+      <e-message :author="currentUser" text="Hi Michale, are we on track for the deadline?" ></e-message>
+      <e-message :author="michaleUser" text="Yes, the design phase is complete." ></e-message>
+      <e-message :author="currentUser" text="I’ll review it and send feedback by today." ></e-message>
+    </e-messages>
+      <template v-slot:footerTemplate="">
+        <div class="e-footer-wrapper">
+          <div
+            id="chatui-footer"
+            ref="chatUIFooter"
+            class="content-editor"
+            @input="toggleButtons"
+            @keydown="handleEvent"
+            contenteditable="true"
+            placeholder="Click to speak or start typing..."
+          ></div>
+          <div class="option-container">
+            <ejs-speechtotext
+              id="speechToText"
+              cssClass="e-flat"
+              ref="speechToTextObj"
+              @transcriptChanged="onTranscriptChange"
+              @onStop="onListeningStop"
+              @created="created"
+            ></ejs-speechtotext>
+            <ejs-button
+              id="chatui-sendButton"
+              ref="chatUISendButton"
+              @click="sendIconClicked"
+              class="e-assist-send e-icons e-outline"
+              role="button"
+            ></ejs-button>
+          </div>
+        </div>
+      </template>
+    </ejs-chatui>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ChatUIComponent as EjsChatui, MessagesDirective as EMessages, MessageDirective as EMessage } from '@syncfusion/ej2-vue-interactive-chat';
+import { SpeechToTextComponent as EjsSpeechtotext } from "@syncfusion/ej2-vue-inputs";
+import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
+
+const chatUIInstance = ref(null);
+const chatUIFooter = ref(null);
+const speechToTextObj = ref(null);
+const chatUISendButton = ref(null);
+
+const currentUser = {
+  id: "user1",
+  user: "Albert"
+};
+
+const michaleUser = {
+  id: "user2",
+  user: "Michale Suyama"
+};
+
+// Updates the footer input with the latest speech transcript
+const onTranscriptChange = (args) => {
+  chatUIFooter.value.innerText = args.transcript;
+};
+
+// Toggles button visibility when speech-to-text listening stops
+const onListeningStop = () => {
+  toggleButtons();
+};
+
+// Initializes button visibility when the speech-to-text component is created
+const created = () => {
+  toggleButtons();
+};
+
+// Handles Enter key press in the input to send the prompt without Shift
+const handleEvent = (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    sendIconClicked();
+    e.preventDefault();
+  }
+};
+
+// Toggles visibility of send and speech buttons based on whether the input has text
+const toggleButtons = () => {
+  const chatuiFooterEle = chatUIFooter.value;
+  const sendButtonEl = chatUISendButton.value?.$el;
+  const speechButtonEl = speechToTextObj.value?.$el;
+  if (!chatuiFooterEle || !sendButtonEl || !speechButtonEl) {
+    return;
+  }
+  const hasText = chatuiFooterEle.innerText.trim() !== '';
+  sendButtonEl.classList.toggle('visible', hasText);
+  speechButtonEl.classList.toggle('visible', !hasText);
+  if (!hasText && (chatuiFooterEle.innerHTML === '<br>' || chatuiFooterEle.innerHTML.trim() === '')) {
+    chatuiFooterEle.innerHTML = '';
+  }
+};
+
+// Executes the current prompt from the footer input and clears it
+const sendIconClicked = () => {
+  const editor = chatUIFooter.value;
+  const messageContent = editor?.innerText || '';
+  if (messageContent.trim()) {
+    chatUIInstance.value.ej2Instances.addMessage({
+      author: currentUser,
+      text: messageContent
+    });
+    editor.innerText = '';
+    toggleButtons();
+  }
+};
+</script>
+
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+
+.integration-speechtotext {
+    height: 400px;
+    width: 450px;
+    margin: 0 auto;
+  }
+
+  .integration-speechtotext #chatui-sendButton {
+    width: 40px;
+    height: 40px;
+    font-size: 15px;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  .integration-speechtotext #speechToText.visible,
+  .integration-speechtotext #chatui-sendButton.visible {
+    display: inline-block;
+  }
+
+  .integration-speechtotext #speechToText,
+  .integration-speechtotext #chatui-sendButton {
+    display: none;
+  }
+
+  @media only screen and (max-width: 750px) {
+    .integration-speechtotext {
+      width: 100%;
+    }
+  }
+
+  .integration-speechtotext .e-footer-wrapper {
+    display: flex;
+    border: 1px solid #c1c1c1;
+    margin: 5px 5px 0 5px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+
+  .integration-speechtotext .content-editor {
+    width: 100%;
+    overflow-y: auto;
+    font-size: 14px;
+    min-height: 20px;
+    max-height: 150px;
+    padding: 10px;
+  }
+
+  .integration-speechtotext .content-editor[contentEditable='true']:empty:before {
+    content: attr(placeholder);
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  .integration-speechtotext .option-container {
+    align-self: flex-end;
+  }
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/chat-ui/stt/app.vue b/ej2-vue/code-snippet/chat-ui/stt/app.vue
new file mode 100644
index 000000000..cb756458a
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/app.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="integration-speechtotext">
+    <ejs-chatui
+      id="chatUI"
+      ref="chatUIInstance"
+      footerTemplate="footerTemplate"
+      :user="currentUser"
+    >
+    <e-messages>
+      <e-message :author="currentUser" text="Hi Michale, are we on track for the deadline?" ></e-message>
+      <e-message :author="michaleUser" text="Yes, the design phase is complete." ></e-message>
+      <e-message :author="currentUser" text="I’ll review it and send feedback by today." ></e-message>
+    </e-messages>
+      <template v-slot:footerTemplate="">
+        <div class="e-footer-wrapper">
+          <div
+            id="chatui-footer"
+            ref="chatUIFooter"
+            class="content-editor"
+            @input="toggleButtons"
+            @keydown="handleEvent"
+            contenteditable="true"
+            placeholder="Click to speak or start typing..."
+          ></div>
+          <div class="option-container">
+            <ejs-speechtotext
+              id="speechToText"
+              cssClass="e-flat"
+              ref="speechToTextObj"
+              @transcriptChanged="onTranscriptChange"
+              @onStop="onListeningStop"
+              @created="created"
+            ></ejs-speechtotext>
+            <ejs-button
+              id="chatui-sendButton"
+              ref="chatUISendButton"
+              @click="sendIconClicked"
+              class="e-assist-send e-icons e-outline"
+              role="button"
+            ></ejs-button>
+          </div>
+        </div>
+      </template>
+    </ejs-chatui>
+  </div>
+</template>
+
+<script>
+import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-vue-interactive-chat';
+import { SpeechToTextComponent } from '@syncfusion/ej2-vue-inputs';
+import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
+
+export default {
+  components: {
+    'ejs-chatui': ChatUIComponent,
+    'e-messages': MessagesDirective,
+    'e-message': MessageDirective,
+    'ejs-speechtotext': SpeechToTextComponent,
+    'ejs-button': ButtonComponent,
+  },
+  data() {
+    return {
+      currentUser: {
+        id: "user1",
+        user: "Albert"
+      },
+      michaleUser: {
+        id: "user2",
+        user: "Michale Suyama"
+      }
+    };
+  },
+  mounted() {
+    // Defer initial toggleButtons call until after mount
+    this.$nextTick(() => {
+      this.toggleButtons();
+    });
+  },
+  methods: {
+    // Updates the footer input with the latest speech transcript
+    onTranscriptChange(args) {
+      this.$refs.chatUIFooter.innerText = args.transcript;
+    },
+    // Toggles button visibility when speech-to-text listening stops
+    onListeningStop() {
+      this.toggleButtons();
+    },
+    // Initializes button visibility when the speech-to-text component is created
+    created() {
+      this.toggleButtons();
+    },
+    // Handles Enter key press in the input to send the prompt without Shift
+    handleEvent(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        this.sendIconClicked();
+        e.preventDefault();
+      }
+    },
+    // Toggles visibility of send and speech buttons based on whether the input has text
+    toggleButtons() {
+      const chatUIFooter = this.$refs.chatUIFooter;
+      const sendButton = this.$refs.chatUISendButton?.$el;
+      const speechButton = this.$refs.speechToTextObj?.$el;
+      if (!chatUIFooter || !sendButton || !speechButton) {
+        return;
+      }
+      const hasText = chatUIFooter.innerText.trim() !== '';
+      sendButton.classList.toggle('visible', hasText);
+      speechButton.classList.toggle('visible', !hasText);
+      if (
+        !hasText &&
+        (chatUIFooter.innerHTML === '<br>' ||
+          chatUIFooter.innerHTML.trim() === '')
+      ) {
+        chatUIFooter.innerHTML = '';
+      }
+    },
+    // Executes the current prompt from the footer input and clears it
+    sendIconClicked() {
+      const editor = this.$refs.chatUIFooter;
+      const messageContent = editor?.innerText || '';
+      if (messageContent.trim()) {
+        this.$refs.chatUIInstance.addMessage({
+          author: this.currentUser,
+          text: messageContent
+        });
+        editor.innerText = '';
+        this.toggleButtons();
+      }
+    }
+  },
+};
+</script>
+
+<style>
+  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+  @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+
+  .integration-speechtotext {
+    height: 400px;
+    width: 450px;
+    margin: 0 auto;
+  }
+
+  .integration-speechtotext #chatui-sendButton {
+    width: 40px;
+    height: 40px;
+    font-size: 15px;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  .integration-speechtotext #speechToText.visible,
+  .integration-speechtotext #chatui-sendButton.visible {
+    display: inline-block;
+  }
+
+  .integration-speechtotext #speechToText,
+  .integration-speechtotext #chatui-sendButton {
+    display: none;
+  }
+
+  @media only screen and (max-width: 750px) {
+    .integration-speechtotext {
+      width: 100%;
+    }
+  }
+
+  .integration-speechtotext .e-footer-wrapper {
+    display: flex;
+    border: 1px solid #c1c1c1;
+    margin: 5px 5px 0 5px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+
+  .integration-speechtotext .content-editor {
+    width: 100%;
+    overflow-y: auto;
+    font-size: 14px;
+    min-height: 20px;
+    max-height: 150px;
+    padding: 10px;
+  }
+
+  .integration-speechtotext .content-editor[contentEditable='true']:empty:before {
+    content: attr(placeholder);
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  .integration-speechtotext .option-container {
+    align-self: flex-end;
+  }
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/chat-ui/stt/index.css b/ej2-vue/code-snippet/chat-ui/stt/index.css
new file mode 100644
index 000000000..88ae03492
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/index.css
@@ -0,0 +1,74 @@
+.integration-speechtotext-section {
+  height: 350px;
+  width: 650px;
+  margin: 0 auto;
+}
+
+.integration-speechtotext-section .e-view-container {
+  margin: auto;
+}
+.integration-speechtotext-section .e-banner-view {
+  margin-left: 0;
+}
+.integration-speechtotext-section .banner-content .e-listen-icon:before {
+  font-size: 25px;
+}
+
+.integration-speechtotext-section .banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  text-align: center;
+}
+
+.integration-speechtotext-section #assistview-sendButton {
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.integration-speechtotext-section #speechToText.visible,
+.integration-speechtotext-section #assistview-sendButton.visible {
+  display: inline-block;
+}
+
+.integration-speechtotext-section #speechToText,
+.integration-speechtotext-section #assistview-sendButton {
+  display: none;
+}
+
+@media only screen and (max-width: 750px) {
+  .integration-speechtotext-section {
+    width: 100%;
+  }
+}
+
+.integration-speechtotext-section .e-footer-wrapper {
+  display: flex;
+  border: 1px solid #c1c1c1;
+  padding: 5px 5px 5px 10px;
+  margin: 5px 5px 0 5px;
+  border-radius: 30px;
+}
+
+.integration-speechtotext-section .content-editor {
+  width: 100%;
+  overflow-y: auto;
+  font-size: 14px;
+  min-height: 25px;
+  max-height: 200px;
+  padding: 10px;
+}
+
+.integration-speechtotext-section .content-editor[contentEditable='true']:empty:before {
+  content: attr(placeholder);
+  color: #6b7280;
+  font-style: italic;
+}
+
+.integration-speechtotext-section .option-container {
+  align-self: flex-end;
+}
diff --git a/ej2-vue/code-snippet/chat-ui/stt/index.html b/ej2-vue/code-snippet/chat-ui/stt/index.html
new file mode 100644
index 000000000..0d0e060ee
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/chat-ui/stt/index.js b/ej2-vue/code-snippet/chat-ui/stt/index.js
new file mode 100644
index 000000000..d0a03905b
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/index.js
@@ -0,0 +1,127 @@
+import Vue from 'vue';
+import { ChatUIPlugin } from "@syncfusion/ej2-vue-interactive-chat";
+Vue.use(ChatUIPlugin);
+
+new Vue({
+  el: '#app',
+  template: `
+      <template>
+        <div class="integration-speechtotext">
+          <ejs-chatui
+            id="chatUI"
+            ref="chatUIInstance"
+            footerTemplate="footerTemplate"
+            :user="currentUser"
+          >
+          <e-messages>
+            <e-message :author="currentUser" text="Hi Michale, are we on track for the deadline?" ></e-message>
+            <e-message :author="michaleUser" text="Yes, the design phase is complete." ></e-message>
+            <e-message :author="currentUser" text="I’ll review it and send feedback by today." ></e-message>
+          </e-messages>
+            <template v-slot:footerTemplate="">
+              <div class="e-footer-wrapper">
+                <div
+                  id="chatui-footer"
+                  ref="chatUIFooter"
+                  class="content-editor"
+                  @input="toggleButtons"
+                  @keydown="handleEvent"
+                  contenteditable="true"
+                  placeholder="Click to speak or start typing..."
+                ></div>
+                <div class="option-container">
+                  <ejs-speechtotext
+                    id="speechToText"
+                    cssClass="e-flat"
+                    ref="speechToTextObj"
+                    @transcriptChanged="onTranscriptChange"
+                    @onStop="onListeningStop"
+                    @created="created"
+                  ></ejs-speechtotext>
+                  <ejs-button
+                    id="chatui-sendButton"
+                    ref="chatUISendButton"
+                    @click="sendIconClicked"
+                    class="e-assist-send e-icons e-outline"
+                    role="button"
+                  ></ejs-button>
+                </div>
+              </div>
+            </template>
+          </ejs-chatui>
+        </div>
+      </template>
+`,
+
+  data: function () {
+    return {
+      currentUser: {
+        id: "user1",
+        user: "Albert"
+      },
+      michaleUser: {
+        id: "user2",
+        user: "Michale Suyama"
+      }
+    };
+  },
+  mounted() {
+    // Defer initial toggleButtons call until after mount
+    this.$nextTick(() => {
+      this.toggleButtons();
+    });
+  },
+  methods: {
+    // Updates the footer input with the latest speech transcript
+    onTranscriptChange(args) {
+      this.$refs.chatUIFooter.innerText = args.transcript;
+    },
+    // Toggles button visibility when speech-to-text listening stops
+    onListeningStop() {
+      this.toggleButtons();
+    },
+    // Initializes button visibility when the speech-to-text component is created
+    created() {
+      this.toggleButtons();
+    },
+    // Handles Enter key press in the input to send the prompt without Shift
+    handleEvent(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        this.sendIconClicked();
+        e.preventDefault();
+      }
+    },
+    // Toggles visibility of send and speech buttons based on whether the input has text
+    toggleButtons() {
+      const chatUIFooter = this.$refs.chatUIFooter;
+      const sendButton = this.$refs.chatUISendButton?.$el;
+      const speechButton = this.$refs.speechToTextObj?.$el;
+      if (!chatUIFooter || !sendButton || !speechButton) {
+        return;
+      }
+      const hasText = chatUIFooter.innerText.trim() !== '';
+      sendButton.classList.toggle('visible', hasText);
+      speechButton.classList.toggle('visible', !hasText);
+      if (
+        !hasText &&
+        (chatUIFooter.innerHTML === '<br>' ||
+          chatUIFooter.innerHTML.trim() === '')
+      ) {
+        chatUIFooter.innerHTML = '';
+      }
+    },
+    // Executes the current prompt from the footer input and clears it
+    sendIconClicked() {
+      const editor = this.$refs.chatUIFooter;
+      const messageContent = editor?.innerText || '';
+      if (messageContent.trim()) {
+        this.$refs.chatUIInstance.addMessage({
+          author: this.currentUserModel,
+          text: messageContent
+        });
+        editor.innerText = '';
+        this.toggleButtons();
+      }
+    }
+  },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/chat-ui/stt/systemjs.config.js b/ej2-vue/code-snippet/chat-ui/stt/systemjs.config.js
new file mode 100644
index 000000000..ddac8ee2e
--- /dev/null
+++ b/ej2-vue/code-snippet/chat-ui/stt/systemjs.config.js
@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",  
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-interactive-chat": "syncfusion:ej2-vue-interactive-chat/dist/ej2-vue-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+        "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
+        "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js",
+        "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js"
+    }
+});
+
+System.import('index.js');
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/app-composition.vue b/ej2-vue/code-snippet/dialog/getting-started-cs2/app-composition.vue
new file mode 100644
index 000000000..01a3c7b6c
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/app-composition.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div id="target" class="control-section">
+      <ejs-dialog :target="data[0].target" :width="data[0].width" :content="data[0].content">
+      </ejs-dialog>
+    </div>
+  </div>
+</template>
+<script setup>
+import { DialogComponent as EjsDialog } from "@syncfusion/ej2-vue-popups";
+  const data = [{ target: "#target",
+                  width: "335px",
+                  content: "This is a Dialog with content.",}]
+</script>
+<style>
+  .control-section {
+    height: 100%;
+    min-height: 200px;
+  }
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/app.vue b/ej2-vue/code-snippet/dialog/getting-started-cs2/app.vue
new file mode 100644
index 000000000..f2f33d81a
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/app.vue
@@ -0,0 +1,32 @@
+<template>
+<div>
+  <div id="target" class="control-section">
+    <ejs-dialog :target="target" :width="width" :content="content">
+    </ejs-dialog>
+  </div>
+</div>
+</template>
+<script>
+import { DialogComponent } from "@syncfusion/ej2-vue-popups";
+export default {
+name: "App",
+components: {
+"ejs-dialog":DialogComponent
+},
+data: function () {
+  return {
+    target: "#target",
+    width: "335px",
+    content: "This is a Dialog with content.",
+  };
+},
+methods: {},
+}
+</script>
+<style>
+
+.control-section {
+  height: 100%;
+  min-height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/index.css b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.css
new file mode 100644
index 000000000..e826847ca
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.css
@@ -0,0 +1,6 @@
+
+
+    .control-section {
+        height: 100%;
+        min-height: 200px;
+    }
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/index.html b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/index.js b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.js
new file mode 100644
index 000000000..324e62e1b
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/index.js
@@ -0,0 +1,26 @@
+
+import Vue from "vue";
+import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
+Vue.use(DialogPlugin);
+
+
+new Vue({
+	el: '#app',
+	template: `
+  <div>
+    <div id="target"  class="control-section">
+        <ejs-dialog :target='target' :width='width' :content='content'>
+        </ejs-dialog>
+    </div>
+  </div>
+`,
+
+    data: function() {
+        return {
+            target: "#target",
+            width: '335px',
+            content: 'This is a Dialog with content.'
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/dialog/getting-started-cs2/systemjs.config.js b/ej2-vue/code-snippet/dialog/getting-started-cs2/systemjs.config.js
new file mode 100644
index 000000000..034c3182f
--- /dev/null
+++ b/ej2-vue/code-snippet/dialog/getting-started-cs2/systemjs.config.js
@@ -0,0 +1,28 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js"        
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/file-manager/flat-data-cs1/app.vue b/ej2-vue/code-snippet/file-manager/flat-data-cs1/app.vue
index f3e66372b..081c521ad 100644
--- a/ej2-vue/code-snippet/file-manager/flat-data-cs1/app.vue
+++ b/ej2-vue/code-snippet/file-manager/flat-data-cs1/app.vue
@@ -14,13 +14,15 @@
   </div>
 </template>
 <script>
+import {
+  Permission,
+  FileData,
+} from '@syncfusion/ej2-filemanager';
 import {
   FileManagerComponent,
   NavigationPane,
   Toolbar,
   DetailsView,
-  Permission,
-  FileData,
 } from '@syncfusion/ej2-vue-filemanager';
 
 let permission = {
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs6/app-composition.vue b/ej2-vue/code-snippet/grid/edit/edit-cs6/app-composition.vue
index 1f4574d36..d8c8e4cf2 100644
--- a/ej2-vue/code-snippet/grid/edit/edit-cs6/app-composition.vue
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs6/app-composition.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='280px'>
+    <ejs-grid ref="grid" :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='280px'>
         <e-columns>
           <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' :validationRules='orderIDRules' textAlign='Right' width=100></e-column>
           <e-column field='CustomerID' headerText='Customer ID' :validationRules='customerIDRules' width=120></e-column>
@@ -9,17 +9,17 @@
           <e-column field="Verified" headerText="Verified" textAlign="Right" width="90" :template="'columnTemplate'" :validationRules='verifiedRules'></e-column>
         </e-columns>
         <template v-slot:columnTemplate="{data}">
-          <ejs-checkbox :checked="data.Verified"></ejs-checkbox>
+          <ejs-checkbox :checked="data.Verified" @change="onVerifiedChange($event, data)"></ejs-checkbox>
         </template>
     </ejs-grid>
   </div>
 </template>
 <script setup>
-import { provide } from "vue";
+import { provide, ref } from "vue";
 import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
 import { CheckBoxComponent as EjsCheckbox } from "@syncfusion/ej2-vue-buttons";
 import { data } from './datasource.js';
-
+const grid=ref(null);
 const orderIDRules = { required: true };
 const customerIDRules = { required: true };
 const dateRules= { required: true  };
@@ -28,6 +28,15 @@ const freightRules = { required: true, min: 1, max: 1000 };
 const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
 const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
 provide('grid', [Edit, Toolbar]);
+
+function onVerifiedChange(args, rowData) {
+  const rowIndex = grid.value.ej2Instances.getRowIndexByPrimaryKey(rowData.OrderID);
+  grid.value.ej2Instances.updateRow(rowIndex, {
+    ...rowData,
+    Verified: args.checked,
+  });
+}
+
 </script>
 <style>
 @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
diff --git a/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue b/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue
index ffa8763b5..471e2091c 100644
--- a/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue
+++ b/ej2-vue/code-snippet/grid/edit/edit-cs6/app.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='280px' >
+        <ejs-grid ref="grid" :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='280px' >
             <e-columns>
               <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' :validationRules='orderIDRules' textAlign='Right' width=100></e-column>
               <e-column field='CustomerID' headerText='Customer ID' :validationRules='customerIDRules' width=120></e-column>
@@ -9,7 +9,7 @@
               <e-column field="Verified" headerText="Verified" textAlign="Right" width="90" :template="'columnTemplate'" :validationRules='verifiedRules'></e-column>
             </e-columns>
             <template v-slot:columnTemplate="{data}">
-              <ejs-checkbox :checked="data.Verified"></ejs-checkbox>
+              <ejs-checkbox :checked="data.Verified" @change="onVerifiedChange($event, data)"></ejs-checkbox>
           </template>
         </ejs-grid>
     </div>
@@ -39,6 +39,15 @@ components: {
       toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
     };
   },
+  methods: {
+    onVerifiedChange(args, rowData) {
+      const rowIndex = this.$refs.grid.getRowIndexByPrimaryKey(rowData.OrderID);
+      this.$refs.grid.updateRow(rowIndex, {
+        ...rowData,
+        Verified: args.checked,
+      });
+    },
+  },
   provide: {
     grid: [Edit, Toolbar]
   }
diff --git a/ej2-vue/code-snippet/grid/how-to/grid-resize/app-composition.vue b/ej2-vue/code-snippet/grid/how-to/grid-resize/app-composition.vue
index 127225cf4..814779e56 100644
--- a/ej2-vue/code-snippet/grid/how-to/grid-resize/app-composition.vue
+++ b/ej2-vue/code-snippet/grid/how-to/grid-resize/app-composition.vue
@@ -2,10 +2,10 @@
   <div id="app">
     <div style="display: inline-block;">
       <label> Enter the width: </label>
-      <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="400" format="n"
+      <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="'400'" format="n"
         width='120px'></ejs-numerictextbox>
       <label> Enter the height </label>
-      <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="200" format="n"
+      <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="'200'" format="n"
         width='120px'></ejs-numerictextbox>
       <ejs-button style='margin-left:5px' ref='button' cssClass='e-outline' v-on:click="onExternalResize">Update</ejs-button>
     </div>
diff --git a/ej2-vue/code-snippet/grid/how-to/grid-resize/app.vue b/ej2-vue/code-snippet/grid/how-to/grid-resize/app.vue
index 2c652eac6..a6fee223b 100644
--- a/ej2-vue/code-snippet/grid/how-to/grid-resize/app.vue
+++ b/ej2-vue/code-snippet/grid/how-to/grid-resize/app.vue
@@ -2,9 +2,9 @@
   <div id="app">
     <div style="display: inline-block;">
       <label> Enter the width: </label> 
-      <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="400" format="n"  width='120px'></ejs-numerictextbox>
+      <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="'400'" format="n"  width='120px'></ejs-numerictextbox>
       <label> Enter the height </label> 
-      <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="200" format="n"  width='120px'></ejs-numerictextbox>
+      <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="'200'" format="n"  width='120px'></ejs-numerictextbox>
       <ejs-button style='margin-left:5px' ref='button' cssClass='e-outline' v-on:click="onExternalResize">Update</ejs-button>
     </div>
     <div id="parent">
diff --git a/ej2-vue/code-snippet/grid/how-to/grid-resize/index.js b/ej2-vue/code-snippet/grid/how-to/grid-resize/index.js
index e3d01a8c8..89e8a8b3c 100644
--- a/ej2-vue/code-snippet/grid/how-to/grid-resize/index.js
+++ b/ej2-vue/code-snippet/grid/how-to/grid-resize/index.js
@@ -1,4 +1,3 @@
-
 import Vue from "vue";
 import { GridPlugin } from "@syncfusion/ej2-vue-grids";
 import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
@@ -15,9 +14,9 @@ new Vue({
     <div id="app">
         <div style="display: inline-block;">
             <label> Enter the width: </label> 
-            <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="400" format="n"  width='120px'></ejs-numerictextbox>
+            <ejs-numerictextbox ref='widthTextbox' :min="400" :max="650" :step='5' :placeholder="'400'" format="n"  width='120px'></ejs-numerictextbox>
             <label> Enter the height </label> 
-            <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="200" format="n"  width='120px'></ejs-numerictextbox>
+            <ejs-numerictextbox ref='heightTextbox' :min="200" :max="600" :step='5' :placeholder="'200'" format="n"  width='120px'></ejs-numerictextbox>
             <ejs-button style='margin-left:5px' ref='button' cssClass='e-outline' v-on:click.native="onExternalResize">Update</ejs-button>
         </div>
         <div id="parent">
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/cell-selection/app-composition.vue
new file mode 100644
index 000000000..e17573b0c
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/app-composition.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <button
+      class="e-btn"
+      style="margin-bottom: 20px"
+      @click="selectCell"
+    >
+      Select Cell
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent as EjsRichtexteditor
+  Toolbar,
+  Link,
+  Image,
+  HtmlEditor,
+  QuickToolbar
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { ref } from 'vue';
+
+const rteRef = ref();
+
+const rteValue = `<table style="width:100%; border-collapse: collapse;" border="1">
+    <thead>
+      <tr>
+        <th style="font-weight:bold; padding:8px;">Product</th>
+        <th style="font-weight:bold; padding:8px;">Price</th>
+        <th style="font-weight:bold; padding:8px;">Stock</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="padding:8px;">Product A</td>
+        <td style="padding:8px;">$25</td>
+        <td style="padding:8px;">Available</td>
+      </tr>
+      <tr>
+        <td style="padding:8px;">Product B</td>
+        <td style="padding:8px;">$40</td>
+        <td style="padding:8px;">Out of Stock</td>
+      </tr>
+    </tbody>
+  </table>`;
+
+function selectCell() {
+    const panel =
+    this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
+    const cells = panel.querySelectorAll('td');
+
+    if (cells.length > 2) {
+      const cell = cells[2]; // Third cell
+      const range = document.createRange();
+      range.selectNode(cell);
+
+      const selection = window.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+
+      cell.style.backgroundColor = '#cce5ff';
+      cell.classList.add('e-cell-select');
+    }
+
+}
+provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/app.vue b/ej2-vue/code-snippet/rich-text-editor/cell-selection/app.vue
new file mode 100644
index 000000000..5522da524
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/app.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <button
+      class="e-btn"
+      style="margin-bottom: 20px"
+      @click="selectCell"
+    >
+      Select Cell
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  HtmlEditor,
+  QuickToolbar,
+} from '@syncfusion/ej2-vue-richtexteditor';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-richtexteditor': RichTextEditorComponent,
+  },
+
+  data() {
+    return {
+      rteValue: `<table style="width:100%; border-collapse: collapse;" border="1">
+    <thead>
+      <tr>
+        <th style="font-weight:bold; padding:8px;">Product</th>
+        <th style="font-weight:bold; padding:8px;">Price</th>
+        <th style="font-weight:bold; padding:8px;">Stock</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="padding:8px;">Product A</td>
+        <td style="padding:8px;">$25</td>
+        <td style="padding:8px;">Available</td>
+      </tr>
+      <tr>
+        <td style="padding:8px;">Product B</td>
+        <td style="padding:8px;">$40</td>
+        <td style="padding:8px;">Out of Stock</td>
+      </tr>
+    </tbody>
+  </table>`,
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
+  },
+  methods: {
+    selectCell() {
+      const panel =
+        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
+        const cells = panel.querySelectorAll('td');
+
+        if (cells.length > 2) {
+          const cell = cells[2]; // Third cell
+          const range = document.createRange();
+          range.selectNode(cell);
+
+          const selection = window.getSelection();
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+
+          cell.style.backgroundColor = '#cce5ff';
+          cell.classList.add('e-cell-select');
+        }
+     
+      }
+    }
+};
+</script>
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.css b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.html b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.js b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.js
new file mode 100644
index 000000000..7c2f51d0e
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/index.js
@@ -0,0 +1,71 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div>
+    <button
+      class="e-btn"
+      style="margin-bottom: 20px"
+      @click="selectCell"
+    >
+      Select Cell
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>`,
+
+  data() {
+    return {
+      rteValue: `<table style="width:100%; border-collapse: collapse;" border="1">
+    <thead>
+      <tr>
+        <th style="font-weight:bold; padding:8px;">Product</th>
+        <th style="font-weight:bold; padding:8px;">Price</th>
+        <th style="font-weight:bold; padding:8px;">Stock</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="padding:8px;">Product A</td>
+        <td style="padding:8px;">$25</td>
+        <td style="padding:8px;">Available</td>
+      </tr>
+      <tr>
+        <td style="padding:8px;">Product B</td>
+        <td style="padding:8px;">$40</td>
+        <td style="padding:8px;">Out of Stock</td>
+      </tr>
+    </tbody>
+  </table>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  },
+  methods: {
+    selectCell() {
+      const panel =
+        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
+        const cells = panel.querySelectorAll('td');
+
+        if (cells.length > 2) {
+          const cell = cells[2]; // Third cell
+          const range = document.createRange();
+          range.selectNode(cell);
+
+          const selection = window.getSelection();
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+
+          cell.style.backgroundColor = '#cce5ff';
+          cell.classList.add('e-cell-select');
+        }
+     
+      }
+  },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/cell-selection/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/cell-selection/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/cell-selection/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app-composition.vue
new file mode 100644
index 000000000..fe16633f1
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app-composition.vue
@@ -0,0 +1,25 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings">
+  </ejs-richtexteditor>
+</template>
+
+<script setup>
+import { provide } from "vue";  
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+const rteValue = `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`,
+const toolbarSettings = {
+   items: ['FullScreen']
+};
+provide('richtexteditor',  [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app.vue b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app.vue
new file mode 100644
index 000000000..655e5c690
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/app.vue
@@ -0,0 +1,37 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings">
+  </ejs-richtexteditor>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+  name: "App",
+  components: {
+    "ejs-richtexteditor": RichTextEditorComponent
+  },
+
+  data() {
+    return {
+      toolbarSettings: {
+          items: ['FullScreen']
+      },
+      rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.css b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.html b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.js b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.js
new file mode 100644
index 000000000..6b04cdd20
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings">
+  </ejs-richtexteditor>`,
+
+  data() {
+    return {
+      toolbarSettings: {
+        items: ['FullScreen']
+      },
+      rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/fullscreen-mode/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/mail-merge/app-composition.vue
new file mode 100644
index 000000000..5423cae35
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/app-composition.vue
@@ -0,0 +1,170 @@
+{% raw %}
+<template>
+  <div id="defaultRTE">
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section">
+          <ejs-richtexteditor ref="rteObj" id="mailMergeEditor" :value="value" :saveInterval="saveInterval"
+            :toolbarSettings="toolbarSettings" :actionBegin="onActionBegin"
+            :actionComplete="OnActionComplete"></ejs-richtexteditor>
+
+          <button class="e-control e-lib e-btn e-formats-tbar-btn e-rte-elements e-tbar-btn e-tbar-btn"
+            tabindex="-1" id="merge_data" style="width:100%" @click="onClickHandler">
+            <span style="display:inline-flex"><span class="e-tbar-btn-text">Merge Data</span></span>
+          </button>
+
+          <ejs-dropdownbutton id="insertField" :items="itemsName" :content="dropdownContent"
+            cssClass="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu"
+            @select="onItemSelect" @close="onDropDownClose"></ejs-dropdownbutton>
+        </div>
+
+        <ejs-mention ref="mentionObj" id="mentionObj" target="#mailMergeEditor_rte-edit-view"
+          :mentionChar="mentionChar" :allowSpaces="true" :dataSource="mergeData" :fields="fieldsData"
+          popupWidth="250px" popupHeight="200px" :displayTemplate="'displayTemplate'">
+          <template v-slot:displayTemplate="{ data }">
+            <span>{{ formatMentionTemplate(data.value) }}</span>
+          </template>
+        </ejs-mention>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide } from "vue";
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Table, Link, Image, HtmlEditor, QuickToolbar, Video, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent as EjsMention } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownButtonComponent as EjsDropdownbutton } from '@syncfusion/ej2-vue-splitbuttons';
+import { NodeSelection } from '@syncfusion/ej2-vue-richtexteditor';
+
+const rteObj = ref(null);
+const mentionObj = ref(null);
+const value = ref(`<p>Dear <span contenteditable="false" class="e-mention-chip"><span>{{FirstName}}</span></span> <span contenteditable="false" class="e-mention-chip"><span>{{LastName}}</span></span>,</p>
+<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable="false" class="e-mention-chip"><span>{{PromoCode}}</span></span>.</p>
+<p>Your current subscription plan is: <span contenteditable="false" class="e-mention-chip"><span>{{SubscriptionPlan}}</span></span>.</p>
+<p>Your customer ID is: <span contenteditable="false" class="e-mention-chip"><span>{{CustomerID}}</span></span>.</p>
+<p>Your promotional code expires on: <span contenteditable="false" class="e-mention-chip"><span>{{ExpirationDate}}</span></span>.</p>
+<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href="mailto:{{SupportEmail}}"><span contenteditable="false" class="e-mention-chip"><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable="false" class="e-mention-chip"><span>{{SupportPhoneNumber}}</span></span>.</p>
+<p>Best regards,<br>The <span contenteditable="false" class="e-mention-chip"><span>{{CompanyName}}</span></span> Team</p>`);
+
+const saveInterval = 1;
+const selection = new NodeSelection();
+
+const dropdownContent = `<span style="display:inline-flex;"><span class="e-rte-dropdown-btn-text">Insert Field</span></span>`;
+
+const itemsName = [
+  { text: 'First Name' }, { text: 'Last Name' }, { text: 'Support Email' },
+  { text: 'Company Name' }, { text: 'Promo Code' }, { text: 'Support Phone Number' },
+  { text: 'Customer ID' }, { text: 'Expiration Date' }, { text: 'Subscription Plan' },
+];
+
+const placeholderData = {
+  FirstName: 'John', LastName: 'Doe', PromoCode: 'ABC123', SubscriptionPlan: 'Premium',
+  CustomerID: '123456', ExpirationDate: '2024-12-31', SupportEmail: 'support@example.com',
+  SupportPhoneNumber: '+1-800-555-5555', CompanyName: 'Example Inc.',
+};
+
+const textToValueMap = {
+  'First Name': 'FirstName', 'Last Name': 'LastName', 'Support Email': 'SupportEmail',
+  'Company Name': 'CompanyName', 'Promo Code': 'PromoCode', 'Support Phone Number': 'SupportPhoneNumber',
+  'Customer ID': 'CustomerID', 'Expiration Date': 'ExpirationDate', 'Subscription Plan': 'SubscriptionPlan',
+};
+
+const mergeData = [
+  { text: 'First Name', value: 'FirstName' }, { text: 'Last Name', value: 'LastName' },
+  { text: 'Support Email', value: 'SupportEmail' }, { text: 'Company Name', value: 'CompanyName' },
+  { text: 'Promo Code', value: 'PromoCode' }, { text: 'Support Phone Number', value: 'SupportPhoneNumber' },
+  { text: 'Customer ID', value: 'CustomerID' }, { text: 'Expiration Date', value: 'ExpirationDate' },
+  { text: 'Subscription Plan', value: 'SubscriptionPlan' },
+];
+
+const fieldsData = { text: 'text', value: 'value' };
+const mentionChar = '{{';
+
+const toolbarSettings = {
+  items: [
+    'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|',
+    'CreateLink', 'Image', 'CreateTable', '|',
+    { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' },
+    { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' },
+    'SourceCode', '|', 'Undo', 'Redo',
+  ],
+};
+
+provide('richtexteditor', [Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup]);
+
+const formatMentionTemplate = (val) => `{{${val}}}`;
+
+const onDropDownClose = () => {
+  rteObj.value?.ej2Instances?.focusIn();
+};
+
+const onItemSelect = (args) => {
+  if (!args?.item?.text) return;
+  const key = args.item.text.trim();
+  const field = textToValueMap[key];
+  if (!field || !rteObj.value?.ej2Instances) return;
+
+  const editor = rteObj.value.ej2Instances;
+  editor.formatter.editorManager.nodeSelection.restore();
+  editor.executeCommand('insertHTML', `<span contenteditable="false" class="e-mention-chip">{{${field}}}</span> `, { undo: true });
+};
+
+const onActionBegin = (args) => {
+  if (args.requestType === 'EnterAction' && mentionObj.value?.ej2Instances?.element.classList.contains('e-popup-open')) {
+    args.cancel = true;
+  }
+};
+
+const OnActionComplete = (e) => {
+  const toolbar = rteObj.value?.ej2Instances?.getToolbar();
+  if (!toolbar) return;
+
+  const mergeBtn = toolbar.querySelector('#merge_data')?.parentElement;
+  const fieldBtn = toolbar.querySelector('#insertField')?.parentElement;
+
+  if (e.requestType === 'SourceCode') {
+    mergeBtn?.classList.add('e-overlay');
+    fieldBtn?.classList.add('e-overlay');
+  } else if (e.requestType === 'Preview') {
+    mergeBtn?.classList.remove('e-overlay');
+    fieldBtn?.classList.remove('e-overlay');
+  }
+};
+
+const onClickHandler = () => {
+  const editor = rteObj.value?.ej2Instances;
+  if (!editor) {
+    console.log('MailMergeEditor is not initialized.');
+    return;
+  }
+
+  const content = editor.value || '';
+  const merged = replacePlaceholders(content, placeholderData);
+
+  if (editor.formatter.getUndoRedoStack()?.length === 0) editor.formatter.saveData();
+
+  value.value = merged;
+  editor.formatter.saveData();
+  rteObj.value.trigger('change');
+};
+
+const replacePlaceholders = (tmpl, data) => {
+  return tmpl.replace(/{{\s*(\w+)\s*}}/g, (m, k) => {
+    const v = data[k.trim()];
+    return v !== undefined ? v : m;
+  });
+};
+</script>
+{% endraw %}
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/app.vue b/ej2-vue/code-snippet/rich-text-editor/mail-merge/app.vue
new file mode 100644
index 000000000..37bf5d829
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/app.vue
@@ -0,0 +1,179 @@
+{% raw %}
+<template>
+  <div id="defaultRTE">
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section">
+          <ejs-richtexteditor ref="rteObj" id="mailMergeEditor" :value="value" :saveInterval="saveInterval" :toolbarSettings="toolbarSettings" :actionBegin="onActionBegin" :actionComplete="OnActionComplete"></ejs-richtexteditor>
+          <button class="e-control e-lib e-btn e-formats-tbar-btn e-rte-elements e-tbar-btn e-tbar-btn" tabindex="-1" id="merge_data" style="width: 100%" @click="onClickHandler">
+            <span style="display: inline-flex"><span class="e-tbar-btn-text">Merge Data</span></span>
+          </button>
+          <ejs-dropdownbutton id="insertField" :items="itemsName" :content="dropdownContent" cssClass="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu" @select="onItemSelect($event)" @close="onDropDownClose"></ejs-dropdownbutton>
+        </div>
+        <ejs-mention ref="mentionObj" id="mentionObj" target="#mailMergeEditor_rte-edit-view" :mentionChar="mentionChar" :allowSpaces="true" :dataSource="mergeData" :fields="fieldsData" popupWidth="250px" popupHeight="200px" :displayTemplate="'displayTemplate'">
+          <template v-slot:displayTemplate="{ data }">
+            <span>{{ formatMentionTemplate(data.value) }}</span>
+          </template>
+        </ejs-mention>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownButtonComponent } from '@syncfusion/ej2-vue-splitbuttons';
+export default {
+  components: {
+    'ejs-richtexteditor': RichTextEditorComponent,
+    'ejs-mention': MentionComponent,
+    'ejs-dropdownbutton': DropDownButtonComponent,
+  },
+  data() {
+    return {
+      selection: new NodeSelection(),
+      saveInterval: 1,
+      ranges: null,
+      saveSelection: null,
+      value: `<p>Dear <span contenteditable="false" class="e-mention-chip"><span>{{FirstName}}</span></span> <span contenteditable="false" class="e-mention-chip"><span>{{LastName}}</span></span>,</p>
+<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable="false" class="e-mention-chip"><span>{{PromoCode}}</span></span>.</p>
+<p>Your current subscription plan is: <span contenteditable="false" class="e-mention-chip"><span>{{SubscriptionPlan}}</span></span>.</p>
+<p>Your customer ID is: <span contenteditable="false" class="e-mention-chip"><span>{{CustomerID}}</span></span>.</p>
+<p>Your promotional code expires on: <span contenteditable="false" class="e-mention-chip"><span>{{ExpirationDate}}</span></span>.</p>
+<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href="mailto:{{SupportEmail}}"><span contenteditable="false" class="e-mention-chip"><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable="false" class="e-mention-chip"><span>{{SupportPhoneNumber}}</span></span>.</p>
+<p>Best regards,<br>The <span contenteditable="false" class="e-mention-chip"><span>{{CompanyName}}</span></span> Team</p>`,
+      dropdownContent: `<span style="display:inline-flex;"><span class="e-rte-dropdown-btn-text">Insert Field</span></span>`,
+      itemsName: [
+        { text: 'First Name' },
+        { text: 'Last Name' },
+        { text: 'Support Email' },
+        { text: 'Company Name' },
+        { text: 'Promo Code' },
+        { text: 'Support Phone Number' },
+        { text: 'Customer ID' },
+        { text: 'Expiration Date' },
+        { text: 'Subscription Plan' },
+      ],
+      placeholderData: {
+        FirstName: 'John',
+        LastName: 'Doe',
+        PromoCode: 'ABC123',
+        SubscriptionPlan: 'Premium',
+        CustomerID: '123456',
+        ExpirationDate: '2024-12-31',
+        SupportEmail: 'support@example.com',
+        SupportPhoneNumber: '+1-800-555-5555',
+        CompanyName: 'Example Inc.',
+      },
+      textToValueMap: {
+        'First Name': 'FirstName',
+        'Last Name': 'LastName',
+        'Support Email': 'SupportEmail',
+        'Company Name': 'CompanyName',
+        'Promo Code': 'PromoCode',
+        'Support Phone Number': 'SupportPhoneNumber',
+        'Customer ID': 'CustomerID',
+        'Expiration Date': 'ExpirationDate',
+        'Subscription Plan': 'SubscriptionPlan',
+      },
+      mergeData: [
+        { text: 'First Name', value: 'FirstName' },
+        { text: 'Last Name', value: 'LastName' },
+        { text: 'Support Email', value: 'SupportEmail' },
+        { text: 'Company Name', value: 'CompanyName' },
+        { text: 'Promo Code', value: 'PromoCode' },
+        { text: 'Support Phone Number', value: 'SupportPhoneNumber' },
+        { text: 'Customer ID', value: 'CustomerID' },
+        { text: 'Expiration Date', value: 'ExpirationDate' },
+        { text: 'Subscription Plan', value: 'SubscriptionPlan' },
+      ],
+      fieldsData: { text: 'text', value: 'value' },
+      mentionChar: '{{',
+      toolbarSettings: {
+        items: [
+          'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
+          { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' },
+          { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' },
+          'SourceCode', '|', 'Undo', 'Redo',
+        ],
+      },
+    };
+  },
+  provide() {
+    return {
+      richtexteditor: [Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup],
+    };
+  },
+  methods: {
+    onDropDownClose() {
+      if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+  this.$refs.rteObj.ej2Instances.focusIn();
+}
+    },
+    formatMentionTemplate(value) {
+      return `{{${value}}}`;
+    },
+    displayTemplate(data) {
+      return `${data.value}`;
+    },
+    onItemSelect: function(args) {
+      if (args && args.item && args.item.text) {
+        const value = this.textToValueMap[args.item.text.trim()];
+        if (value && this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+          this.$refs.rteObj.ej2Instances.formatter.editorManager.nodeSelection.restore();
+          this.$refs.rteObj.ej2Instances.executeCommand('insertHTML', `<span contenteditable="false" class="e-mention-chip">{{${value}}}</span> `, { undo: true });
+        } else {
+          console.log('No matching value found in textToValueMap or RichTextEditor is not initialized.');
+        }
+      }
+    },
+    onActionBegin(args) {
+      if (args.requestType === 'EnterAction' && this.$refs.mentionObj && this.$refs.mentionObj.ej2Instances && this.$refs.mentionObj.ej2Instances.element.classList.contains('e-popup-open')) {
+        args.cancel = true;
+      }
+    },
+    OnActionComplete(e) {
+      if (e.requestType === 'SourceCode') {
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay');
+      } else if (e.requestType === 'Preview') {
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay');
+      }
+    },
+    onClickHandler() {
+      if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+        let editorContent = this.$refs.rteObj.ej2Instances.value || '';
+        let mergedContent = this.replacePlaceholders(editorContent, this.placeholderData);
+        if (this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack() && this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack().length === 0) {
+          this.$refs.rteObj.ej2Instances.formatter.saveData();
+        }
+        this.value = mergedContent;
+        this.$refs.rteObj.ej2Instances.formatter.saveData();
+        this.$refs.rteObj.trigger('change');
+      } else {
+        console.log('MailMergeEditor is not initialized.');
+      }
+    },
+    replacePlaceholders(template, data) {
+      return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
+        const value = data[key.trim()];
+        return value !== undefined ? value : match;
+      });
+    },
+  },
+};
+</script>
+{% endraw %}
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.css b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.html b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js
new file mode 100644
index 000000000..b2de4e57c
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js
@@ -0,0 +1,161 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons';
+Vue.use(RichTextEditorPlugin);
+Vue.use(MentionPlugin);
+Vue.use(DropDownButtonPlugin);
+
+new Vue({
+	el: '#app',
+	template: `  <div id="defaultRTE">
+    <div class="control-section">
+      <div class="sample-container">
+        <div class="default-section">
+          <ejs-richtexteditor ref="rteObj" id="mailMergeEditor" :value="value" :saveInterval="saveInterval" :toolbarSettings="toolbarSettings" :actionBegin="onActionBegin" :actionComplete="OnActionComplete"></ejs-richtexteditor>
+          <button class="e-control e-lib e-btn e-formats-tbar-btn e-rte-elements e-tbar-btn e-tbar-btn" tabindex="-1" id="merge_data" style="width: 100%" @click="onClickHandler">
+            <span style="display: inline-flex"><span class="e-tbar-btn-text">Merge Data</span></span>
+          </button>
+          <ejs-dropdownbutton id="insertField" :items="itemsName" :content="dropdownContent" cssClass="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu" @select="onItemSelect($event)" @close="onDropDownClose"></ejs-dropdownbutton>
+        </div>
+        <ejs-mention ref="mentionObj" id="mentionObj" target="#mailMergeEditor_rte-edit-view" :mentionChar="mentionChar" :allowSpaces="true" :dataSource="mergeData" :fields="fieldsData" popupWidth="250px" popupHeight="200px" :displayTemplate="'displayTemplate'">
+          <template v-slot:displayTemplate="{ data }">
+            <span>{{ formatMentionTemplate(data.value) }}</span>
+          </template>
+        </ejs-mention>
+      </div>
+    </div>
+  </div>`,
+
+  data() {
+    return {
+     selection: new NodeSelection(),
+      saveInterval: 1,
+      ranges: null,
+      saveSelection: null,
+      value: `<p>Dear <span contenteditable="false" class="e-mention-chip"><span>{{FirstName}}</span></span> <span contenteditable="false" class="e-mention-chip"><span>{{LastName}}</span></span>,</p>
+<p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable="false" class="e-mention-chip"><span>{{PromoCode}}</span></span>.</p>
+<p>Your current subscription plan is: <span contenteditable="false" class="e-mention-chip"><span>{{SubscriptionPlan}}</span></span>.</p>
+<p>Your customer ID is: <span contenteditable="false" class="e-mention-chip"><span>{{CustomerID}}</span></span>.</p>
+<p>Your promotional code expires on: <span contenteditable="false" class="e-mention-chip"><span>{{ExpirationDate}}</span></span>.</p>
+<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href="mailto:{{SupportEmail}}"><span contenteditable="false" class="e-mention-chip"><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable="false" class="e-mention-chip"><span>{{SupportPhoneNumber}}</span></span>.</p>
+<p>Best regards,<br>The <span contenteditable="false" class="e-mention-chip"><span>{{CompanyName}}</span></span> Team</p>`,
+      dropdownContent: `<span style="display:inline-flex;"><span class="e-rte-dropdown-btn-text">Insert Field</span></span>`,
+      itemsName: [
+        { text: 'First Name' },
+        { text: 'Last Name' },
+        { text: 'Support Email' },
+        { text: 'Company Name' },
+        { text: 'Promo Code' },
+        { text: 'Support Phone Number' },
+        { text: 'Customer ID' },
+        { text: 'Expiration Date' },
+        { text: 'Subscription Plan' },
+      ],
+      placeholderData: {
+        FirstName: 'John',
+        LastName: 'Doe',
+        PromoCode: 'ABC123',
+        SubscriptionPlan: 'Premium',
+        CustomerID: '123456',
+        ExpirationDate: '2024-12-31',
+        SupportEmail: 'support@example.com',
+        SupportPhoneNumber: '+1-800-555-5555',
+        CompanyName: 'Example Inc.',
+      },
+      textToValueMap: {
+        'First Name': 'FirstName',
+        'Last Name': 'LastName',
+        'Support Email': 'SupportEmail',
+        'Company Name': 'CompanyName',
+        'Promo Code': 'PromoCode',
+        'Support Phone Number': 'SupportPhoneNumber',
+        'Customer ID': 'CustomerID',
+        'Expiration Date': 'ExpirationDate',
+        'Subscription Plan': 'SubscriptionPlan',
+      },
+      mergeData: [
+        { text: 'First Name', value: 'FirstName' },
+        { text: 'Last Name', value: 'LastName' },
+        { text: 'Support Email', value: 'SupportEmail' },
+        { text: 'Company Name', value: 'CompanyName' },
+        { text: 'Promo Code', value: 'PromoCode' },
+        { text: 'Support Phone Number', value: 'SupportPhoneNumber' },
+        { text: 'Customer ID', value: 'CustomerID' },
+        { text: 'Expiration Date', value: 'ExpirationDate' },
+        { text: 'Subscription Plan', value: 'SubscriptionPlan' },
+      ],
+      fieldsData: { text: 'text', value: 'value' },
+      mentionChar: '{{',
+      toolbarSettings: {
+        items: [
+          'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|',
+          { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' },
+          { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' },
+          'SourceCode', '|', 'Undo', 'Redo',
+        ],
+      },
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  },
+   methods: {
+    onDropDownClose() {
+      if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+  this.$refs.rteObj.ej2Instances.focusIn();
+}
+    },
+    formatMentionTemplate(value) {
+      return `{{${value}}}`;
+    },
+    displayTemplate(data) {
+      return `${data.value}`;
+    },
+    onItemSelect: function(args) {
+      if (args && args.item && args.item.text) {
+        const value = this.textToValueMap[args.item.text.trim()];
+        if (value && this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+          this.$refs.rteObj.ej2Instances.formatter.editorManager.nodeSelection.restore();
+          this.$refs.rteObj.ej2Instances.executeCommand('insertHTML', `<span contenteditable="false" class="e-mention-chip">{{${value}}}</span> `, { undo: true });
+        } else {
+          console.log('No matching value found in textToValueMap or RichTextEditor is not initialized.');
+        }
+      }
+    },
+    onActionBegin(args) {
+      if (args.requestType === 'EnterAction' && this.$refs.mentionObj && this.$refs.mentionObj.ej2Instances && this.$refs.mentionObj.ej2Instances.element.classList.contains('e-popup-open')) {
+        args.cancel = true;
+      }
+    },
+    OnActionComplete(e) {
+      if (e.requestType === 'SourceCode') {
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay');
+      } else if (e.requestType === 'Preview') {
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
+        this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay');
+      }
+    },
+    onClickHandler() {
+      if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) {
+        let editorContent = this.$refs.rteObj.ej2Instances.value || '';
+        let mergedContent = this.replacePlaceholders(editorContent, this.placeholderData);
+        if (this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack() && this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack().length === 0) {
+          this.$refs.rteObj.ej2Instances.formatter.saveData();
+        }
+        this.value = mergedContent;
+        this.$refs.rteObj.ej2Instances.formatter.saveData();
+        this.$refs.rteObj.trigger('change');
+      } else {
+        console.log('MailMergeEditor is not initialized.');
+      }
+    },
+    replacePlaceholders(template, data) {
+      return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
+        const value = data[key.trim()];
+        return value !== undefined ? value : match;
+      });
+    },
+  }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app-composition.vue
new file mode 100644
index 000000000..83d689c09
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app-composition.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <ejs-richtexteditor
+      id="mention_integration"
+      :value="rteValue"
+      placeholder="Type @ and tag the name"
+    ></ejs-richtexteditor>
+
+    <ejs-mention
+      ref="mentionObj"
+      id="mentionEditor"
+      target="#mention_integration_rte-edit-view"
+      :minLength="3"
+      :dataSource="data"
+      :fields="fieldsData"
+    ></ejs-mention>
+  </div>
+</template>
+
+<script>
+import { ref, provide } from 'vue';
+import {
+  RichTextEditorComponent as EjsRichtexteditor,
+  HtmlEditor,
+  Toolbar,
+  Image,
+  Link,
+  QuickToolbar,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent as EjsMention } from '@syncfusion/ej2-vue-dropdowns';
+
+provide('richtexteditor', [HtmlEditor, Toolbar, Image, Link, QuickToolbar]);
+
+const mentionObj = ref(null);
+
+const rteValue = `<p>Hello <span contenteditable="false" class="e-mention-chip">mailto:maria@gmail.com@Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>@</code> character and tag user from the suggestion list.</p>`;
+
+const data = [
+  { Name: 'Selma Rose', EmailId: 'selma@gmail.com' },
+  { Name: 'Maria', EmailId: 'maria@gmail.com' },
+  { Name: 'Russo Kay', EmailId: 'russo@gmail.com' },
+  { Name: 'Robert', EmailId: 'robert@gmail.com' },
+  { Name: 'Camden Kate', EmailId: 'camden@gmail.com' },
+];
+
+const fieldsData = { text: 'Name' };
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app.vue b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app.vue
new file mode 100644
index 000000000..7e5f4f732
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/app.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <ejs-richtexteditor id="mention_integration" :value="rteValue" placeholder="Type @ and tag the name"></ejs-richtexteditor>
+        <ejs-mention ref="mentionObj" id="mentionEditor" target="#mention_integration_rte-edit-view" :minLength="3" :dataSource="data" :fields="fieldsData"></ejs-mention>
+    </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { MentionComponent } from "@syncfusion/ej2-vue-dropdowns";
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent,
+        "ejs-mention":MentionComponent
+    },
+    data: function() {
+        return {
+            rteValue: `<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>`,
+            data: [
+                { Name: "Selma Rose",  EmailId: "selma@gmail.com" },
+                { Name: "Maria",   EmailId: "maria@gmail.com" },
+                { Name: "Russo Kay",  EmailId: "russo@gmail.com" },
+                { Name: "Camden Kate",  EmailId: "camden@gmail.com" },
+                { Name: "Robert",  EmailId: "robert@gmail.com" },
+                { Name: "Garth", EmailId: "garth@gmail.com" },
+            ],
+            fieldsData: { text: 'Name' }
+        };
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor]
+    },
+};
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.css b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.css
new file mode 100644
index 000000000..e6b747476
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.css
@@ -0,0 +1,47 @@
+#mention-TemplateList {
+    position: relative;
+    display: inline-block;
+    padding: 2px;
+}
+.mentionNameList .person, .mentionNameList.email {
+    display: block;
+    line-height: 20px;
+    text-indent: 5px;
+}
+.mentionNameList .person {
+    font-size: 16px;
+}
+.mentionEmpImage {
+    display: inline-block;
+    width: 46px;
+    height: 46px;
+    padding: 3px;
+    border-radius: 25px;
+}
+#mention-TemplateList .e-badge-success {
+    left: 76%;
+    bottom: 4px;
+    top: auto;
+}
+#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
+    line-height: 8px;
+}
+#mention-TemplateList .e-badge-success {
+    background-color: #4d841d;
+    color: #fff;
+}
+#mention-TemplateList .e-badge-success.away {
+    background-color: #fedd2d;
+    color: #fff;
+}
+#mention-TemplateList .e-badge-success.busy {
+    background-color: #de1a1a;
+    color: #fff;
+}
+#mention-TemplateList .e-badge.e-badge-dot {
+    height: 10px;
+    width: 10px;
+}
+#mention_integration .e-mention-chip{
+    cursor: pointer;
+}
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.html b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.js b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.js
new file mode 100644
index 000000000..fa4aceb2f
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/index.js
@@ -0,0 +1,34 @@
+import Vue from "vue";
+import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
+
+Vue.use(MentionPlugin);
+Vue.use(RichTextEditorPlugin);
+
+new Vue({
+	el: '#app',
+	template: `
+       <div>
+        <ejs-richtexteditor id="mention_integration" :value="rteValue" placeholder="Type @ and tag the name"></ejs-richtexteditor>
+        <ejs-mention ref="mentionObj" id="mentionEditor" target="#mention_integration_rte-edit-view" :minLength="3" :dataSource="data" :fields="fieldsData"></ejs-mention>
+    </div>
+`,
+
+    data: function() {
+        return {
+           rteValue: `<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>`,
+            data: [
+                { Name: "Selma Rose",  EmailId: "selma@gmail.com" },
+                { Name: "Maria",   EmailId: "maria@gmail.com" },
+                { Name: "Russo Kay",  EmailId: "russo@gmail.com" },
+                { Name: "Camden Kate",  EmailId: "camden@gmail.com" },
+                { Name: "Robert",  EmailId: "robert@gmail.com" },
+                { Name: "Garth", EmailId: "garth@gmail.com" },
+            ],
+            fieldsData: { text: 'Name' }
+        };
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor]
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-min-length/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/systemjs.config.js
new file mode 100644
index 000000000..5adcc2fdb
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-min-length/systemjs.config.js
@@ -0,0 +1,48 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app-composition.vue
new file mode 100644
index 000000000..dae83c2c1
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app-composition.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <ejs-richtexteditor
+      id="mention_integration"
+      :value="rteValue"
+      placeholder="Type @ and tag the name"
+    ></ejs-richtexteditor>
+
+    <ejs-mention
+      ref="mentionObj"
+      id="mentionEditor"
+      target="#mention_integration_rte-edit-view"
+      :suggestionCount="5"
+      :dataSource="data"
+      :fields="fieldsData"
+    ></ejs-mention>
+  </div>
+</template>
+
+<script>
+import { ref, provide } from 'vue';
+import {
+  RichTextEditorComponent as EjsRichtexteditor,
+  HtmlEditor,
+  Toolbar,
+  Image,
+  Link,
+  QuickToolbar,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { MentionComponent as EjsMention } from '@syncfusion/ej2-vue-dropdowns';
+
+provide('richtexteditor', [HtmlEditor, Toolbar, Image, Link, QuickToolbar]);
+
+const mentionObj = ref(null);
+
+const rteValue = `<p>Hello <span contenteditable="false" class="e-mention-chip">mailto:maria@gmail.com@Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>@</code> character and tag user from the suggestion list.</p>`;
+
+const data = [
+  { Name: 'Selma Rose', EmailId: 'selma@gmail.com' },
+  { Name: 'Maria', EmailId: 'maria@gmail.com' },
+  { Name: 'Russo Kay', EmailId: 'russo@gmail.com' },
+  { Name: 'Robert', EmailId: 'robert@gmail.com' },
+  { Name: 'Camden Kate', EmailId: 'camden@gmail.com' },
+];
+
+const fieldsData = { text: 'Name' };
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app.vue b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app.vue
new file mode 100644
index 000000000..76c4634a0
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/app.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <ejs-richtexteditor id="mention_integration" :value="rteValue" placeholder="Type @ and tag the name"></ejs-richtexteditor>
+        <ejs-mention ref="mentionObj" id="mentionEditor" target="#mention_integration_rte-edit-view" :suggestionCount="5" :dataSource="data" :fields="fieldsData"></ejs-mention>
+    </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { MentionComponent } from "@syncfusion/ej2-vue-dropdowns";
+
+export default {
+    name: "App",
+    components: {
+        "ejs-richtexteditor":RichTextEditorComponent,
+        "ejs-mention":MentionComponent
+    },
+    data: function() {
+        return {
+            rteValue: `<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>`,
+            data: [
+                { Name: "Selma Rose",  EmailId: "selma@gmail.com" },
+                { Name: "Maria",   EmailId: "maria@gmail.com" },
+                { Name: "Russo Kay",  EmailId: "russo@gmail.com" },
+                { Name: "Camden Kate",  EmailId: "camden@gmail.com" },
+                { Name: "Robert",  EmailId: "robert@gmail.com" },
+                { Name: "Garth", EmailId: "garth@gmail.com" },
+            ],
+            fieldsData: { text: 'Name' }
+        };
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor]
+    },
+};
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap5.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.css b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.css
new file mode 100644
index 000000000..e6b747476
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.css
@@ -0,0 +1,47 @@
+#mention-TemplateList {
+    position: relative;
+    display: inline-block;
+    padding: 2px;
+}
+.mentionNameList .person, .mentionNameList.email {
+    display: block;
+    line-height: 20px;
+    text-indent: 5px;
+}
+.mentionNameList .person {
+    font-size: 16px;
+}
+.mentionEmpImage {
+    display: inline-block;
+    width: 46px;
+    height: 46px;
+    padding: 3px;
+    border-radius: 25px;
+}
+#mention-TemplateList .e-badge-success {
+    left: 76%;
+    bottom: 4px;
+    top: auto;
+}
+#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
+    line-height: 8px;
+}
+#mention-TemplateList .e-badge-success {
+    background-color: #4d841d;
+    color: #fff;
+}
+#mention-TemplateList .e-badge-success.away {
+    background-color: #fedd2d;
+    color: #fff;
+}
+#mention-TemplateList .e-badge-success.busy {
+    background-color: #de1a1a;
+    color: #fff;
+}
+#mention-TemplateList .e-badge.e-badge-dot {
+    height: 10px;
+    width: 10px;
+}
+#mention_integration .e-mention-chip{
+    cursor: pointer;
+}
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.html b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.js b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.js
new file mode 100644
index 000000000..aa0425f69
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/index.js
@@ -0,0 +1,35 @@
+import Vue from "vue";
+import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
+import { MentionPlugin } from "@syncfusion/ej2-vue-dropdowns";
+
+Vue.use(MentionPlugin);
+Vue.use(RichTextEditorPlugin);
+
+new Vue({
+	el: '#app',
+	template: `
+       <div>
+        <ejs-richtexteditor id="mention_integration" :value="rteValue" placeholder="Type @ and tag the name"></ejs-richtexteditor>
+        <ejs-mention ref="mentionObj" id="mentionEditor" target="#mention_integration_rte-edit-view" :suggestionCount="5" :dataSource="data" :fields="fieldsData"></ejs-mention>
+    </div>
+`,
+
+    data: function() {
+        return {
+            rteValue: `<p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">&#64;Maria</a></span>&#8203;</p><p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list.</p>`,
+            data: [
+                { Name: "Selma Rose",  EmailId: "selma@gmail.com" },
+                { Name: "Maria",   EmailId: "maria@gmail.com" },
+                { Name: "Russo Kay",  EmailId: "russo@gmail.com" },
+                { Name: "Camden Kate",  EmailId: "camden@gmail.com" },
+                { Name: "Robert",  EmailId: "robert@gmail.com" },
+                { Name: "Garth", EmailId: "garth@gmail.com" },
+            ],
+            fieldsData: { text: 'Name' }
+        };
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor]
+    },
+
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/systemjs.config.js
new file mode 100644
index 000000000..5adcc2fdb
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/mention-suggestion-list/systemjs.config.js
@@ -0,0 +1,48 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",        
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app-composition.vue
new file mode 100644
index 000000000..fcf5da57d
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app-composition.vue
@@ -0,0 +1,22 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+  </ejs-richtexteditor>
+</template>
+
+<script setup>
+import { provide } from "vue";  
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+const rteValue = `<blockquote><p><strong>Outer Quote:</strong> The Rich Text Editor provides a flexible way to format quotations.</p><blockquote><p><em>Inner Quote:</em> You can even nest blockquotes to represent quoted replies or layered citations.</p><blockquote><p><em>Deep Quote:</em> This is useful in forums, emails, or academic writing where multiple levels of quoting are needed.</p></blockquote></blockquote></blockquote>`,
+provide('richtexteditor',  [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app.vue b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app.vue
new file mode 100644
index 000000000..05b023618
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/app.vue
@@ -0,0 +1,34 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+  </ejs-richtexteditor>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+  name: "App",
+  components: {
+    "ejs-richtexteditor": RichTextEditorComponent
+  },
+
+  data() {
+    return {
+      rteValue: `<blockquote><p><strong>Outer Quote:</strong> The Rich Text Editor provides a flexible way to format quotations.</p><blockquote><p><em>Inner Quote:</em> You can even nest blockquotes to represent quoted replies or layered citations.</p><blockquote><p><em>Deep Quote:</em> This is useful in forums, emails, or academic writing where multiple levels of quoting are needed.</p></blockquote></blockquote></blockquote>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.css b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.html b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.js b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.js
new file mode 100644
index 000000000..c0e643bee
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `  <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+  </ejs-richtexteditor>`,
+
+  data() {
+    return {
+      rteValue: `<blockquote><p><strong>Outer Quote:</strong> The Rich Text Editor provides a flexible way to format quotations.</p><blockquote><p><em>Inner Quote:</em> You can even nest blockquotes to represent quoted replies or layered citations.</p><blockquote><p><em>Deep Quote:</em> This is useful in forums, emails, or academic writing where multiple levels of quoting are needed.</p></blockquote></blockquote></blockquote>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-blockquote/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/nesting-table/app-composition.vue
new file mode 100644
index 000000000..b8ac1353a
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/app-composition.vue
@@ -0,0 +1,59 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings">
+  </ejs-richtexteditor>
+</template>
+
+<script setup>
+import { provide } from "vue";  
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Table, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+const rteValue = `<table border="1" style="width:100%; border-collapse: collapse;">
+      <tr>
+        <th>Department</th>
+        <th>Details</th>
+      </tr>
+      <tr>
+        <td>Sales</td>
+        <td>
+          <table border="1" style="width:100%; border-collapse: collapse;">
+            <tr>
+              <th>Employee</th>
+              <th>Target</th>
+            </tr>
+            <tr>
+              <td>John Doe</td>
+              <td>$50,000</td>
+            </tr>
+            <tr>
+              <td>Jane Smith</td>
+              <td>$60,000</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td>Marketing</td>
+        <td>Campaign planning in progress</td>
+      </tr>
+    </table>`,
+const toolbarSettings = {
+   items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+            'LowerCase', 'UpperCase', '|',
+            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+            'Outdent', 'Indent', '|',
+            'CreateLink', 'Image', 'CreateTable', '|', 'ClearFormat',
+            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+};
+provide('richtexteditor',  [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/app.vue b/ej2-vue/code-snippet/rich-text-editor/nesting-table/app.vue
new file mode 100644
index 000000000..a97f91923
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/app.vue
@@ -0,0 +1,71 @@
+<template>
+  <ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings">
+  </ejs-richtexteditor>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+export default {
+  name: "App",
+  components: {
+    "ejs-richtexteditor": RichTextEditorComponent
+  },
+
+  data() {
+    return {
+      toolbarSettings: {
+          items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+            'LowerCase', 'UpperCase', '|',
+            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+            'Outdent', 'Indent', '|',
+            'CreateLink', 'Image','CreateTable', '|', 'ClearFormat',
+            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+      },
+      rteValue: `<table border="1" style="width:100%; border-collapse: collapse;">
+      <tr>
+        <th>Department</th>
+        <th>Details</th>
+      </tr>
+      <tr>
+        <td>Sales</td>
+        <td>
+          <table border="1" style="width:100%; border-collapse: collapse;">
+            <tr>
+              <th>Employee</th>
+              <th>Target</th>
+            </tr>
+            <tr>
+              <td>John Doe</td>
+              <td>$50,000</td>
+            </tr>
+            <tr>
+              <td>Jane Smith</td>
+              <td>$60,000</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td>Marketing</td>
+        <td>Campaign planning in progress</td>
+      </tr>
+    </table>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table,HtmlEditor, QuickToolbar]
+  }
+}
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.css b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.html b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.js b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.js
new file mode 100644
index 000000000..c84fb9e27
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/index.js
@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<ejs-richtexteditor ref="defaultRTE" :value="rteValue" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>`,
+
+  data() {
+    return {
+      toolbarSettings: {
+          items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+            'LowerCase', 'UpperCase', '|',
+            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+            'Outdent', 'Indent', '|',
+            'CreateLink', 'Image','CreateTable', '|', 'ClearFormat',
+            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+      },
+      rteValue: `<table border="1" style="width:100%; border-collapse: collapse;">
+      <tr>
+        <th>Department</th>
+        <th>Details</th>
+      </tr>
+      <tr>
+        <td>Sales</td>
+        <td>
+          <table border="1" style="width:100%; border-collapse: collapse;">
+            <tr>
+              <th>Employee</th>
+              <th>Target</th>
+            </tr>
+            <tr>
+              <td>John Doe</td>
+              <td>$50,000</td>
+            </tr>
+            <tr>
+              <td>Jane Smith</td>
+              <td>$60,000</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr>
+        <td>Marketing</td>
+        <td>Campaign planning in progress</td>
+      </tr>
+    </table>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar]
+  }
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/nesting-table/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/nesting-table/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/nesting-table/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/node-selection/app-composition.vue
new file mode 100644
index 000000000..a08b83a51
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/app-composition.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <button class="e-btn" style="margin-bottom: 20px" @click="selectSecondParagraph">
+      Select Paragraph
+    </button>
+    <ejs-richtexteditor ref="rteRef" :value="rteValue" height="400">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script setup>
+import {
+  RichTextEditorComponent as EjsRichtexteditor,
+  Toolbar,
+  Link,
+  Image,
+  HtmlEditor,
+  QuickToolbar
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { ref } from 'vue';
+
+const rteRef = ref();
+
+const rteValue = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;
+
+function selectSecondParagraph() {
+  const panel = rteRef.value?.ej2Instances?.contentModule?.getEditPanel();
+  if (!panel) return;
+
+  const paragraphs = panel.querySelectorAll('p');
+  if (paragraphs.length > 1) {
+    const range = document.createRange();
+    range.selectNode(paragraphs[1]);
+
+    const selection = window.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+}
+provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/app.vue b/ej2-vue/code-snippet/rich-text-editor/node-selection/app.vue
new file mode 100644
index 000000000..89ddf53ba
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/app.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <button
+      class="e-btn"
+      style="margin-bottom: 20px"
+      @click="selectSecondParagraph"
+    >
+      Select Paragraph
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  HtmlEditor,
+  QuickToolbar,
+} from '@syncfusion/ej2-vue-richtexteditor';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-richtexteditor': RichTextEditorComponent,
+  },
+
+  data() {
+    return {
+      rteValue: `<p>This is paragraph one.</p><p>This is paragraph two.</p>`,
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
+  },
+  methods: {
+    selectSecondParagraph() {
+      const panel =
+        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
+      const paragraphs = panel.querySelectorAll('p');
+
+      if (paragraphs.length > 1) {
+        const range = document.createRange();
+        range.selectNode(paragraphs[1]); // Select second paragraph
+
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    },
+  },
+};
+</script>
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/index.css b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/index.html b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/index.js b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.js
new file mode 100644
index 000000000..3bf7006fe
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/index.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `<div>
+    <button
+      class="e-btn"
+      style="margin-bottom: 20px"
+      @click="selectSecondParagraph">Select Paragraph</button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>`,
+
+  data() {
+    return {
+      rteValue: `<p>This is paragraph one.</p><p>This is paragraph two.</p>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  },
+  methods: {
+    selectSecondParagraph() {
+      const panel =
+        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
+      const paragraphs = panel.querySelectorAll('p');
+
+      if (paragraphs.length > 1) {
+        const range = document.createRange();
+        range.selectNode(paragraphs[1]); // Select second paragraph
+
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    },
+  },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/node-selection/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/node-selection/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/node-selection/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-dialog/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-dialog/app-composition.vue
index 883fa130b..f5ecd5ec8 100644
--- a/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-dialog/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-dialog/app-composition.vue
@@ -18,17 +18,9 @@
 
 <script setup>
 import { provide, ref } from "vue";
-import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
-import { DialogComponent } from '@syncfusion/ej2-vue-popups';
-import {
-  RichTextEditorComponent,
-  Toolbar,
-  Link,
-  Image,
-  Count,
-  HtmlEditor,
-  QuickToolbar,
-} from '@syncfusion/ej2-vue-richtexteditor';
+import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
+import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
+import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor,QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";
 
 const headerTemplate = 'Dialog Header';
 const footerTemplate= 'Dialog Footer';
diff --git a/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-tab/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-tab/app-composition.vue
index 726854cea..08a4d4c63 100644
--- a/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-tab/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/richtexteditor-inside-tab/app-composition.vue
@@ -25,12 +25,12 @@
 <script setup>
 import { provide, ref } from "vue";
 import {
-  TabComponent,
-  TabItemsDirective,
-  TabItemDirective,
+  TabComponent as EjsTab,
+  TabItemsDirective as ETabitem,
+  TabItemDirective as ETabitems,
 } from '@syncfusion/ej2-vue-navigations';
 import {
-  RichTextEditorComponent,
+  RichTextEditorComponent as EjsRichtexteditor,
   Toolbar,
   Link,
   Image,
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/select-all-content/app-composition.vue
new file mode 100644
index 000000000..2d4f3edc4
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/app-composition.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <button class="e-btn" style="margin-bottom: 20px" @click="selectAllContent">
+      Select All
+    </button>
+
+    <ejs-richtexteditor ref="rteRef" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent as EjsRichtexteditor,
+  Toolbar,
+  Link,
+  Image,
+  HtmlEditor,
+  QuickToolbar
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { ref } from 'vue';
+
+const rteRef = ref();
+
+const rteValue = `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
+<p><b>Key features:</b></p>
+<ul>
+  <li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
+  <li><p>Capable of handling markdown editing.</p></li>
+  <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
+  <li><p>Provides a fully customizable toolbar.</p></li>
+  <li><p>Provides HTML view to edit the source directly for developers.</p></li>
+  <li><p>Supports third-party library integration.</p></li>
+  <li><p>Allows preview of modified content before saving it.</p></li>
+  <li><p>Handles images, hyperlinks, video, uploads, etc.</p></li>
+  <li><p>Contains undo/redo manager.</p></li>
+  <li><p>Creates bulleted and numbered lists.</p></li>
+</ul>`;
+
+function selectAllContent() {
+  rteRef.value?.ej2Instances?.selectAll();
+}
+provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/app.vue b/ej2-vue/code-snippet/rich-text-editor/select-all-content/app.vue
new file mode 100644
index 000000000..e4cab9fff
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/app.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <button class="e-btn" style="margin-bottom: 20px" @click="selectAllContent">
+      Select All
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  Table,
+  HtmlEditor,
+  QuickToolbar,
+} from '@syncfusion/ej2-vue-richtexteditor';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-richtexteditor': RichTextEditorComponent,
+  },
+
+  data() {
+    return {
+      rteValue: `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li><li><p>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>`,
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
+  },
+  methods: {
+    selectAllContent() {
+      this.$refs.defaultRTE.ej2Instances.selectAll();
+    },
+  },
+};
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.css b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.html b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.js b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.js
new file mode 100644
index 000000000..0c42afd75
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/index.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
+
+Vue.use(RichTextEditorPlugin);
+ 
+new Vue({
+	el: '#app',
+	template: `  <div>
+    <button class="e-btn" style="margin-bottom: 20px" @click="selectAllContent">
+      Select All
+    </button>
+    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
+    </ejs-richtexteditor>
+  </div>`,
+
+  data() {
+    return {
+      rteValue: `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li><li><p>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>`,
+    }
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
+  },
+  methods: {
+    selectAllContent() {
+      this.$refs.defaultRTE.ej2Instances.selectAll();
+    },
+  },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/select-all-content/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/select-all-content/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/select-all-content/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/selection/app-composition.vue
new file mode 100644
index 000000000..e8eecca0e
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/app-composition.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="control-section">
+    <div class="sample-container">
+      <ejs-slider
+        id="range"
+        :type="'Range'"
+        :value="sliderValue"
+        :min="0"
+        :max="maxLength"
+        @change="onSliderChange"
+      />
+      <ejs-richtexteditor
+        ref="rteObj"
+        id="editor"
+        :value="rteValue"
+        :height="400"
+      >
+        <ejs-richtexteditor-inject
+          :services="[Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]"
+        />
+      </ejs-richtexteditor>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  RichTextEditorComponent as EjsRichtexteditor,
+  Toolbar,
+  Link,
+  Image,
+  HtmlEditor,
+  QuickToolbar,
+  Table,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { SliderComponent as EjsSlider } from '@syncfusion/ej2-vue-inputs';
+import { ref, onMounted, provide } from 'vue';
+
+provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]);
+
+const rteObj = ref(null);
+const sliderValue = ref([0, 50]);
+const maxLength = ref(400);
+
+const rteValue = `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager.</p>`;
+
+function onSliderChange(args) {
+  const [start, end] = args.value;
+  const panel = rteObj.value?.ej2Instances?.contentModule?.getEditPanel();
+  const textNode = panel?.firstChild?.firstChild;
+  if (!textNode || !(textNode instanceof Text)) return;
+
+  const safeStart = Math.min(start, textNode.length);
+  const safeEnd = Math.min(end, textNode.length);
+
+  const range = document.createRange();
+  range.setStart(textNode, safeStart);
+  range.setEnd(textNode, safeEnd);
+
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+onMounted(() => {
+  const rteInstance = rteObj.value?.ej2Instances;
+  if (!rteInstance) return;
+
+  rteInstance.addEventListener('created', () => {
+    const panel = rteInstance.contentModule?.getEditPanel();
+    const textNode = panel?.firstChild?.firstChild;
+    if (textNode && textNode.textContent) {
+      maxLength.value = textNode.textContent.length;
+    }
+  });
+});
+</script>
+
+<style>
+@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
+</style>
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/app.vue b/ej2-vue/code-snippet/rich-text-editor/selection/app.vue
new file mode 100644
index 000000000..53c301255
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/app.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="control-section">
+    <div class="sample-container">
+      <label class="labeltext">Range Slider</label>
+      <ejs-slider
+        id="range"
+        :type="'Range'"
+        :value="sliderValue"
+        :min="0"
+        :max="maxLength"
+        @change="onSliderChange"
+      />
+      <ejs-richtexteditor
+        ref="rteObj"
+        id="editor"
+        :value="rteValue"
+        :height="400"
+        @created="onEditorCreated"
+      >
+      </ejs-richtexteditor>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  RichTextEditorComponent,
+  Toolbar,
+  Link,
+  Image,
+  HtmlEditor,
+  QuickToolbar,
+  Table,
+} from '@syncfusion/ej2-vue-richtexteditor';
+import { SliderComponent } from '@syncfusion/ej2-vue-inputs';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-richtexteditor': RichTextEditorComponent,
+    'ejs-slider': SliderComponent,
+  },
+  data() {
+    return {
+      rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG ("what you see is what you get") editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`,
+      sliderValue: [0, 50],
+      maxLength: 400,
+    };
+  },
+  provide: {
+    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]
+  },
+  methods: {
+    onEditorCreated() {
+      const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+      const realLength = panel?.textContent?.length ?? 0;
+      this.maxLength = realLength;
+      panel.focus();
+      // Initial selection based on sliderValue
+      this.onSliderChange({ value: this.sliderValue });
+    },
+
+    getTextNodeAtOffset(root, offset) {
+      let currentOffset = 0;
+      const walker = document.createTreeWalker(
+        root,
+        NodeFilter.SHOW_TEXT,
+        null
+      );
+
+      while (walker.nextNode()) {
+        const node = walker.currentNode;
+        const nodeLength = node.textContent.length;
+
+        if (currentOffset + nodeLength >= offset) {
+          return {
+            node,
+            offset: offset - currentOffset,
+          };
+        }
+
+        currentOffset += nodeLength;
+      }
+
+      return null;
+    },
+    onSliderChange(args) {
+      const [start, end] = args.value;
+      const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+      const maxLen = panel?.textContent?.length ?? 0;
+
+      const safeStart = Math.min(start, maxLen);
+      const safeEnd = Math.min(end, maxLen);
+
+      const startInfo = this.getTextNodeAtOffset(panel, safeStart);
+      const endInfo = this.getTextNodeAtOffset(panel, safeEnd);
+
+      if (startInfo && endInfo) {
+        const range = document.createRange();
+        range.setStart(startInfo.node, startInfo.offset);
+        range.setEnd(endInfo.node, endInfo.offset);
+
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+
+      this.sliderValue = [safeStart, safeEnd];
+    },
+  },
+};
+</script>
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/index.css b/ej2-vue/code-snippet/rich-text-editor/selection/index.css
new file mode 100644
index 000000000..e3c0074c9
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/index.css
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/index.html b/ej2-vue/code-snippet/rich-text-editor/selection/index.html
new file mode 100644
index 000000000..303d777bf
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/index.js b/ej2-vue/code-snippet/rich-text-editor/selection/index.js
new file mode 100644
index 000000000..c241e3bee
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/index.js
@@ -0,0 +1,101 @@
+import Vue from "vue";
+import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, CodeBlock } from "@syncfusion/ej2-vue-richtexteditor";
+import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
+Vue.use(RichTextEditorPlugin);
+Vue.use(RichTextEditorPlugin);
+
+new Vue({
+	el: '#app',
+	template: `<div class="control-section">
+    <div class="sample-container">
+      <label class="labeltext">Range Slider</label>
+      <ejs-slider
+        id="range"
+        :type="'Range'"
+        :value="sliderValue"
+        :min="0"
+        :max="maxLength"
+        @change="onSliderChange"
+      />
+      <ejs-richtexteditor
+        ref="rteObj"
+        id="editor"
+        :value="rteValue"
+        :height="400"
+        @created="onEditorCreated"
+      >
+      </ejs-richtexteditor>
+    </div>
+  </div>`,
+
+    data: function() {
+        return {
+            rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG ("what you see is what you get") editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`,
+            sliderValue: [0, 50],
+            maxLength: 400,
+        };
+    },
+    provide:{
+        richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]
+    },
+    methods: {
+        onEditorCreated() {
+            const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+            const realLength = panel?.textContent?.length ?? 0;
+            this.maxLength = realLength;
+            panel.focus();
+            // Initial selection based on sliderValue
+            this.onSliderChange({ value: this.sliderValue });
+        },
+
+        getTextNodeAtOffset(root, offset) {
+            let currentOffset = 0;
+            const walker = document.createTreeWalker(
+                root,
+                NodeFilter.SHOW_TEXT,
+                null
+            );
+
+            while (walker.nextNode()) {
+                const node = walker.currentNode;
+                const nodeLength = node.textContent.length;
+
+                if (currentOffset + nodeLength >= offset) {
+                return {
+                    node,
+                    offset: offset - currentOffset,
+                };
+                }
+
+                currentOffset += nodeLength;
+            }
+
+            null;
+        },
+        onSliderChange(args) {
+            const [start, end] = args.value;
+            const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
+            const maxLen = panel?.textContent?.length ?? 0;
+
+            const safeStart = Math.min(start, maxLen);
+            const safeEnd = Math.min(end, maxLen);
+
+            const startInfo = this.getTextNodeAtOffset(panel, safeStart);
+            const endInfo = this.getTextNodeAtOffset(panel, safeEnd);
+
+            if (startInfo && endInfo) {
+                const range = document.createRange();
+                range.setStart(startInfo.node, startInfo.offset);
+                range.setEnd(endInfo.node, endInfo.offset);
+
+                const selection = window.getSelection();
+                if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+                }
+            }
+
+            this.sliderValue = [safeStart, safeEnd];
+        },
+    },
+});
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/selection/systemjs.config.js
new file mode 100644
index 000000000..7f1950c45
--- /dev/null
+++ b/ej2-vue/code-snippet/rich-text-editor/selection/systemjs.config.js
@@ -0,0 +1,50 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+            "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+            "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+            "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+            "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+            "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+            "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+            "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+            "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+            "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+            "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+            "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+            "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+            "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+            "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+            "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+            "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+            "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+            "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+            "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+            "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js",
+            "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+            "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+            "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+            "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+            "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js",
+            "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+            "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js",
+            "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app-composition.vue
index 905b7b3bb..326c04379 100644
--- a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app-composition.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app-composition.vue
@@ -34,15 +34,35 @@ items: [
         iconCss: 'e-icons e-signature',
         type: 'Custom',
         command: 'Signature'
+        },
+        {
+            text: 'HorizontalLine',
+            description: 'Insert a horizontal line',
+            iconCss: 'e-icons e-horizontal-line',
+            type: 'Custom',
+            command: 'HorizontalLine',
+        },
+        {
+            text: 'CheckList',
+            description: 'Insert a check list',
+            iconCss: 'e-icons e-checklist',
+            type: 'Custom',
+            command: 'CheckList',
         }
     ]
 };
 const onSlashMenuItemSelect = (args) => {
     if (args.itemData.command === 'MeetingNotes') {
-                smartEditor.value.ej2Instances.executeCommand('insertHTML', meetingNotes, { undo: true });
+        smartEditor.value.ej2Instances.executeCommand('insertHTML', meetingNotes, { undo: true });
     }
     if (args.itemData.command === 'Signature') {
-                smartEditor.value.ej2Instances.executeCommand('insertHTML', signature, { undo: true });
+        smartEditor.value.ej2Instances.executeCommand('insertHTML', signature, { undo: true });
+    }
+    if (args.itemData.command === 'HorizontalLine') {
+        smartEditor.value.ej2Instances.executeCommand('insertHTML', '<hr>');
+    }
+    if (args.itemData.command === 'CheckList') {
+        smartEditor.value.ej2Instances.executeCommand('insertHTML',`<ul class="e-rte-checklist"><li> Task 1</li><li> Task 2</li></ul>`);
     }
 };
 provide('richtexteditor', [SlashMenu, Toolbar, Link, Image, Audio, Table, Video, QuickToolbar, HtmlEditor, EmojiPicker, PasteCleanup, FormatPainter]);
diff --git a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app.vue b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app.vue
index 9c141ed60..fe998a19b 100644
--- a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app.vue
+++ b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/app.vue
@@ -39,6 +39,20 @@ export default {
                         iconCss: 'e-icons e-signature',
                         type: 'Custom',
                         command: 'Signature'
+                    },
+                    {
+                        text: 'HorizontalLine',
+                        description: 'Insert a horizontal line',
+                        iconCss: 'e-icons e-horizontal-line',
+                        type: 'Custom',
+                        command: 'HorizontalLine',
+                    },
+                    {
+                        text: 'CheckList',
+                        description: 'Insert a check list',
+                        iconCss: 'e-icons e-checklist',
+                        type: 'Custom',
+                        command: 'CheckList',
                     }
                 ]
             }
@@ -55,6 +69,12 @@ export default {
             if (args.itemData.command === 'Signature') {
                 this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML', this.signature, { undo: true });
             }
+            if (args.itemData.command === 'HorizontalLine') {
+                this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML', '<hr>');
+            }
+            if (args.itemData.command === 'CheckList') {
+                this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML',`<ul class="e-rte-checklist"><li> Task 1</li><li> Task 2</li></ul>`);
+            }
         }
     }
 }
diff --git a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/index.js b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/index.js
index 3b7fb1c8c..ffe48cdd7 100644
--- a/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/index.js
+++ b/ej2-vue/code-snippet/rich-text-editor/slash-menu-cs1/index.js
@@ -48,6 +48,20 @@ new Vue({
             iconCss: 'e-icons e-signature',
             type: 'Custom',
             command: 'Signature'
+          },
+          {
+              text: 'HorizontalLine',
+              description: 'Insert a horizontal line',
+              iconCss: 'e-icons e-horizontal-line',
+              type: 'Custom',
+              command: 'HorizontalLine',
+          },
+          {
+              text: 'CheckList',
+              description: 'Insert a check list',
+              iconCss: 'e-icons e-checklist',
+              type: 'Custom',
+              command: 'CheckList',
           }
         ]
       }
@@ -65,6 +79,12 @@ new Vue({
         if (args.itemData.command === 'Signature') {
             this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML', this.signature, { undo: true });
         }
+        if (args.itemData.command === 'HorizontalLine') {
+            this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML', '<hr>');
+        }
+        if (args.itemData.command === 'CheckList') {
+            this.$refs.smartEditor.ej2Instances.executeCommand('insertHTML',`<ul class="e-rte-checklist"><li> Task 1</li><li> Task 2</li></ul>`);
+        }
     }
   }
 
diff --git a/ej2-vue/diagram/getting-started.md b/ej2-vue/diagram/getting-started.md
index bb048e6e1..aef95180c 100644
--- a/ej2-vue/diagram/getting-started.md
+++ b/ej2-vue/diagram/getting-started.md
@@ -12,6 +12,8 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion® Vue Diagram component
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 ## Prerequisites
 
 [System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
diff --git a/ej2-vue/dialog/vue3-getting-started.md b/ej2-vue/dialog/vue3-getting-started.md
index e53b0969d..e6709345a 100644
--- a/ej2-vue/dialog/vue3-getting-started.md
+++ b/ej2-vue/dialog/vue3-getting-started.md
@@ -18,7 +18,7 @@ The `Options API` is the traditional way of writing Vue.js components, where the
 
 ## Prerequisites
 
-[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)
+[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
 
 ## Set up the Vite project
 
@@ -99,7 +99,7 @@ yarn add @syncfusion/ej2-vue-popups
 
 ## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
 
-You can import themes for the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project.
+You can import themes for the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.
 
 In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Dialog component and its dependents were imported into the `<style>` section of **src/App.vue** file.
 
@@ -147,7 +147,7 @@ components: {
 {% endhighlight %}
 {% endtabs %}
    
-2.In the `template` section, define the Dialog component with the [dataSource](https://ej2.syncfusion.com/vue/documentation/api/dialog#datasource) property and column definitions.
+2.In the `template` section, define the Dialog component with the [dataSource](https://ej2.syncfusion.com/vue/documentation/api/dialog/index-default/) property and column definitions.
 
 {% tabs %}
 {% highlight html tabtitle="~/src/App.vue" %}
@@ -244,8 +244,12 @@ or
 yarn run dev
 ```
 
-The output will appear as follows:
-
-![Output](./images/vue3-dialog.png)
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/dialog/getting-started-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/dialog/getting-started-cs2" %}
 
-> You can refer to our [Vue dialog](https://www.syncfusion.com/vue-components/vue-modal-dialog) feature tour page for its groundbreaking feature representations. You can also explore our [Vue dialog example](https://ej2.syncfusion.com/vue/documentation/dialog/getting-started/) that shows you how to render the dialog in Vue.
\ No newline at end of file
+> You can refer to our [Vue dialog](https://www.syncfusion.com/vue-components/vue-modal-dialog) feature tour page for its groundbreaking feature representations. You can also explore our [Vue dialog example](https://ej2.syncfusion.com/vue/documentation/dialog/getting-started) that shows you how to render the dialog in Vue.
\ No newline at end of file
diff --git a/ej2-vue/file-manager/add-style-and-appearance-for-file-manager-component.md b/ej2-vue/file-manager/add-style-and-appearance-for-file-manager-component.md
new file mode 100644
index 000000000..0404a829d
--- /dev/null
+++ b/ej2-vue/file-manager/add-style-and-appearance-for-file-manager-component.md
@@ -0,0 +1,206 @@
+---
+layout: post
+title: Style Customize in Vue File Manager control | Syncfusion
+description: Learn here all about How to add style and appearance in Vue File Manager control of Syncfusion Essential JS 2 and more.
+platform:  ej2-vue
+control: File Manager
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# How to customize style and appearance in Vue File Manager
+
+The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+
+## Customizing the File Manager navigation pane
+
+To customize the File Manager navigation pane, use the `.e-navigation` selector and apply styles.
+
+The following example shows customize the navigation pane for these sections.
+
+```css
+.sample-container {
+    margin: 10px 10px 10px 10px;
+}
+
+/*
+ Set background color for the File Manager navigation pane */
+.e-filemanager .e-navigation {
+    background: #3a0647;
+}
+
+/* Highlight the active item in the TreeView inside the navigation pane */
+.e-filemanager .e-treeview .e-list-item.e-active > .e-fullrow {
+    background: #c3d3f9a1;
+}
+
+/* Set text color for TreeView items in the navigation pane */
+.e-filemanager .e-treeview .e-list-text {
+    color: #fff;
+}
+```
+
+![Vue File Manager Customization Navigation Pane](./images/customize_navigation_pane.png)
+
+## Customizing the File Manager layout
+
+To customize the File Manager layout, use the `.e-layout-content` selector and apply styles. 
+
+```css
+
+.sample-container {
+    margin: 10px 10px 10px 10px;
+}
+
+/* Style for breadcrumb (address bar) */
+.e-filemanager .e-layout-content .e-address {
+  background: #dee2e6;
+}
+
+/* Customize the background for the Large Icons view */
+.e-filemanager .e-layout-content .e-large-icons {
+  background: #f8f9fa;
+}
+
+/* Customize the background for the Details view table and content area */
+.e-filemanager .e-layout-content .e-grid .e-table,
+.e-filemanager .e-grid .e-gridcontent .e-content {
+  background: #f8f9fa;
+}
+
+```
+
+![Vue File Manager Customization Layout](./images/customize_layout.png)
+
+## Customizing the File Manager thumbnail
+
+To customize the thumbnails in the File Manager, you can apply background-image styles to specific CSS selectors that represent different file types, as listed in the table below.
+
+|File Type|CSS Selector|
+|----|----|
+|Image|.e-fe-image|
+|Music|.e-fe-music|
+|Excel|.e-fe-xlsx|
+|Video|.e-fe-video|
+|PowerPoint|.e-fe-pptx|
+|RAR|.e-fe-rar|
+|ZIP|.e-fe-zip|
+|Text|.e-fe-txt|
+|JavaScript|.e-fe-js|
+|CSS|.e-fe-css|
+|HTML|.e-fe-html|
+|Unknown|.e-fe-unknown|
+|Executable|.e-fe-exe|
+|MSI|.e-fe-msi|
+|PHP|.e-fe-php|
+|Word|.e-fe-doc|
+|Word(docx)|.e-fe-docx|
+|XML|.e-fe-xml|
+|Folder|.e-fe-folder|
+
+The following example demonstrates how to customize the File Manager's thumbnail icon for folders:
+
+```css
+
+/* Applies to both Large Icons view and Details view in the File Manager */
+
+.e-filemanager .e-large-icons .e-fe-folder, .e-filemanager .e-grid .e-fe-folder {
+    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yOS41LDI3LjVoLTI3Yy0xLjEsMC0yLTAuOS0yLTJ2LTE5YzAtMS4xLDAuOS0yLDItMmgxMC40bDMuNSwzLjFoMTMuMmMxLjEsMCwyLDAuOSwyLDJ2MTUuOUMzMS41LDI2LjYsMzAuNiwyNy41LDI5LjUsMjcuNXoiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMjkuNSwyOGgtMjdDMS4xLDI4LDAsMjYuOSwwLDI1LjV2LTE5QzAsNS4xLDEuMSw0LDIuNSw0aDEwLjZsMy41LDMuMWgxM2MxLjQsMCwyLjUsMS4xLDIuNSwyLjV2MTUuOUMzMiwyNi45LDMwLjksMjgsMjkuNSwyOHogTTIuNSw1QzEuNyw1LDEsNS43LDEsNi41djE5QzEsMjYuMywxLjcsMjcsMi41LDI3aDI3YzAuOCwwLDEuNS0wLjcsMS41LTEuNVY5LjZjMC0wLjgtMC43LTEuNS0xLjUtMS41SDE2LjJMMTIuNyw1SDIuNXoiLz48L2c+PC9zdmc+");
+}
+
+```
+
+![Vue File Manager Customization Thumbnail](./images/customize_thumbnail.png)
+
+## Customizing the File Manager Toolbar
+
+To customize the File Manager toolbar items, use the `.e-toolbar` selector and apply styles.
+
+```css
+
+.sample-container {
+    margin: 10px 10px 10px 10px;
+}
+
+/* Style for individual toolbar buttons */
+.e-filemanager .e-toolbar .e-tbar-btn {
+  background: #0d9cf6;
+  border: 1px solid #000000;
+}
+
+/* Style for toolbar icons */
+.e-filemanager .e-toolbar .e-tbar-btn .e-icons {
+  color: #ffffff;
+}
+
+/* Style for toolbar button text */
+.e-filemanager .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
+  color: #ffffff;
+}
+
+```
+
+![Vue File Manager Customization Toolbar](./images/customize_toolbar.png)
+
+## Customizing the File Manager selected files/folders
+
+To customize the File Manager selected files/folders, use the below selectors and apply styles.
+
+```css
+
+.sample-container {
+    margin: 10px 10px 10px 10px;
+}
+
+/* Highlight for active and hover item in Large Icons view */
+.e-filemanager li.e-list-item.e-large-icon.e-active,
+.e-filemanager li.e-list-item.e-large-icon.e-active:hover {
+    background: #dee2e6;
+    border: 2px solid #000000;
+    border-radius: 10%;
+}
+
+/* Color for text */
+.e-filemanager .e-large-icons .e-active {
+    color: #212529;
+}
+
+/* Highlight for active row in Details view */
+.e-filemanager .e-grid td.e-active {
+    background: #dee2e6;
+}
+
+```
+
+![Vue File Manager Customization Selected File](./images/customize_selected_file.png)
+
+## Customizing the File Manager Dialog
+
+To customize the dialog popup in the File Manager, you can apply styles to specific CSS selectors, as listed below.
+
+|Element|CSS Selector|
+|---------|------------|
+|Header|`.e-dlg-header-content`|
+|Content|`.e-dlg-content`|
+|Overlay|`.e-dlg-overlay`|
+|Footer|`.e-footer-content`|
+
+```css
+
+.sample-container {
+    margin: 10px 10px 10px 10px;
+}
+
+/* For File Manager Dialog header */
+.e-filemanager .e-dialog .e-dlg-header-content {
+  background-color: #0d6efd;
+}
+/* For File Manager Dialog header close icon and text*/
+.e-filemanager .e-dialog .e-icon-dlg-close,
+.e-filemanager .e-dialog .e-dlg-header {
+  color: #fff;
+}
+
+
+```
+![Vue File Manager Customization dialog](./images/customize_dialog.png)
\ No newline at end of file
diff --git a/ej2-vue/file-manager/images/customize_dialog.png b/ej2-vue/file-manager/images/customize_dialog.png
new file mode 100644
index 000000000..fe94635f2
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_dialog.png differ
diff --git a/ej2-vue/file-manager/images/customize_layout.png b/ej2-vue/file-manager/images/customize_layout.png
new file mode 100644
index 000000000..cd1bced21
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_layout.png differ
diff --git a/ej2-vue/file-manager/images/customize_navigation_pane.png b/ej2-vue/file-manager/images/customize_navigation_pane.png
new file mode 100644
index 000000000..4e83fb682
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_navigation_pane.png differ
diff --git a/ej2-vue/file-manager/images/customize_selected_file.png b/ej2-vue/file-manager/images/customize_selected_file.png
new file mode 100644
index 000000000..2e575f90e
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_selected_file.png differ
diff --git a/ej2-vue/file-manager/images/customize_thumbnail.png b/ej2-vue/file-manager/images/customize_thumbnail.png
new file mode 100644
index 000000000..57d88d27b
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_thumbnail.png differ
diff --git a/ej2-vue/file-manager/images/customize_toolbar.png b/ej2-vue/file-manager/images/customize_toolbar.png
new file mode 100644
index 000000000..0bc72a0bd
Binary files /dev/null and b/ej2-vue/file-manager/images/customize_toolbar.png differ
diff --git a/ej2-vue/gantt/getting-started.md b/ej2-vue/gantt/getting-started.md
index ec9206de0..122b117ff 100644
--- a/ej2-vue/gantt/getting-started.md
+++ b/ej2-vue/gantt/getting-started.md
@@ -12,6 +12,8 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Gantt component
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 To get start quickly with Vue Gantt Chart, you can check on this video:
 {% youtube "https://www.youtube.com/watch?v=S1GbWmVcre0" %}
 
@@ -62,7 +64,7 @@ yarn run serve
 
 When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
 
-![Vue 2 project](../appearance/images/vue2-terminal.png)
+![Vue 2 project](./images/vue2-terminal.png)
 
 Once the `quickstart` project is set up with default settings, proceed to add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
 
diff --git a/ej2-vue/gantt/images/vue2-terminal.png b/ej2-vue/gantt/images/vue2-terminal.png
new file mode 100644
index 000000000..39beefaa2
Binary files /dev/null and b/ej2-vue/gantt/images/vue2-terminal.png differ
diff --git a/ej2-vue/grid/filtering/filter-bar.md b/ej2-vue/grid/filtering/filter-bar.md
index 8e1042a8e..67ed30954 100644
--- a/ej2-vue/grid/filtering/filter-bar.md
+++ b/ej2-vue/grid/filtering/filter-bar.md
@@ -44,7 +44,7 @@ The following example demonstrates how to activate default filtering in the grid
         
 {% previewsample "page.domainurl/code-snippet/grid/filter/filter-bar-cs1" %}
 
-> To enable or dynamically switch the filter type, you must set the [filterSettings.type](https://ej2.syncfusion.com/vue/documentation/api/grid/filtersettings/#type) as **FilterBar**.
+> If the [filterSettings.type](https://ej2.syncfusion.com/vue/documentation/api/grid/filtersettings/#type) is not explicitly specified, it defaults to **FilterBar**.
 
 ## Filter bar modes
 
diff --git a/ej2-vue/grid/module.md b/ej2-vue/grid/module.md
index c84d96a05..14d5a1ff1 100644
--- a/ej2-vue/grid/module.md
+++ b/ej2-vue/grid/module.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Module in Vue Grid component | Syncfusion
-description: Learn here all about Module in Syncfusion Vue Grid component of Syncfusion Essential JS 2 and more.
+description: Learn here all about Modules in Syncfusion Vue Grid component of Syncfusion Essential JS 2, how they extend grid features and more.
 control: Module 
 platform: ej2-vue
 documentation: ug
@@ -20,7 +20,7 @@ The available grid modules are
 | [`Sort`](https://ej2.syncfusion.com/vue/documentation/api/grid/sort/)| Inject this module to use sorting feature.|
 | [`Filter`](https://ej2.syncfusion.com/vue/documentation/api/grid/filter/)| Inject this module to use filtering feature.|
 | [`Group`](https://ej2.syncfusion.com/vue/documentation/api/grid/group/)| Inject this module to use grouping feature|
-| [`Edit`](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/)| Inject this module is use editing feature.|
+| [`Edit`](https://ej2.syncfusion.com/vue/documentation/api/grid/edit/)| Inject this module to use editing feature.|
 | `Aggregate`| Inject this module to use aggregate feature.|
 | [`ColumnChooser`](https://ej2.syncfusion.com/vue/documentation/api/grid/columnChooser/)| Inject this module to use column chooser feature.|
 | `ColumnMenu`| Inject this module to use column menu feature.|
diff --git a/ej2-vue/introduction.md b/ej2-vue/introduction.md
index 28cf627d3..b6c3d1319 100644
--- a/ej2-vue/introduction.md
+++ b/ej2-vue/introduction.md
@@ -12,6 +12,8 @@ domainurl: ##DomainURL##
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> Vue is a modern UI Components library that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also includes complete support for Angular, React, ASP.NET MVC and ASP.NET Core frameworks.
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 ## Components list
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components are listed below.
diff --git a/ej2-vue/pivotview/getting-started.md b/ej2-vue/pivotview/getting-started.md
index fa2d0df2b..92317ebb0 100644
--- a/ej2-vue/pivotview/getting-started.md
+++ b/ej2-vue/pivotview/getting-started.md
@@ -12,13 +12,15 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Pivotview component
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 To quickly get started with Vue Pivot Table, you can refer to this video:
 
 {% youtube "https://www.youtube.com/watch?v=P06XgGUwUFc" %}
 
 ## Prerequisites
 
-[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)
+[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
 
 ## Dependencies
 
diff --git a/ej2-vue/rich-text-editor/editor-types/editor-modes.md b/ej2-vue/rich-text-editor/editor-types/editor-modes.md
index 015a6557c..55354c353 100644
--- a/ej2-vue/rich-text-editor/editor-types/editor-modes.md
+++ b/ej2-vue/rich-text-editor/editor-types/editor-modes.md
@@ -17,7 +17,7 @@ The Rich Text Editor component used to create, edit and return the content in va
 
 ## HTML editor
 
-Rich Text Editor is a WYSIWYG editing control for formatting the word content as HTML.
+Rich Text Editor is a WYSIWYG editing component for formatting the word content as HTML.
 
 The HTML editing mode is the default mode of Rich Text Editor. Which is used for format the content through the available toolbar items and returns the valid HTML markup. Set the [editorMode](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#editormode) property as `HTML`.
 
diff --git a/ej2-vue/rich-text-editor/getting-started.md b/ej2-vue/rich-text-editor/getting-started.md
index f4d030ed1..d1e61e879 100644
--- a/ej2-vue/rich-text-editor/getting-started.md
+++ b/ej2-vue/rich-text-editor/getting-started.md
@@ -12,6 +12,8 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion Vue Rich text editor component
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 ## Prerequisites
 
 [System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
diff --git a/ej2-vue/rich-text-editor/images/list-editing.gif b/ej2-vue/rich-text-editor/images/list-editing.gif
new file mode 100644
index 000000000..1da2664ff
Binary files /dev/null and b/ej2-vue/rich-text-editor/images/list-editing.gif differ
diff --git a/ej2-vue/rich-text-editor/selection.md b/ej2-vue/rich-text-editor/selection.md
new file mode 100644
index 000000000..90958d1fd
--- /dev/null
+++ b/ej2-vue/rich-text-editor/selection.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title:  Selection in Vue Rich Text Editor component | Syncfusion
+description: Learn how to select a character range using Vue Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Text Selection
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Selection in Vue Rich Text Editor Component
+
+## Text selection
+
+The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** component. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted.
+
+This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/selection/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/selection/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/selection" %}
+
+## Node selection
+
+Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection.
+
+The following example demonstrates how to select a paragraph node programmatically using the browser's native `Range` and `Selection` APIs.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/node-selection/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/node-selection/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/node-selection" %}
+
+## Cell selection
+
+Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction.
+
+The following example demonstrates how to select a table cell programmatically using the browser's native `Range` and `Selection` APIs.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/cell-selection/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/cell-selection/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/cell-selection" %}
+
+## Select all content
+
+To select all content within the Rich Text Editor, use the [selectAll](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#selectall/) method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/select-all-content/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/select-all-content/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/select-all-content" %}
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/smart-editing/mail-merge.md b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md
new file mode 100644
index 000000000..25c7288f2
--- /dev/null
+++ b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md
@@ -0,0 +1,24 @@
+---
+layout: post
+title: Mail Merge in Vue Rich Text Editor | Syncfusion
+description: Learn how to use and customize the Mail Merge in the Syncfusion Vue Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Mail Merge
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Mail merge in Vue Rich Text Editor Component
+
+The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports.
+
+This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mail-merge/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mail-merge/app.vue %}
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/smart-editing/mentions.md b/ej2-vue/rich-text-editor/smart-editing/mentions.md
index 6d4f0afa1..58e4842d8 100644
--- a/ej2-vue/rich-text-editor/smart-editing/mentions.md
+++ b/ej2-vue/rich-text-editor/smart-editing/mentions.md
@@ -10,20 +10,90 @@ domainurl: ##DomainURL##
 
 # Mentions in the Vue Rich Text Editor Component
 
-By integrating the [Mention](https://ej2.syncfusion.com/vue/documentation/mention/getting-started/) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy.
+By integrating the [Mention](https://ej2.syncfusion.com/vue/documentation/mention/getting-started) component with a Rich Text Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving efficiency and accuracy.
+
+## Setup and configuration
 
 Use the [target](https://ej2.syncfusion.com/vue/documentation/api/mention/#target) property of the Mention component to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.
 
+## Using mentions
+
 When the user types the `@` symbol followed by a character, the Rich Text Editor displays a list of suggestions. Users can then select an item from the list by:
 
 * Clicking on it
 * Typing the name of the item they want to tag
 
-In the following sample, we configured the following properties with popup dimensions.
+## Customizing suggestion list 
+
+### Minimum input length for Mention suggestions
+
+You can control when the suggestion list appears by setting the [minLength](https://ej2.syncfusion.com/vue/documentation/api/mention/#minlength) property in the Mention component. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance.
+
+By default, `minLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters.
+
+In the following example, the `minLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mention-min-length/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mention-min-length/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/mention-min-length" %}
+
+### Customizing suggestion list count
+
+You can control the number of items displayed in the Mention suggestion list using the [suggestionCount](https://ej2.syncfusion.com/vue/documentation/api/mention/#suggestioncount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user.
+
+By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs.
+
+In the example below, the `suggestionCount` is set to 5, so only 5 items will be displayed in the suggestion list when the user types the mention character (@)
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mention-suggestion-list/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/mention-suggestion-list/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/mention-suggestion-list" %}
+
+### Customizing suggestion list using templates
+
+#### Item template
+
+You can customize how each item appears in the suggestion list using the [itemTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#itemtemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name.
+
+#### Display template 
 
+Use the [displayTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#displaytemplate) property to define how the selected mention appears in the editor content.
+
+For example, by default, the mention chip renders as:
+
+```
+<span contenteditable="false" class="e-mention-chip">@Selma Rose</span>
+
+```
+Using the `displayTemplate` property, you can customize it to render as a clickable link:
+
+```
+<a href="mailto:selma@gmail.com" title="selma@gmail.com">@Selma Rose</a>
+
+```
+
+This allows you to create more interactive and informative mentions within the editor.
+
+In the following sample, we configured the following properties:
+
+* [itemTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#itemtemplate) - Used to display the customized appearance in suggestion list.
+* [displayTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#displaytemplate) - Used to customize how the selected value appears in the editor content.
 * [allowSpaces](https://ej2.syncfusion.com/vue/documentation/api/mention/#allowspaces) - Allow to continue search action if user enter space after mention character while searching.
 * [suggestionCount](https://ej2.syncfusion.com/vue/documentation/api/mention/#suggestioncount) - The maximum number of items that will be displayed in the suggestion list.
-* [itemTemplate](https://ej2.syncfusion.com/vue/documentation/api/mention/#itemtemplate) - Used to display the customized appearance in suggestion list.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
diff --git a/ej2-vue/rich-text-editor/style.md b/ej2-vue/rich-text-editor/style.md
index dca811c78..620c71f5a 100644
--- a/ej2-vue/rich-text-editor/style.md
+++ b/ej2-vue/rich-text-editor/style.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
 
 The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
 
-## Customizing placeholder text
+## Styling the placeholder text
 
 Use the following CSS to customize the default color in the Rich Text Editor's placeholder.
 
@@ -25,7 +25,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's p
 
 ```
 
-## Customizing editor content
+## Styling the editor content area
 
 Use the following CSS to customize the default Rich Text Editor's content properties like font-family, font-size and color.
 
@@ -45,7 +45,7 @@ Use the following CSS to customize the default Rich Text Editor's content proper
 }
 ```
 
-## Customizing editor toolbar
+## Customizing the toolbar appearance
 
 Use the following CSS to customize the default color in the Rich Text Editor's toolbar icon.
 
@@ -75,7 +75,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's t
 }
 ```
 
-## Customizing character count display
+## Styling the character count display
 
 Use the following CSS to customize the default color in the Rich Text Editor's character count.
 
@@ -91,7 +91,7 @@ Use the following CSS to customize the default color in the Rich Text Editor's c
 }
 ```
 
-## Customizing border color
+## Modifying the editor container border
 
 Use the following CSS to customize the border color in the Rich Text Editor's container.
 
@@ -104,7 +104,7 @@ Use the following CSS to customize the border color in the Rich Text Editor's co
 
 ```
 
-## Highlight the specific lines
+## Highlighting specific text programmatically
 
 Programmatically highlight a portion of the text in the editor by setting the background color. This can be achieved by applying a background style to the selected text using the Rich Text Editor's `executeCommand` method.
 
diff --git a/ej2-vue/rich-text-editor/table.md b/ej2-vue/rich-text-editor/table.md
index b9b8a0555..692bce0da 100644
--- a/ej2-vue/rich-text-editor/table.md
+++ b/ej2-vue/rich-text-editor/table.md
@@ -53,6 +53,28 @@ You can insert `Rows` above or below the selected table cell using the quick too
 
 ![Rich Text Editor table column](images/table_column.png)
 
+## Table column resizing
+
+The Rich Text Editor supports resizing of table columns, allowing users to adjust the size of individual columns to better fit their content. To resize a column, hover the pointer near the edge of a table cell until the resize cursor appears. Then, click and drag the cell border to modify the column size as needed.
+
+This feature provides flexibility in organizing tabular data and ensures that tables remain clear, structured, and easy to read, especially when working with varying content lengths or complex layouts.
+
+## Nesting tables
+
+The Rich Text Editor allows users to insert tables within other table cells, enabling the creation of nested tables. This feature is useful for building complex layouts such as structured forms, hierarchical data views, or detailed reports. Users can manually insert a nested table by placing the cursor inside a cell and using the table toolbar option or HTML source editing.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/nesting-table/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/nesting-table/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/nesting-table" %}
+
+
 ## Quick insert for table rows and columns
 
 The Rich Text Editor offers a simple and intuitive way to add rows and columns to your tables without interrupting your workflow. You can expand tables directly from the interface, no need to use toolbar buttons.
diff --git a/ej2-vue/rich-text-editor/tools/fullscreen-tool.md b/ej2-vue/rich-text-editor/tools/fullscreen-tool.md
new file mode 100644
index 000000000..88d4b4a60
--- /dev/null
+++ b/ej2-vue/rich-text-editor/tools/fullscreen-tool.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Fullscreen mode in Vue Rich Text Editor component | Syncfusion
+description: Learn here all about Fullscreen mode in Syncfusion Vue Rich Text Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Fullscreen mode
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Fullscreen Mode in Vue Rich Text Editor Component
+
+The Fullscreen mode allows the Rich Text Editor to expand and occupy the entire browser viewport. This provides a distraction-free editing experience and more space to work with content and toolbar features.
+
+You can enable fullscreen mode using the FullScreen icon toolbar button. Once activated, the editor transitions into fullscreen view, hiding other page elements and maximizing the editing area.
+
+## How it works
+
+Click the fullscreen icon in the toolbar to toggle fullscreen mode. When enabled, the editor:
+
+- Expands to fill the entire browser window.
+- Adjusts its layout to optimize space for content and tools.
+- Can be exited by clicking the same icon again or pressing the `Esc` key.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/fullscreen-mode/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/fullscreen-mode/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/fullscreen-mode" %}
\ No newline at end of file
diff --git a/ej2-vue/rich-text-editor/tools/text-formatting.md b/ej2-vue/rich-text-editor/tools/text-formatting.md
index 5dcf47b55..4b762224d 100644
--- a/ej2-vue/rich-text-editor/tools/text-formatting.md
+++ b/ej2-vue/rich-text-editor/tools/text-formatting.md
@@ -105,7 +105,7 @@ For more detailed control over the numbering style, use the `numberFormatList` d
 * `Lower Alpha`: Uses lowercase letters (a, b, c, ...)
 * `Upper Roman`: Employs uppercase Roman numerals (I, II, III, ...)
 
-You can customize the available number formats using the [numberFormatList](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#numberformatlist) property of the Rich Text Editor.
+You can customize the available number formats using the [numberFormatList](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor#numberformatlist) property of the Rich Text Editor.
 
 The following example demonstrates how to customize the number format lists in the Rich Text Editor:
 
@@ -182,11 +182,19 @@ Below is an example of how to configure the Checklist in the Rich Text Editor:
         
 {% previewsample "page.domainurl/code-snippet/rich-text-editor/checklist-cs1" %}
 
+## Nested list creation using Tab key
+
+In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one.
+
+Please refer to the below video for visual behavior and interaction examples:
+
+![Rich Text Editor list editing behaviour](../images/list-editing.gif)
+
 ## Increase and decrease indent
 
 The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.
 
-The Rich Text Editor allows you to configure two types of indentation tools, `Indent` and `Outdent` tool  in the Rich Text Editor toolbar using the `toolbarSettings` [items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings/#items) property.
+The Rich Text Editor allows you to configure two types of indentation tools, `Indent` and `Outdent` tool  in the Rich Text Editor toolbar using the [toolbarSettings.items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings#items) property.
 
 | Options | Description |
 |----------------|---------|
@@ -315,6 +323,27 @@ Use the `Blockquote` tool in the editor below to see the feature in action.
 
 > In a markdown editor, blockquotes are represented using the `>` symbol.
 
+### Nested blockquotes
+
+The Rich Text Editor also supports nested blockquotes, allowing one blockquote to be placed inside another. 
+
+While the toolbar does not provide a direct method to apply blockquote formatting recursively (i.e., within an already blockquote section), nested blockquotes can still be achieved in the following ways:
+
+1. **Pasting preformatted content:** If you paste content that already contains nested blockquote tags (e.g., from another editor or email), the Rich Text Editor will preserve and render the nested structure correctly.
+2. **Pre-loading nested blockquote HTML:** You can initialize the editor with nested blockquote content using the value property.
+3. **Manual editing via Source Code view:** You can manually insert nested blockquote tags using the SourceCode toolbar option.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/nesting-blockquote/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/rich-text-editor/nesting-blockquote/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/nesting-blockquote" %}
+
 ## Horizontal line
 
 The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.
@@ -332,13 +361,15 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action.
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/horizontal-line" %}
+
 ## Format painter
 
-The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/formatPainterSettings/) property.
+The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#formatpaintersettings) property.
 
 ### Configuring format painter tool in the toolbar
 
-You can add the `FormatPainter` tool in the Rich Text Editor using the `toolbarSettings` [items](../api/rich-text-editor/toolbarSettings/#items) property.
+You can add the `FormatPainter` tool in the Rich Text Editor using the [toolbarSettings.items](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettings#items) property.
 
 >To use the Format Painter feature, we need to import and configure the `FormatPainterService` in the provider section.
 
@@ -359,11 +390,11 @@ The following code example shows how to add the format painter tool in the Rich
 
 ### Customizing copy and paste format
 
-You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/formatPainterSettings/) property.
+You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#formatpaintersettings) property.
 
-The [allowedFormats](../api/rich-text-editor/formatPainterSettings/#allowedformats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality.
+The [allowedFormats](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/formatpaintersettingsmodel#allowedformats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality.
 
-Similarly, with the [deniedFormats](../api/rich-text-editor/formatPainterSettings/#deniedformats) property, you can utilize the selectors to prevent specific formats from being pasted onto the selected text. The table below illustrates the selectors and their respective usage.
+Similarly, with the [deniedFormats](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/formatpaintersettingsmodel#deniedformats) property, you can utilize the selectors to prevent specific formats from being pasted onto the selected text. The table below illustrates the selectors and their respective usage.
 
 | Type | Description        | Selector                                                | Usage                                                                  |
 |------|--------------------|---------------------------------------------------------|------------------------------------------------------------------------|
@@ -415,7 +446,7 @@ This feature is particularly useful when you need to:
 To enable the Clear Format feature in your Rich Text Editor, you need to add it to the toolbar items. Follow these steps:
 
 1. Open your component file where you've implemented the Rich Text Editor.
-2. Locate the [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#toolbarsettings) property in your Rich Text Editor configuration.
+2. Locate the [toolbarSettings](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor#toolbarsettings) property in your Rich Text Editor configuration.
 3. Add `'ClearFormat'` to the `items` array within `toolbarSettings`.
 
 Here's an example of how to configure the Clear Format feature:
diff --git a/ej2-vue/schedule/getting-started.md b/ej2-vue/schedule/getting-started.md
index d91e0df8d..ab55541e6 100644
--- a/ej2-vue/schedule/getting-started.md
+++ b/ej2-vue/schedule/getting-started.md
@@ -12,6 +12,8 @@ domainurl: ##DomainURL##
 
 This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Schedule component.
 
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Vue development?** Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/vue/documentation/ai-coding-assistant/overview)
+
 Check out this video to see how to develop a Vue Scheduler application:
 
 {% youtube "https://www.youtube.com/watch?v=Wak6k6cYPiA" %}