The Vue Weather App is the application created for the following blog post on TestDriven.io:
A Guide to Unit Testing Vue Components
The Vue Weather App is deployed via Netlify:
The Vue Weather App allows the user to search for the current weather for a city. This application was developed to provide examples of how to unit test Vue components.
This guide uses the following technologies/tools:
- Vue 3 (with the Composition API)
- vite
- vitest
- vue-test-utils
These instructions demonstrate how to create the Vue Weather App locally on your computer.
The Vue tooling utilizes npm for its set of tools to help develop Vue applications.
Before starting, make sure that the following tools are installed on your computer:
The first step in this installation process is downloading Node and npm (Node Package Manager); they are conveniently installed together. Follow the installation instructions at https://nodejs.org/en/.
After the installation is complete, you can check that Node is installed by going to your command line (i.e., terminal) and checking the version of Node and npm that are installed:
$ node -v
v16.16.0
$ npm -v
8.13.2If you would like to run the Vue Weather App on your local machine, you will need to follow these instructions:
$ git clone [email protected]:patkennedy79/vue-weather-app.git
$ cd vue-weather-app
$ npm installAdditionally, you will need to create a free account at Open Weather and get an API key for using their API service. The API key can be found in your account page under the 'API Keys' tab. The API key needs to be included via the VITE_OPEN_WEATHER_API_KEY environment variable. For local developement, create a env.local file in the top-level folder of the project:
VITE_OPEN_WEATHER_API_KEY=<INSERT_OPEN_WEATHER_API_KEY>All the npm commands that can be run for the project are defined in the "scripts" section of package.json.
npm run devnpm run buildnpm run test:unitnpm run test:coveragenpm run test:uinpm run lintVue Documentation: https://vuejs.org