This is a great way to start to get comfortable working with Vue, but now we want to expand on this to set up a more sophisticated development environment that will allow us to harness the full power of Vue.
Specifically, we want to start working with a build system that will provide the benefits outlined below.
Benefits of a build system
- Will integrate package management into our project so that we can manage outside dependencies such as Vue (and any other dependencies our applications might need).
- Will offer features commonly provided by build systems including:
- Preprocessing - e.g. SASS → CSS
- Bundling with tree-shaking, minification, chunk splitting, etc. to optimize page load speed
Tools we’ll use
When it comes to working with build systems there are a lot of technologies you can choose from, but we’ll narrow down our tools to the following:
NPM (Node Package Manager)
You can see if you have NPM installed by running the command
npm which (if installed) will yield something like the following:
> npm Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, [...etc...]
If you receive a message along the lines of command not found, it means you don’t have NPM installed so you’ll want to head over https://nodejs.org/en/download to download an installer and get it set up.
To get NPM you’re actually installing Node.js which comes bundled with NPM.
In order to run the
npm from command line, the path to the
npm executable must be in your computer’s PATH variable which specifies which paths to look in when executing command line programs.
Windows users - The installer automatically added NPM executable path to your computer’s PATH settings, so you don’t have to do anything else. Close and restart your command line program and you should have access to the
Mac users - You will need to manually update your computer’s PATH variable to include the following paths:
Go here for instructions on how to edit your PATH variable on a Mac...
After editing your PATH, restart Terminal and you should now be able to execute the
With NPM installed, you can use it to create a new Vue project using Vite. Vite is a build tool that will set up your project with all of the benefits outlined in the introduction to this guide.
To get started, first move to a directory on your computer where you want to set up the project then run the following NPM command:
> npm create vite@latest
First, it will ask you to name your project. For this example, let’s call our project
flashword-vite because we’ll model it after our existing FlashWord application:
? Project name: › flashword-vite
Next, it will prompt you to choose a framework to set your project up with. Use the arrow keys to select the second option,
vue, and hit enter.
? Select a framework: › - Use arrow-keys. Return to submit. vanilla > vue react preact lit svelte
? Select a variant: › - Use arrow-keys. Return to submit. ❯ vue vue-ts
At this point your application setup should complete with the following details:
npx: installed 6 in 1.947s ✔ Project name: … flashword-vite ✔ Select a framework: › vue ✔ Select a variant: › vue Scaffolding project in /flashword-vite... Done. Now run: cd flashword-vite npm install npm run dev
Per the instructions in the above output, we can first move into our new application:
> cd flashword-vite
npm install which will prompt NPM to pull in our outside dependencies (right now that’s just Vue).
> npm install > email@example.com postinstall flashword-vite/node_modules/esbuild > node install.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: firstname.lastname@example.org (node_modules/esbuild/node_modules/esbuild-android-64): [...other WARNs redcated for brevity...] added 33 packages from 56 contributors and audited 52 packages in 4.139s 4 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
- Applications managed by NPM will have a config file called
package.jsonin the root of the project where - amongst some other things - you list outside dependencies of the project.
- When prompted, NPM (via a command like
npm install) will download the outside dependencies and put them in a subdirectory in the project called
Finally, we can initiate the build system in our application with the following command:
> npm run dev
Which should yield something like the following:
vite v2.9.9 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 253ms.
Test it out...
If you load the URL it provides you (in this example that’s
http://localhost:3000) in the browser, you should see your brand new Vite-powered application.
Within your new project directory, find the file
src/components/HelloWorld.vue and make a change to the content and observe how the change is automatically reflected in the browser - no refresh required!
This is an example of ”hot reloading” aka Hot Module Replacement (HMR) which is one of the benefits we get with our new build system.
You can continue to access your site in the browser as long as your Vite dev server is still running in command line. To stop the server, use the keyboard shortcut ctrl + c. To restart the server, re-run the command
npm run dev.
We have now successfully set up a new Vue project using Vite. In the next part of this series we’ll dig into this new project and understand how it’s set up and how to customize it.