Setting Up a Vue.js Project with Vite
In the project we have been working with so far, we have used a CDN link to access the Vue.js features. This setup is fine for smaller projects, or, if only requiring Vue.js for a small part of our website.
For larger projects we often need a better setup with more features and development tools. In addition, we need a way to split our project into smaller, component files to organize our code as the project grows.
A basic understanding of the command line / terminal is required for this section.
Why Vite?
Vite is now the recommended build tool for Vue.js applications. Created by Evan You (the creator of Vue.js), Vite offers extremely fast development server startup and hot module replacement (HMR) by leveraging native ES modules in the browser.
Vite provides:
- Lightning-fast cold server start.
- Instant hot module replacement (HMR).
- On-demand compilation.
- Server side rendering support.
- Built-in support for TypeScript, JSX, CSS pre-processors, and more.
- Flexible plugin system.
- Optimized build command powered by Rollup.
Even if you don't plan on using many of the plugins or features, you will most likely want a setup like this to allow us to use components more easily and build for production.
Prerequisites - Node.js
Before we get started with Vite, we need to ensure Node.js is installed on your system.
If you don't already have Node installed, or if you want to reinstall the latest version, head over to nodejs.org.
Node is a way of running JavaScript on the server. We won't be writing any Node.js code or server code, this is just a requirement behind the scenes.
Click on the current LTS version download, and this will download the installer for your operating system. The setup is straightforward and quick, you'll just need to click through the installer.
This will also install npm (Node Package Manager), which we will use to create our Vite project and install any additional packages we need.
Verifying installation
You can verify that both Node and npm are correctly installed by opening your terminal and running:
node -v
npm -v
Both commands should return version numbers. If you see an error, you'll need to correctly install Node and npm before continuing.
Creating a new Vue project
The upcoming project is a countdown app where we add events to display in date order, we can also see the number of days to the event:
Once Node.js and npm are set up, we can create a new Vue project in the terminal.
You can use any terminal of your choice. Mac users have options such as 'iTerm', or the built-in 'Terminal'. Windows users have a built in 'Command Prompt' (cmd).
📝 Note: Check out our Command Line course if required.
Navigate to the location you want to create your new project using the cd command (e.g. cd Desktop), followed by:
npm create vue@latest
This will prompt you to set up your project including the project name and any additional features. If you are unsure of any, select no and they can be added later if required. The project we will be creating will be named Vue-Countdown, but feel free to change if you prefer.
Use the following to navigate to your project location:
cd <your-project-name>
Install the required Node modules:
npm install
And start the development server using:
npm run dev
You should then see a link to open the new project in your text editor. Your Vue application will now be running on localhost, typically at port 5173 (http://localhost:5173).
In the next lesson, we'll take a closer look at this project structure and how to work with single-file components in Vue.