Initial Setup - Vue

Recently, I found myself wanting to learn Vue.js. A few teams at work use it, and while that is not my area of expertise (the font-end), I want to learn more with what is going on and try to do my own website. This will be my own journey. There will probably be my own colorful commentary as well. Feel free to ignore this or just comment on everything. Vue.js has a great website, vuejs.org, that I would recommend. This site has a great “quick start guide”, which this blog post will be similar. The VueJS.org website also has a great tutorial and some great examples, which the other posts will be similar to. I am not going to try to reinvent the wheel, but share my knowledge. Those other posts will be more indepth and also have less color-commentary.

Folder Placement

Go to where you want the project to be located. Everyone is different, and even on every computer this will be slightly different. This is not necessarily the place for that discussion.
However, I am going to address it here breifly, and hopefully succinctly, so that the new person can make sense of this. There should be some place on your local computer that you want the files to be placed. This is not going to be the server that will server your production code, nor will it be the repo for your version control. This will be connected to those, and again, that is a different conversation. Typically, I like to have a “Dev” folder. On one machine, I have a separate drive that is named “dev”, and on another, the “dev” directory is under my “home”, and on another its just off of my root. There is reasons for each of these situations, as well as many others. Do whatever works for you. Regardless of where that “Dev” directory is, everything is setup the same for me after that. That is probably the most important thing, so it becomes more of a muscle memory. Personally, I split my “Dev” directory based on the language. This helps me stay organized. I used to organize it by “project”, but I found too often that I would be doing a rewrite and then I had to append the language names, or state if its front-end and back-end as it was previously a mono-repo with everything under the sun in one directory. Breaking it up by language works for me. After that, I will have some separation of “work” and “personal” and “tests”. Often its just based on the git host name, mycompany.bitbucket.com vs github.com. I like to have a separate “tests” folder here where its more little tests. I will write a little app to see how a string is converted or something small, and get an output, or to test a library or function. Its not a full fledged app, but its more like that junk drawer scratch pad catchall that we all have somewhere. This is mine. From there, I will then just have a folder named the project. WAIT! DO NOT CREATE the directory just yet. Based on what I mentioned above, my directory would look something like this… ~/Dev/VueJS/github.com/vue-project However, we don’t want to just create the vue-project directory. One of my annoyances with NPM and so many of these newer build/create processes is ALL that is required. We are going to do an npm create vue@latest command, which will prompt you for your project name ( vue-project or whatever you want it to be), and as it does that IT WILL CREATE THE FOLDER FOR YOU. If you run that command and already have that directory, it will give you a warning, possibly an error depending on what you did, and possibly not create things. When you go through this prompt, say “No” to everything you don’t know about. For the purpose of this series, we will say “NO” to everything as well. We will also call this project “vue-football-squares” as my goal is to create a football squares page.

Summary… Go to the directory you want to create the project in. Do not create the project directory. Instead, run the npm create vue@latest command.

NPM Create

Lets breakdown the npm create command and the options that you will be presented with. npm create will do exactly what it says here, it will create a project directory with all the necessary files for the type of project that you have listed after that. In this case its vue and we want the latest version of vue. We can substitute latest for another valid version of vue, if we need to. If we need to create a legacy project, or maybe our org only wants us to stay at certain versions until a certain time, then this is where you will define that.
For instance, the current version of vue as of writing this in January 2025 is 3.5.13. When I do npm create vue@latest it will create the project using 3.5.13. I may want to be consistent with other projects from my team and do npm create vue@3.4.38, or I might want to write something for the legacy app and do npm create vue@2.19, or if there is current a beta going on for the next version, I may want to make sure that I am on the most stable version, though the latest flag won’t do any ‘beta’ releases. Instead of vue, we can also create any one of many different types of projects. Just to name a few, we have angular, react, preact, npx, jquery, and many more. There is a huge list, we won’t get into them. There is also many more things you can do with the npm create command, and many sources you can pull from. This is for another blog post. Lets go through the prompts for when we do our npm create vue… First we have “Project Name”, which defaults to “vue-project” if you just hit enter. You don’t have to delete what is typed, you need to just start typing to create a different project name.