{"id":230,"date":"2022-05-11T08:29:50","date_gmt":"2022-05-11T08:29:50","guid":{"rendered":"https:\/\/felixaugenstein.com\/blog\/?p=230"},"modified":"2022-05-11T08:29:55","modified_gmt":"2022-05-11T08:29:55","slug":"create-a-vue-js-3-project-either-with-the-vue-cli-or-with-vite","status":"publish","type":"post","link":"https:\/\/felixaugenstein.com\/blog\/create-a-vue-js-3-project-either-with-the-vue-cli-or-with-vite\/","title":{"rendered":"Create a Vue.js 3 project either with the Vue CLI or with Vite"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>In this tutorial, we\u2019ll be covering two options to set up your Vue 3 project:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Vue CLI<\/li><li>Vite<\/li><\/ul>\n\n\n\n<p>For more information, take a look at the <a href=\"https:\/\/vuejs.org\/guide\/introduction.html\" target=\"_blank\" rel=\"noreferrer noopener\">Vue.js 3 documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vue CLI<\/h2>\n\n\n\n<p>If you have worked with Vue before, you\u2019ve likely used the\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/vuejs\/vue-cli\" target=\"_blank\">Vue CLI<\/a>\u00a0to set up your Vue project.<\/p>\n\n\n\n<p>Vue CLI is a command line interface for Vue development that can be used, for instance to create a Vue app.<\/p>\n\n\n\n<p>First, we have to make sure that we have the most up-to-date version of the\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.npmjs.com\/package\/@vue\/cli\" target=\"_blank\">Vue CLI<\/a>\u00a0and we can do that by running\u00a0the following command in our terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm update -g @vue\/cli<\/code><\/pre>\n\n\n\n<p>OR<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i -g @vue\/cli<\/code><\/pre>\n\n\n\n<p>The next command to create our project is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> vue create &lt;PROJECT-NAME><\/code><\/pre>\n\n\n\n<p>If the update to the latest Vue CLI was successful, you should see something like the following output, where you have an option to choose Vue 3. Choose Vue 3 with the up and down keys, then hit enter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>? Please pick a preset: \n  Default (&#91;Vue 2] babel, eslint) \n\u276f Default (Vue 3) (&#91;Vue 3] babel, eslint) \n  Manually select features <\/code><\/pre>\n\n\n\n<p>Now our app should build. When it\u2019s finished, you just have to go inside our project directory and then run the Vue app! The commands for that are:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd &lt;PROJECT-NAME>\nnpm run serve<\/code><\/pre>\n\n\n\n<p>Now navigate to <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:8080\/\" target=\"_blank\"><code>http:\/\/localhost:8080\/<\/code><\/a> to see your new Vue 3 app! That is how easy it is to set up a Vue 3 project with the Vue CLI, now let&#8217;s continue with Vite.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vite<\/h2>\n\n\n\n<p>You now may be asking yourself: <em><strong>&#8220;What is the difference between the Vue CLI and Vite and which one should I choose?&#8221;<\/strong><\/em><\/p>\n\n\n\n<p>Well, the Vue CLI\u00a0is built on top of webpack, it is a module bundler that will bundle your entire Vue project on startup, hot reloads, and compilation.<\/p>\n\n\n\n<p><strong>Vue Vite instead offers faster startup, hot reload, and compilation speeds than bundler-based solutions during development.<\/strong><\/p>\n\n\n\n<p>Vite eliminates this bundling process and only compiles code on-demand \u2013 this means that only code currently impacting the current screen is compiled. Therefore, you don\u2019t have to wait for your entire project to be bundled to start developing.<\/p>\n\n\n\n<p>Since we are only building a small app &#8211; or if you are working on a small project &#8211; it does not really make a difference. Only when working with large projects it can take a longer time if you are using the CLI instead of Vite.<\/p>\n\n\n\n<p>Now let&#8217;s create a project using Vite.<\/p>\n\n\n\n<p>To do this, run the following command (make sure to run it outside your other Vue app created with the Vue CLI):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init vite-app &lt;project-name><\/code><\/pre>\n\n\n\n<p>Afterwards, we just have to go into our project folder, install the dependencies, and then run our Vue app with the following commands (or the respective <code>yarn<\/code> commands):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd &lt;project-name>\nnpm install\nnpm run dev<\/code><\/pre>\n\n\n\n<p>Now, if you navigate to\u00a0<code><a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a><\/code>\u00a0 you should see the a slightly different Vue app, this time created using Vite.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting Started In this tutorial, we\u2019ll be covering two options to set up your Vue 3 project: Vue CLI Vite For more information, take a look at the Vue.js 3 documentation. Vue CLI If you have worked with Vue before, you\u2019ve likely used the\u00a0Vue CLI\u00a0to set up your Vue project. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,47,46],"tags":[],"class_list":["post-230","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","category-vite","category-vue-js"],"_links":{"self":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":3,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/230\/revisions\/233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}