DEV Community: suman kumar

DEV Community: suman kumar The latest articles on DEV Community by suman kumar (@sumandev). https://dev.to/sumandev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1147430%2F3ef4ff4a-6898-4285-ab98-6c0326f8f49e.jpg DEV Community: suman kumar https://dev.to/sumandev en Switching Themes in a Vue.js Application with `<script setup>` and PrimeVue suman kumar Fri, 29 Sep 2023 15:57:09 +0000 https://dev.to/sumandev/switching-themes-in-a-vuejs-application-with-and-primevue-1l3f https://dev.to/sumandev/switching-themes-in-a-vuejs-application-with-and-primevue-1l3f <p>In this post, we'll explore how to implement theme switching in a Vue.js application using the <code><script setup></code> syntax and PrimeVue. We'll create a simple Vue application where users can switch between different themes provided by PrimeVue.</p> <h3> Prerequisites </h3> <p>Before we begin, make sure you have the following installed:</p> <ul> <li>Vue.js</li> <li>PrimeVue</li> </ul> <h3> Setting Up the Project </h3> <p>Let's start by setting up a new Vue.js project with PrimeVue. You can create a new Vue project using Vue CLI or integrate PrimeVue into an existing project.</p> <h3> Creating the Theme Switcher Component </h3> <p>We'll create a theme switcher component that allows users to select a theme from a dropdown menu. This component will use the <code><script setup></code> syntax, which is a more concise way to define Vue components.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vue"><code><span class="nt"><</span><span class="k">template</span><span class="nt">></span> <span class="nt"><div></span> <span class="c"></span> <span class="nt"><select</span> <span class="na">v-model=</span><span class="s">"selectedTheme"</span> <span class="err">@</span><span class="na">change=</span><span class="s">"changeTheme"</span><span class="nt">></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"vela"</span><span class="nt">></span>Vela<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"bootstrap"</span><span class="nt">></span>Bootstrap<span class="nt"></option></span> <span class="c"></span> <span class="nt"></select></span> <span class="nt"></div></span> <span class="nt"></</span><span class="k">template</span><span class="nt">></span> <span class="nt"><</span><span class="k">script</span> <span class="na">setup</span><span class="nt">></span> <span class="k">import</span> <span class="p">{</span> <span class="nx">ref</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">selectedTheme</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="dl">'</span><span class="s1">vela</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// Set the default theme here</span> <span class="kd">const</span> <span class="nx">changeTheme</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">// Dynamically change the theme by updating the href attribute</span> <span class="kd">const</span> <span class="nx">themeLink</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">link[href*="/primevue/themes/"]</span><span class="dl">'</span><span class="p">);</span> <span class="nx">themeLink</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s2">`primevue/themes/</span><span class="p">${</span><span class="nx">selectedTheme</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">/theme.css`</span><span class="p">;</span> <span class="p">};</span> <span class="nt"></</span><span class="k">script</span><span class="nt">></span> </code></pre> </div> <p>In this component, we define a <code><select></code> element to choose themes, and when the selection changes, it triggers the <code>changeTheme</code> function to dynamically update the theme by changing the <code>href</code> attribute of the theme stylesheet link.</p> <h3> Using the Theme Switcher Component </h3> <p>To use the theme switcher component, simply include it in your Vue application where you want the theme switching functionality.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vue"><code><span class="nt"><</span><span class="k">template</span><span class="nt">></span> <span class="nt"><div></span> <span class="nt"><ThemeSwitcher</span> <span class="nt">/></span> <span class="nt"></div></span> <span class="nt"></</span><span class="k">template</span><span class="nt">></span> <span class="nt"><</span><span class="k">script</span> <span class="na">setup</span><span class="nt">></span> <span class="k">import</span> <span class="nx">ThemeSwitcher</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./ThemeSwitcher.vue</span><span class="dl">'</span><span class="p">;</span> <span class="nt"></</span><span class="k">script</span><span class="nt">></span> </code></pre> </div> <h3> Conclusion </h3> <p>With this setup, you can easily implement theme switching in your Vue.js application using the <code><script setup></code> syntax and PrimeVue. Users can select their preferred theme from a dropdown menu, and the application's appearance will change dynamically.</p> <p>Feel free to extend this example by adding more themes and customizing the theme-switching mechanism to fit your project's requirements.</p> <p>That's it! You now have a Vue.js application with theme switching capabilities using <code><script setup></code> and PrimeVue. Happy coding!</p> vue primevue themeswitch Form Validation in Vue 3 with Vuelidate and PrimeVue using Composition API suman kumar Sun, 24 Sep 2023 17:53:01 +0000 https://dev.to/sumandev/form-validation-in-vue-3-with-vuelidate-and-primevue-using-composition-api-2k36 https://dev.to/sumandev/form-validation-in-vue-3-with-vuelidate-and-primevue-using-composition-api-2k36 <p>In this tutorial, we'll explore how to perform form validation in Vue 3 using Vuelidate and integrate it seamlessly with the popular PrimeVue UI library. We'll leverage the power of the Composition API and the <code>script setup</code> feature to create a clean and efficient form validation solution.</p> <h3> Prerequisites: </h3> <p>Before we get started, ensure you have the following dependencies installed:</p> <ul> <li>Vue 3</li> <li>Vuelidate</li> <li>PrimeVue</li> <li>primeFlex</li> </ul> <p>You can install these using npm or yarn:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>vue@next @vuelidate/core primevue </code></pre> </div> <h3> Setting Up the Project: </h3> <p>Let's create a new Vue 3 project and set up the necessary components. We'll use <code>create-vue@3</code> for a quick setup:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>vue create vue3-vuelidate-primevue-form-validation </code></pre> </div> <p>Once the project is created, navigate to your project folder and install Vuelidate:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> @vuelidate/core @vuelidate/validators </code></pre> </div> <h3> Building the Form: </h3> <p>Now, let's create a simple form with a name field that should be at least 3 characters long and is required.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vue"><code><span class="nt"><</span><span class="k">template</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"flex justify-content-center"</span><span class="nt">></span> <span class="nt"><form</span> <span class="err">@</span><span class="na">submit.prevent=</span><span class="s">"submitForm"</span><span class="nt">></span> <span class="nt"><InputText</span> <span class="na">v-model=</span><span class="s">"name"</span> <span class="na">placeholder=</span><span class="s">"Enter your name"</span> <span class="na">:class=</span><span class="s">"</span>{'p-invalid':$v.$error}" /> <span class="nt"><div</span> <span class="na">v-if=</span><span class="s">"$v.$error"</span> <span class="na">class=</span><span class="s">"p-error"</span><span class="nt">></span>Name is required.<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">v-if=</span><span class="s">"$v.$error"</span> <span class="na">class=</span><span class="s">"p-error"</span><span class="nt">></span>Name must be at least 3 characters.<span class="nt"></div></span> <span class="nt"><Button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"p-button p-button-primary"</span><span class="nt">></span>Submit<span class="nt"></Button></span> <span class="nt"></form></span> <span class="nt"></div></span> <span class="nt"></</span><span class="k">template</span><span class="nt">></span> </code></pre> </div> <p>In this code:</p> <ul> <li>We use <code>InputText</code> from PrimeVue for the name input field.</li> <li>We bind the <code>p-error</code> class to the input field when the <code>name</code> field is invalid.</li> <li>We conditionally display error messages based on the validation results.</li> </ul> <h3> Setting Up Validation: </h3> <p>Now, let's set up Vuelidate for form validation using the Composition API:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vue"><code><span class="nt"><</span><span class="k">script</span> <span class="na">setup</span><span class="nt">></span> <span class="k">import</span> <span class="p">{</span> <span class="nx">ref</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue</span><span class="dl">'</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useVuelidate</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@vuelidate/core</span><span class="dl">'</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">required</span><span class="p">,</span> <span class="nx">minLength</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@vuelidate/validators</span><span class="dl">'</span> <span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">(</span><span class="dl">''</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">rules</span> <span class="o">=</span><span class="nx">computed</span><span class="p">(()</span> <span class="o">=></span> <span class="p">(</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="p">{</span> <span class="nx">required</span><span class="p">,</span> <span class="na">minLength</span><span class="p">:</span> <span class="nx">minLength</span><span class="p">(</span><span class="mi">3</span><span class="p">),</span> <span class="p">},</span> <span class="p">}</span> <span class="p">));</span> <span class="kd">const</span> <span class="nx">$v</span> <span class="o">=</span> <span class="nx">useVuelidate</span><span class="p">(</span><span class="nx">rules</span><span class="p">,</span> <span class="p">{</span> <span class="nx">name</span> <span class="p">});</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">$v</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">submitForm</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">$v</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">$validate</span><span class="p">();</span> <span class="nx">result</span><span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">res</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">if</span><span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span> <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Form submitted.</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">}).</span><span class="k">catch</span><span class="p">((</span><span class="nx">err</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> <span class="p">})</span> <span class="p">};</span> <span class="nt"></</span><span class="k">script</span><span class="nt">></span> </code></pre> </div> <p>Here's what's happening:</p> <ul> <li>We import Vue Composition API features like <code>ref</code> and <code>computed</code>.</li> <li>We define a <code>name</code> ref to store the value of the name input.</li> <li>We create validation rules using Vuelidate's <code>required</code> and <code>minLength</code> validators.</li> <li>We use <code>$v</code> to store the validation results and integrate it with the input fields.</li> <li>We use <code>$v.value.$validate()</code> to trigger the validation, and it returns a promise. -We use <code>.then()</code> to handle the result of the validation, and if it's successful <code>(res is true)</code>, we display the "Form submitted." alert.</li> <li>If there's an error during validation, we catch it using <code>.catch()</code> and log the error.</li> </ul> <h3> Conclusion: </h3> <p>In this tutorial, we've demonstrated how to perform form validation in Vue 3 using Vuelidate, along with the powerful PrimeVue UI library. With the Composition API and <code>script setup</code>, we've created a clean and efficient solution for form validation.</p> <p>This approach allows you to easily handle form validation in Vue.js projects, making your code more maintainable and user-friendly.</p> <p>Feel free to explore further and adapt this example to your specific project needs. Happy coding! 😊</p> vue vuelidate primevue composition VeeValidate VS Vuelidate suman kumar Tue, 19 Sep 2023 15:59:55 +0000 https://dev.to/sumandev/veevalidate-vs-vuelidate-5foi https://dev.to/sumandev/veevalidate-vs-vuelidate-5foi <p><strong>VeeValidate</strong> and <strong>Vuelidate</strong> are two popular form validation libraries for Vue.js. Both libraries have their own strengths and weaknesses, so the best choice for you will depend on your specific needs.</p> <p><strong>VeeValidate</strong> is a more feature-rich library, offering a variety of features such as:</p> <ul> <li>Declarative and composable validation</li> <li>Async validation</li> <li>Backend API error handling</li> <li>Form submissions</li> <li>Flexible validator API</li> <li>Vue Devtools integration</li> </ul> <p>VeeValidate also comes with a number of built-in validation rules, which you can extend or customize to meet your specific needs.</p> <p><strong>Vuelidate</strong> is a more lightweight and unopinionated library. It offers a simple API for validating form fields, but it does not provide as many features as VeeValidate. For example, Vuelidate does not handle error messages out of the box, and it does not offer any built-in validation rules.</p> <p>However, Vuelidate is very flexible and can be used with any input component. It is also very easy to extend, so you can add your own custom validation rules or logic.</p> <p><strong>Here is a table that summarizes the key differences between VeeValidate and Vuelidate:</strong></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5fndvavgkjcg09j0kmt5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5fndvavgkjcg09j0kmt5.png" alt="Image description"></a></p> <p><strong>Overall, VeeValidate is a good choice for developers.</strong> <br> who want a feature-rich and flexible validation library. Vuelidate is a good choice for developers who want a lightweight and unopinionated library.</p> <p><strong>Which library should you choose?</strong><br> The best way to decide which library is right for you is to consider your specific needs. If you need a feature-rich and flexible validation library, then VeeValidate is a good choice. If you need a lightweight and unopinionated library, then Vuelidate is a good choice.</p> <p>You can also try both libraries and see which one you prefer. Both libraries are easy to use and have good documentation.</p> <ul> <li> The best library to use if you are using <strong>PrimeVue</strong> components is <strong>VeeValidate</strong>.</li> </ul> <p>VeeValidate is a form validation library for Vue.js that is designed to be easy to use and flexible. It offers a variety of features that are well-suited for use with PrimeVue components, including:</p> <ul> <li>Declarative and composable validation</li> <li>Async validation</li> <li>Backend API error handling</li> <li>Flexible validator API</li> <li>Vue Devtools integration</li> </ul> <p>VeeValidate also comes with a number of built-in validation rules, which you can extend or customize to meet your specific needs.</p> <p>PrimeVue does not have its own built-in form validation library, so VeeValidate is a good choice for developers who want to use form validation with PrimeVue components.</p> <p>Here is an example of how to use VeeValidate with PrimeVue components:</p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code> <span class="nt"><template></span> <span class="nt"><div></span> <span class="nt"><input</span> <span class="na">v-model=</span><span class="s">"name"</span> <span class="na">:type=</span><span class="s">"type"</span> <span class="nt">/></span> <span class="nt"><p</span> <span class="na">v-if=</span><span class="s">"!$v.name.valid"</span><span class="nt">></span> The name field is required. <span class="nt"></p></span> <span class="nt"></div></span> <span class="nt"></template></span> <span class="nt"><script></span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Form</span><span class="p">,</span> <span class="nx">Field</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vee-validate</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">required</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vee-validate/dist/rules</span><span class="dl">'</span><span class="p">;</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">App</span><span class="dl">'</span><span class="p">,</span> <span class="na">components</span><span class="p">:</span> <span class="p">{</span> <span class="nx">Form</span><span class="p">,</span> <span class="nx">Field</span> <span class="p">},</span> <span class="nf">data</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">text</span><span class="dl">'</span><span class="p">,</span> <span class="p">};</span> <span class="p">},</span> <span class="na">validations</span><span class="p">:</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="p">{</span> <span class="nx">required</span><span class="p">,</span> <span class="p">},</span> <span class="p">},</span> <span class="p">};</span> <span class="nt"></script></span> </code></pre> </div> <p>In this example, we are using the <code>Form</code> and <code>Field</code> components from VeeValidate to validate the <code>name</code> input field. We are also using the <code>required</code> validation rule to ensure that the <code>name</code> field is not empty.</p> <p>VeeValidate is a good choice for developers who want to use form validation with PrimeVue components because it is easy to use, flexible, and has a number of features that are well-suited for use with PrimeVue components.</p> vue veevalidate vuelidate