{"id":4964,"date":"2022-04-20T00:29:55","date_gmt":"2022-04-20T00:29:55","guid":{"rendered":"https:\/\/positiwise.com\/?p=4964"},"modified":"2023-09-08T08:20:53","modified_gmt":"2023-09-08T08:20:53","slug":"how-to-install-vite-js-on-your-computer","status":"publish","type":"post","link":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer","title":{"rendered":"How to Install Vite.js: A Step-by-Step Guide"},"content":{"rendered":"\n<p><strong class=\"pw-highlight-text-color\"><em>Quick Overview:<\/em><\/strong><br>In the hustle of day-to-day work, everyone wants to complete their numerous jobs as fast as possible. And most of the business and personal operations are conducted using applications.<br><br><a href=\"https:\/\/vitejs.dev\/\">Vite.js<\/a>\u00a0has made its debut in the market for making apps faster, which has gained a lot of popularity and endorsement from industry experts.<br><br>Vite Javascript is a no-bundler\u00a0modern technology development\u00a0environment, allowing applications to render more precisely and efficiently through its native ES module importing and HMR.<br><br>Looking to install Vite.js? Follow this step-by-step guide for a seamless installation process to learn how to start a vite project:<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#What_does_Vitejs_Offer\" >What does Vite.js Offer?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Hot_Module_Replacement\" >Hot Module Replacement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Bare_Module_Resolving\" >Bare Module Resolving<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#On-demand_compilation\" >On-demand compilation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Configuration_Option\" >Configuration Option<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#A_Step-by-Step_Guide_To_Install_and_Use_Vite_on_Your_System\" >A Step-by-Step Guide To Install and Use Vite on Your System<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Step_1_Checking_Requirements_and_Initiating_Installation\" >Step 1: Checking Requirements and Initiating Installation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Step_2_Creating_a_Project_Directory\" >Step 2: Creating a Project Directory<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Step_3_Installation_command_execution\" >Step 3: Installation command execution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Step_4_Running_the_Dev_Server\" >Step 4: Running the Dev Server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Step_5_Vite_Test\" >Step 5: Vite Test<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Install_Vite_on_macOS_A_Step-by-Step_Guide\" >Install Vite on macOS: A Step-by-Step Guide<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#1_Creating_a_new_Vite_App\" >#1: Creating a new Vite App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#2_Accessing_Project_Directory_and_Installing_Packages\" >#2: Accessing Project Directory and Installing Packages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#3_Running_the_Dev_Server\" >#3: Running the Dev Server<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#4_Vite_Test\" >#4: Vite Test<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#5_Creating_the_build\" >#5: Creating the build<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Install_Vitejs_Vue_Router_A_Step-by-Step_Tutorial\" >Install Vite.js Vue Router: A Step-by-Step Tutorial<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#1_Checking_Prerequisites\" >1. Checking Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#2_Creating_a_Javascript_file\" >2. Creating a Javascript file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#3_Root_Component_Configuration\" >3. Root Component Configuration<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Vite_Install_for_Single_Page_Application\" >Vite Install for Single Page Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Backend_Configuration\" >Backend Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\/#Concluding_Up\" >Concluding Up<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_does_Vitejs_Offer\"><\/span>What does Vite.js Offer?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s explore the perks of installing and using Vite.js<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hot_Module_Replacement\"><\/span>Hot Module Replacement<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>HMR is the most popular feature of Vite.js as it allows you to update the content on the web page immediately without needing a browser refresh. It is available in the Javascript bundler to optimize the functionality of your application.<\/p>\n\n\n\n<p>As per the official Vite documentation, its performance and speed are decoupled from the overall available modules.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bare_Module_Resolving\"><\/span>Bare Module Resolving<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Most of the browsers don\u2019t allow importing of bare modules using commands, such as&nbsp;<strong>import {createApp} from \u2018vue\u2019<\/strong>, as it is not a relative path to the node_modules.<\/p>\n\n\n\n<p>However, Vite setup enables the bare import specifiers from the Javascript files. It rewrites the file content and executes module resolution for locating the suitable file from the dependencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"On-demand_compilation\"><\/span>On-demand compilation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For making the application fast as light-speed, Vite compiles only a portion of the code according to the request forwarded by the browser. After compilation, changes are made on-screen, and all unaltered files provide a 304 error code.<\/p>\n\n\n\n<p>This feature is quite different from the traditional bundlers, which compile the overall code and bundle them before changing.<\/p>\n\n\n\n<p>Due to this, developers prefer Vite for making large and complex applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configuration_Option\"><\/span>Configuration Option<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vite offers a wide array of modules to extend the functionality of your application.<\/p>\n\n\n\n<p>By configuring \u2018<strong>vite.config.js\u2019&nbsp;<\/strong>and \u2018<strong>vite.config.ts\u2019&nbsp;<\/strong>in the project\u2019s root directory, you can optimize the software to add more features to it. In addition, you can use Koa middleware for custom file transformation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Step-by-Step_Guide_To_Install_and_Use_Vite_on_Your_System\"><\/span>A Step-by-Step Guide To Install and Use Vite on Your System<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before moving to the installation procedure, you must ensure that the latest version of&nbsp;<strong>Node.js<\/strong>&nbsp;is installed on your system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Checking_Requirements_and_Initiating_Installation\"><\/span>Step 1: Checking Requirements and Initiating Installation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once the&nbsp;Node.js is present and running on your computer, the next step is to run the \u2018<strong>npm init @vitejs\/app.\u2019&nbsp;<\/strong>Further, a similar list as below provided will be available, and you have to select a project name from it.<\/p>\n\n\n\n<p>Project Name List:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>vanilla<\/li>\n\n\n\n<li>vue<\/li>\n\n\n\n<li>vue-ts<\/li>\n\n\n\n<li>react<\/li>\n\n\n\n<li>react-ts<\/li>\n\n\n\n<li>svelte<\/li>\n\n\n\n<li>svelte-ts<\/li>\n\n\n\n<li>preact<\/li>\n\n\n\n<li>preact-ts<\/li>\n\n\n\n<li>lit-element<\/li>\n\n\n\n<li>lit-element-ts<\/li>\n<\/ul>\n\n\n\n<p>In this installation, we have selected&nbsp;<strong>vanilla&nbsp;<\/strong>as the project name.<\/p>\n\n\n\n<p>When you select an option from the project name list, it creates a directory containing essential files required for software development.&nbsp;<strong>\u2018<em>index.html<\/em>\u2019, \u2018<em>main.js<\/em>\u2019, \u2018<em>style.css<\/em>\u2019, \u2018<em>favicon.svg<\/em>\u2019,&nbsp;<\/strong>and some additional files for performing npm and Git operations.<\/p>\n\n\n\n<p>Moreover,&nbsp;<strong>the \u2018<em>package.json<\/em><\/strong>\u2019 file is also present, which includes&nbsp;<strong>\u2018<em>vite<\/em>\u2019<\/strong>&nbsp;as a dependency and some basic scripts to initiate the dev ecosystem for starting the build. We have all the required knowledge to move on with the installation process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Creating_a_Project_Directory\"><\/span>Step 2: Creating a Project Directory<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Further, open the terminal on your system and navigate to any directory path to run the command as provided:&nbsp;<strong><em>npx create-vite-app vite-test<\/em>,&nbsp;<\/strong>where \u2018vite-test\u2019 is the name of the project directory.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Installation_command_execution\"><\/span>Step 3: Installation command execution<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Move to the project directory using the&nbsp;<strong>\u2018<em>cd<\/em>\u2019&nbsp;<\/strong>command and install the application dependency by executing the&nbsp;<strong>\u2018<em><a href=\"https:\/\/positiwise.com\/blog\/how-to-install-npm-and-node-js-on-mac-and-windows\">npm install<\/a><\/em>\u2019&nbsp;<\/strong>command.<\/p>\n\n\n\n<p>Command execution structure:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><em>cd vite-project<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>npm install<\/em><\/strong><\/li>\n<\/ol>\n\n\n\n<p>After this, you will see the application running in the VS Code.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"226\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-vs-code.png\" alt=\"run vs code\" class=\"wp-image-10791\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-vs-code.png 567w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/run-vs-code-300x120.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Running_the_Dev_Server\"><\/span>Step 4: Running the Dev Server<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>At this step, we will start the dev server by running the&nbsp;<strong>\u2018<em>npm run dev<\/em>\u2019&nbsp;<\/strong>command, and after its successful execution, you will be able to view your application on&nbsp;<strong><em>http:\/\/localhost:3000\/<\/em><\/strong>.<\/p>\n\n\n\n<p>Also, if you perform any modification in the project files, all the changes will be immediately reflected on the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"176\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npn-run.png\" alt=\"npn run\" class=\"wp-image-10790\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npn-run.png 567w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npn-run-300x93.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Vite_Test\"><\/span>Step 5: Vite Test<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This screen will be displayed to you once you navigate to the localhost page to view your application.<\/p>\n\n\n\n<p>Now, you are ready to use Vite.js for your software development projects.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"311\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hello-world.png\" alt=\"hello world\" class=\"wp-image-10789\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hello-world.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/hello-world-300x150.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Install_Vite_on_macOS_A_Step-by-Step_Guide\"><\/span>Install Vite on macOS: A Step-by-Step Guide<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Likewise, for Windows computers, you need to install Noed.js before installing Vite.js on MacOS.<\/p>\n\n\n\n<p>Let\u2019s get started with installing Vite.js on MacOS. Follow the below steps, and you are good to go with your application creation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Creating_a_new_Vite_App\"><\/span>#1: Creating a new Vite App<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Open the terminal and create new projects using any of the two commands.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Using NPX:&nbsp;<strong><em>npx create-vite-app testing-vite<\/em><\/strong><\/li>\n\n\n\n<li>Using Yarn:&nbsp;<strong><em>yarn create-vite-app testing-vite<\/em><\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"144\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-test-vite.png\" alt=\"create test vite\" class=\"wp-image-10794\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-test-vite.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/create-test-vite-300x69.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p><strong>\u2018<em>testing-vite<\/em>\u2019<\/strong>&nbsp;is the project\u2019s name, and you can replace it with any other term of your choice.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"344\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/test-vite.png\" alt=\"test vite\" class=\"wp-image-10793\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/test-vite.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/test-vite-300x165.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Accessing_Project_Directory_and_Installing_Packages\"><\/span>#2: Accessing Project Directory and Installing Packages<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Move to the directory with the project name you have created in the first step.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"46\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-testing.png\" alt=\"vite testing\" class=\"wp-image-10796\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-testing.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-testing-300x22.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>And install all the dependencies and packages required to work with the application development. You can use&nbsp;<strong>\u2018<em>npm install<\/em>\u2019&nbsp;<\/strong>or&nbsp;<strong>\u2018<em>yarn<\/em>\u2019&nbsp;<\/strong>to perform this installation.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"144\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npm.png\" alt=\"npm\" class=\"wp-image-10795\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npm.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/npm-300x69.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Running_the_Dev_Server\"><\/span>#3: Running the Dev Server<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You have to run the server in the browser to view your application, and for this, you can use&nbsp;<strong>\u2018<em>npm run dev<\/em>\u2019&nbsp;<\/strong>and&nbsp;<strong>\u2018<em>yarn dev<\/em><\/strong>\u2019 commands.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"145\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/dev-server.png\" alt=\"dev server\" class=\"wp-image-10800\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/dev-server.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/dev-server-300x70.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Vite_Test\"><\/span>#4: Vite Test<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>By navigating to&nbsp;<strong><em>http:\/\/localhost:3000\/<\/em><\/strong>, you can test whether your server is running or not. Your server is running seamlessly if you view a similar page, as shown in the screengrab below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"344\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vue-3.0.png\" alt=\"vue 3.0\" class=\"wp-image-10799\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vue-3.0.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vue-3.0-300x165.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Creating_the_build\"><\/span>#5: Creating the build<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You have to run this command for bundling up your production application. It will Rollup the App and store the output in&nbsp;<strong>the dist&nbsp;<\/strong>directory, present in the root of your software project. In addition, you can find out all the static assets in it.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"230\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-build.png\" alt=\"vite build\" class=\"wp-image-10798\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-build.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-build-300x111.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Install_Vitejs_Vue_Router_A_Step-by-Step_Tutorial\"><\/span>Install Vite.js Vue Router: A Step-by-Step Tutorial<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vue Router is an essential component of every application. It leads to establishing a connection between the browser\u2019s URL and elements of Vue to ensure smooth rendering over the App.<\/p>\n\n\n\n<p>It also aids in syncing URLs so that the user can view that in your software solution. Let\u2019s move further to understand its installation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Checking_Prerequisites\"><\/span>1. Checking Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, check whether you have Vue.js on your computer or not. If it is present, then we are good to go further, and if it\u2019s not, you must install its packages in your vite.js application.<\/p>\n\n\n\n<p><strong>\u2018<em>npm I \u2013save&nbsp;vue-router@v4.0.0-alpha.11<\/em>\u2019&nbsp;<\/strong>is the command you have to execute to install Vue Router packages in your Vite App.<\/p>\n\n\n\n<p>It will ensure that the latest version of the Vue Router is installed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Creating_a_Javascript_file\"><\/span>2. Creating a Javascript file<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You have to create a file with the name&nbsp;<strong>\u2018<em>router.js<\/em>\u2019&nbsp;<\/strong>for defining the routes as displayed below:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { createWebHistory, createRouter } from &quot;vue-router&quot;;\nimport Home from &quot;.\/components\/Hello.vue&quot;;\nconst history = createWebHistory();\nconst routes = [{ path: &quot;\/&quot;, component: Home }, ];\nconst router = createRouter({ history, routes });\nexport default router;<\/pre><\/div>\n\n\n\n<p>After successful execution of this code, you have to register the&nbsp;<strong><em>\u2018register.js<\/em>\u2019&nbsp;<\/strong>file in the&nbsp;<strong>\u2018<em>main.js<\/em>\u2019&nbsp;<\/strong>using the command as defined:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport '.\/index.css'\nimport router from &quot;.\/router&quot;;\ncreateApp(App).use(router).mount('#app')<\/pre><\/div>\n\n\n\n<p>Subsequently, it&#8217;s necessary to modify our App.vue root component for rendering all of our components.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;template&gt;\n&lt;img alt=&quot;Vue logo&quot; src=&quot;.\/assets\/logo.png&quot; \/&gt;\n&lt;Hello msg=&quot;Hello Vue 3.0 + Vite&quot; \/&gt;\n&lt;router-view \/&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Hello from &quot;.\/components\/Hello.vue&quot;;\nexport default {\nname: &quot;App&quot;,\ncomponents: {\nHello,\n},\n};\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Root_Component_Configuration\"><\/span>3. Root Component Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This is the last step of Vue Router installation, in which you have to modify the <strong><em>App.vue<\/em><\/strong> root component to enable it to render all other app components for rendering.<\/p>\n\n\n\n<p>After this, you will have the leverage to register custom routes for your Vite.js application.<\/p>\n\n\n\n<div class=\"wp-block-group border rounded bg-light has-global-padding is-layout-constrained wp-container-core-group-is-layout-a666d811 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-text-align-center fs-2 text-blue lh-sm has-contrast-color has-text-color\"><strong>Bring Your App Idea to Life with Our Experts&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center mt-2\">Got a concept for a mobile app but lack the skills to make it real? Our experienced developers turn ideas into reality. With expertise in iOS and Android development, UI\/UX design, and app marketing, we bring your vision to life. Let us help build your dream app today!&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-buttons mt-3 is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-color has-text-color has-background wp-element-button\" href=\"https:\/\/positiwise.com\/services\/mobile-application-development\" style=\"border-radius:100px;background-color:#ed7923;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px\"><strong>Hire Mobile Application Developers<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vite_Install_for_Single_Page_Application\"><\/span>Vite Install for Single Page Application<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Most people have a question, about whether they can <a href=\"https:\/\/positiwise.com\/blog\/how-to-create-react-application-in-just-a-few-minutes\">create a single page application<\/a> with Vite.js or not. A reliable answer is. Yes, you can fabricate SPA software with it.<\/p>\n\n\n\n<p><strong>Let\u2019s find out which packages you have to install and configure for doing it so.<\/strong><\/p>\n\n\n\n<p>At first, we have to execute&nbsp;<strong>\u2018<em>npm init @vitejs\/app<\/em>\u2019&nbsp;<\/strong>and pick out a Vue template. We will get a Vite, Vue, and Vite plugin for compiling the Vue.<\/p>\n\n\n\n<p>In addition, for handling the routes, you have to install a Vue Router, which is an essential component, leading to flawless functionality of your single-page application. It will work efficiently after enabling Vue Router and linking it with your App.<\/p>\n\n\n\n<p>Vite has a significant role here, as most operations are Vue-based. Moreover, we can also create a multi-page application using the Vite Rollup configuration.<\/p>\n\n\n\n<p>If you find difficulty defining the routes, you can use a community-made plugin&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/vite-plugin-vue-router\">vite-plugin-vue-router<\/a>&nbsp;to simplify the task.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Backend_Configuration\"><\/span>Backend Configuration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If your project requires custom integration, you must follow the below-provided steps to configure it manually. Otherwise, you can navigate to the Awesome Vite website to serve the HTML with a traditional backend.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable the build manifest and configure the entry in your Vite config file.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"274\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-config-file.png\" alt=\"vite config file\" class=\"wp-image-10809\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-config-file.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/vite-config-file-300x132.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If the module preload polyfill is not disabled, you have to import it in your entry.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"82\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/module-load.png\" alt=\"module load\" class=\"wp-image-10808\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/module-load.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/module-load-300x39.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the below-shown code in your HTML template and modify the&nbsp;<strong><em>http:\/\/localhost:3000<\/em><\/strong>&nbsp;with the local URL, where Vite is currently running.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"105\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/local-host-3000.png\" alt=\"local host 3000\" class=\"wp-image-10807\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/local-host-3000.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/local-host-3000-300x50.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check the following server configuration to assure that static assets precisely work in the Vite environment. Otherwise, the application won\u2019t load images.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"189\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/react-refresh.png\" alt=\"react refresh\" class=\"wp-image-10806\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/react-refresh.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/react-refresh-300x91.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This step focuses on the production part. You have to run a&nbsp;<strong><em>vite build<\/em>&nbsp;<\/strong>command to create a&nbsp;<strong><em>manifest.json<\/em>&nbsp;<\/strong>file, whose content will look like the screenshot provided below.<\/li>\n<\/ul>\n\n\n\n<p><strong>The JSON file must contain:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Record &lt;name, chunk&gt;<\/li>\n\n\n\n<li>The key should be the relative source path from the project root.<\/li>\n\n\n\n<li>The key should be the base name for non-entry chunks.<\/li>\n\n\n\n<li>Both static and dynamic information must be available in chunks.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"442\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/backend-integration.png\" alt=\"backend integration\" class=\"wp-image-10805\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/backend-integration.png 624w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/backend-integration-300x213.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Concluding_Up\"><\/span>Concluding Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Vite is a robust technology, and one should always know to install it on their system. And you can effortlessly install it on any Windows or macOS-based machine with the above-given step.<\/p>\n\n\n\n<p>If you find any error or difficulty at any step, you should try to verify the prerequisites, confirm the configuration with the provided steps, and then continue it.<\/p>\n\n\n\n<p>You can use Vite with any Vue application; whether it\u2019s Vue 2 or Vue 3, it is compatible with both of them.<\/p>\n\n\n\n<p>Stay Tuned for more exciting articles and guides.<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"JavaScript Framework: What it is and Why It is the best for Web Development\" href=\"https:\/\/positiwise.com\/blog\/what-is-javascript-framework\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"JavaScript Framework: What it is and Why It is the best for Web Development\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"JavaScript Framework: What it is and Why It is the best for Web Development\" href=\"https:\/\/positiwise.com\/blog\/what-is-javascript-framework\">\r\n        JavaScript Framework: What it is and Why It is the best for Web Development  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"PHP vs JavaScript: What&#8217;s the Technical Difference?\" href=\"https:\/\/positiwise.com\/blog\/php-vs-javascript\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"672\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"PHP Vs. JavaScript: The Difference Between PHP and JavaScript Explained\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-300x168.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-1024x573.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-768x430.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"PHP vs JavaScript: What&#8217;s the Technical Difference?\" href=\"https:\/\/positiwise.com\/blog\/php-vs-javascript\">\r\n        PHP vs JavaScript: What&#8217;s the Technical Difference?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How to Install Vite.js: A Step-by-Step Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"How to Install Vite.js on your Computer?\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How to Install Vite.js: A Step-by-Step Guide\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\">\r\n        How to Install Vite.js: A Step-by-Step Guide  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Quick Overview:In the hustle of day-to-day work, everyone wants to complete their numerous jobs as fast as possible. [&hellip;]<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"JavaScript Framework: What it is and Why It is the best for Web Development\" href=\"https:\/\/positiwise.com\/blog\/what-is-javascript-framework\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"JavaScript Framework: What it is and Why It is the best for Web Development\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/javascript-framework-2-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"JavaScript Framework: What it is and Why It is the best for Web Development\" href=\"https:\/\/positiwise.com\/blog\/what-is-javascript-framework\">\r\n        JavaScript Framework: What it is and Why It is the best for Web Development  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"PHP vs JavaScript: What&#8217;s the Technical Difference?\" href=\"https:\/\/positiwise.com\/blog\/php-vs-javascript\">\r\n\r\n      <img width=\"1200\" height=\"672\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"PHP Vs. JavaScript: The Difference Between PHP and JavaScript Explained\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-300x168.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-1024x573.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/01\/php-vs-javascript-768x430.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"PHP vs JavaScript: What&#8217;s the Technical Difference?\" href=\"https:\/\/positiwise.com\/blog\/php-vs-javascript\">\r\n        PHP vs JavaScript: What&#8217;s the Technical Difference?  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Vue vs Angular: Which Framework to Choose?\" href=\"https:\/\/positiwise.com\/blog\/vue-vs-angular-which-framework-to-choose\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/03\/vue-vs-angular-which-framework-to-choose.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"Vue vs Angular: Which Framework to Choose?\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/03\/vue-vs-angular-which-framework-to-choose.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/03\/vue-vs-angular-which-framework-to-choose-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/03\/vue-vs-angular-which-framework-to-choose-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Vue vs Angular: Which Framework to Choose?\" href=\"https:\/\/positiwise.com\/blog\/vue-vs-angular-which-framework-to-choose\">\r\n        Vue vs Angular: Which Framework to Choose?  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"author":3,"featured_media":9919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[46],"tags":[],"class_list":["post-4964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Install Vite.js: A Step-by-Step Guide<\/title>\n<meta name=\"description\" content=\"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Install Vite.js: A Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer\" \/>\n<meta property=\"og:site_name\" content=\"Positiwise\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/positiwise\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-20T00:29:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-08T08:20:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1021\" \/>\n\t<meta property=\"og:image:height\" content=\"621\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Parag Mehta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@positiwise\" \/>\n<meta name=\"twitter:site\" content=\"@positiwise\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Parag Mehta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer\"},\"author\":{\"name\":\"Parag Mehta\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/b4b3d9970ea94f5914a615f70345353a\"},\"headline\":\"How to Install Vite.js: A Step-by-Step Guide\",\"datePublished\":\"2022-04-20T00:29:55+00:00\",\"dateModified\":\"2023-09-08T08:20:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer\"},\"wordCount\":1783,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/how-to-install-vite-js-on-your-computer.jpg\",\"articleSection\":[\"JavaScript Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#respond\"]}],\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer\",\"name\":\"How to Install Vite.js: A Step-by-Step Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/how-to-install-vite-js-on-your-computer.jpg\",\"datePublished\":\"2022-04-20T00:29:55+00:00\",\"dateModified\":\"2023-09-08T08:20:53+00:00\",\"description\":\"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#primaryimage\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/how-to-install-vite-js-on-your-computer.jpg\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/how-to-install-vite-js-on-your-computer.jpg\",\"width\":1021,\"height\":621,\"caption\":\"How to Install Vite.js on your Computer?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-to-install-vite-js-on-your-computer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/positiwise.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Install Vite.js: A Step-by-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"name\":\"Positiwise\",\"description\":\"Providing Full-cycle Software Development Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"alternateName\":\"Positiwise Software Pvt Ltd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\",\"name\":\"Positiwise\",\"alternateName\":\"Positiwise Software Pvt Ltd\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"width\":202,\"height\":29,\"caption\":\"Positiwise\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/positiwise\\\/\",\"https:\\\/\\\/x.com\\\/positiwise\",\"https:\\\/\\\/github.com\\\/positiwise\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/positiwise\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/b4b3d9970ea94f5914a615f70345353a\",\"name\":\"Parag Mehta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g\",\"caption\":\"Parag Mehta\"},\"description\":\"Parag Mehta, the CEO and Founder of Positiwise Software Pvt Ltd has extensive knowledge of the development niche. He is implementing custom strategies to craft highly-appealing and robust applications for its clients and supporting employees to grow and ace the tasks. He is a consistent learner and always provides the best-in-quality solutions, accelerating productivity.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/paragcmehta\"],\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/author\\\/parag-mehta\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Install Vite.js: A Step-by-Step Guide","description":"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer","og_locale":"en_US","og_type":"article","og_title":"How to Install Vite.js: A Step-by-Step Guide","og_description":"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.","og_url":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer","og_site_name":"Positiwise","article_publisher":"https:\/\/www.facebook.com\/positiwise\/","article_published_time":"2022-04-20T00:29:55+00:00","article_modified_time":"2023-09-08T08:20:53+00:00","og_image":[{"width":1021,"height":621,"url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg","type":"image\/jpeg"}],"author":"Parag Mehta","twitter_card":"summary_large_image","twitter_creator":"@positiwise","twitter_site":"@positiwise","twitter_misc":{"Written by":"Parag Mehta","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#article","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer"},"author":{"name":"Parag Mehta","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/b4b3d9970ea94f5914a615f70345353a"},"headline":"How to Install Vite.js: A Step-by-Step Guide","datePublished":"2022-04-20T00:29:55+00:00","dateModified":"2023-09-08T08:20:53+00:00","mainEntityOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer"},"wordCount":1783,"commentCount":0,"publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg","articleSection":["JavaScript Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#respond"]}],"copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/positiwise.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer","url":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer","name":"How to Install Vite.js: A Step-by-Step Guide","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#primaryimage"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg","datePublished":"2022-04-20T00:29:55+00:00","dateModified":"2023-09-08T08:20:53+00:00","description":"Effortlessly install Vite.js on your system with our step-by-step guide. Simplify web development with expert tips.","breadcrumb":{"@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#primaryimage","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/how-to-install-vite-js-on-your-computer.jpg","width":1021,"height":621,"caption":"How to Install Vite.js on your Computer?"},{"@type":"BreadcrumbList","@id":"https:\/\/positiwise.com\/blog\/how-to-install-vite-js-on-your-computer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/positiwise.com\/blog"},{"@type":"ListItem","position":2,"name":"How to Install Vite.js: A Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/positiwise.com\/blog\/#website","url":"https:\/\/positiwise.com\/blog\/","name":"Positiwise","description":"Providing Full-cycle Software Development Services","publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"alternateName":"Positiwise Software Pvt Ltd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/positiwise.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/positiwise.com\/blog\/#organization","name":"Positiwise","alternateName":"Positiwise Software Pvt Ltd","url":"https:\/\/positiwise.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","width":202,"height":29,"caption":"Positiwise"},"image":{"@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/positiwise\/","https:\/\/x.com\/positiwise","https:\/\/github.com\/positiwise","https:\/\/www.linkedin.com\/company\/positiwise"]},{"@type":"Person","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/b4b3d9970ea94f5914a615f70345353a","name":"Parag Mehta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/072ea4a638415a77610a840228d51b8225ad88856ed34d69cbe1fcd638390535?s=96&r=g","caption":"Parag Mehta"},"description":"Parag Mehta, the CEO and Founder of Positiwise Software Pvt Ltd has extensive knowledge of the development niche. He is implementing custom strategies to craft highly-appealing and robust applications for its clients and supporting employees to grow and ace the tasks. He is a consistent learner and always provides the best-in-quality solutions, accelerating productivity.","sameAs":["https:\/\/www.linkedin.com\/in\/paragcmehta"],"url":"https:\/\/positiwise.com\/blog\/author\/parag-mehta"}]}},"_links":{"self":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/4964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/comments?post=4964"}],"version-history":[{"count":15,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/4964\/revisions"}],"predecessor-version":[{"id":13110,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/4964\/revisions\/13110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media\/9919"}],"wp:attachment":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media?parent=4964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/categories?post=4964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/tags?post=4964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}