Building your first Vue.js project
The time has come to start and build our companion application. If you are already familiar with Vue.js and how you create a new project using it, you can skip this section, pull the code from our repository, and start building the application in the next chapter.
When we create a new project using the vue create command, which we will see soon, we use the Vite build tool behind the scenes. Until recently, the best build tool was Webpack, and all frameworks, including Vue 2, used it to build their applications. But things have now changed, and Vite has taken over due to its no-config approach and extremely fast development server.
On its official site, Vite is described as follows:
Vite was created by Evan You (yes, the author of Vue) in an attempt to improve the development experience. Vite has been around for just a few years, but it has quickly gained popularity due to its low configuration and fast development server.
Vite, like Vue.js, is fully open source, and it also supports all major frameworks out of the box. Creating a project with Vite is quite simple, all you need is an IDE and a terminal.
Vue CLI GUI
You have probably heard that Vue CLI offered a visual tool that helped you manage the Vue application. Unfortunately, that project was linked to Webpack and has yet to be imported to Vue 3 and Vite.
Create Vue command
Because it is not possible to create a project in an existing folder, we are not able to re-use our previously downloaded application. We are going to complete this step in a different folder to ensure that you are able to get a project started from scratch. In the next chapter, we will pull the code directly from the companion application repository.
To create a new project with Vue, we first need to access the folder in which the project will be created. Please be assured that the CLI will create a new folder for your project, so you do not need to create a folder manually now, but just access the main folder in which the project should live. For example, I like to create all my projects in the Document folder, so I am going to access it like this:
// Mac users cd ~/Documents/ // Windows users cd %USERPROFILE%/documents
Now that we are in the correct folder, we can call the Terminal command required to create a new Vite project:
npm create vue@latest
Running the preceding command will generate a request to install the create-vue package:
Figure 3.1: The installation message triggered by the create vue command
To successfully install the project, we need to press y and proceed with the installation.
After a few seconds, the CLI will start and ask us questions that will help it scaffold the project to align with our needs:
Figure 3.2: The Vue CLI questions
As you can see, Vue projects come with a nice set of presets that help it to create a strong foundation for your next Vue project. Vue CLI provides options for the following settings:
- Project Name
- Typescript
- JSX support
- Router
- State Management
- Unit tests
- End to End tests
- Code quality
- Code formatting
The choices for these settings are completely up to you, and you should follow your personal needs and requirements. The ones that you see in Figure 3.2 are the settings that I have used to create the Companion App that we will use in the next chapter.
After pressing Enter and waiting for a few seconds, we should get some information about how to run our project. This requires us to access the folder, install the required packages, and run the development server.
First, let’s navigate to the folder that was created as part of our Vue project initialization, that is equal to your project name:
cd "vue-for-beginners"
Then, install all the packages required for the project to function. I have used npm in this instance, but you can use Yarn or PNPM:
npm install
Last, we just need to run this command to run the development server:
npm run dev
After these two commands, in less than a second you should see the following message displayed in your console:
Figure 3.3: Vite output of a successful run of the Vue development environment
Vite projects act differently from the previous Webpack projects that were run on port 3000 and run on port 5173. The local URL will be displayed in the console, as shown in Figure 3.3.
In our case, accessing the browser on localhost:5173 will show the following website:
Figure 3.4: Welcome page of a newly built Vue project
Congratulations on creating your first Vue project. This is going to be the first of many projects.
Vue project folder structure
In this section, we are going to quickly cover the structure of a new Vue project.
When a new project is created, it comes with a well-defined structure that can be used as a strong foundation for future development:
Figure 3.5: Folder structure of a newly created Vue project
We are going to explain the different folders and files to help you find anything you need from your new Vue project. We are going to do this in no particular order.
Root folder
The root folder of a Vue project includes a few configuration files. These are preset and pre-generated by the Vue creation package and do not need any further attention for the application to run smoothly. During the course of this book and your career, you will slowly be exposed to each of these configuration files and learn about their various options.
No touch zones
There are a couple of folders, such as .vscode, node_modules, and dist, that are what I call “no touch” folders. You may already be aware of these folders as they are created and managed by tools and software that you may have already used, such as Visual Studio Code, npm, or Vite, and should not be modified manually.
Public
The content of the public folder is going to be copied directly into the output folder after the project is built. This folder is very rarely touched by a developer but is very useful when there are files that are needed in the build output and not part of the Vue compilation. Example files for this folder are favicon and service worker.
Cypress
As shown in the installation guide, the newly created project comes with a preset end-to-end (E2E) testing framework using the tool of your choice. In our case, I selected Cypress and the CLI has created a folder and a sample test for me ready to be used.
SRC
This is where your source code lives. This is the main content of our application, and it is where you will spend most of your day-to-day work. Due to the importance of the folder, we are going to see its content and make sure we know how its files are structured:
Figure 3.6: Content of the SRC folder from a newly created Vue project
As before, let’s start from the root of the folder. This includes two files, main.js and App.vue. Main.js is the entry file of our application. This file is used to add new packages to our Vue instance and to load and set up global plugins, composable (function that leverages Vue’s Composition API to encapsulate and reuse stateful logic that we will introduce later in the book) and components. Next, we have App.vue. This is the first Vue entry point and is the component that will load and handle the rest of the Vue application.
Next up, we have the assets folder. This folder is used to load any assets, such as images, PDFs, and videos. The content of this folder is also copied in the output artifact of our build.
Further down the list, we have the components folder. This folder contains not only the set of components already available within the app, but also the __tests__ folder, which includes our unit tests.
The next two folders are router and stores. As the name suggests, they include the vue-router and the Pinia store code respectively. These are two core packages provided by the Vue.js core team and will be covered in detail in Chapter 10 and Chapter 11. Vue-router will be used to create navigation routes for our clients and help us manage our growing application, while Pinia will be used to create and manage data within the application.
Last but not least we have views. If you have had time to investigate this folder, you would have noticed that it contains simple Vue components. The reason for this folder is to separate simple component units (the ones stored in the components folder) actual routing pages. Making this separation helps to keep the code clean and delineate the routing of the application.
Your private playground
Even if the app we just created is not needed for the rest of the book, it could be useful to keep and use it as a playground to practice the topic that we will cover in the course of the book.
We have concluded our Vue project explanation, and you should now have the knowledge required to create a new Vue project from scratch. You should also know a little bit about Vite and be able to navigate the folder structure of a newly created Vue project. In the next section, we will dive into the code and start to build our first Vue.js component.
