A new Vue project

We’re ready to initialize a new project, but we’ll use the Vuetify installer this time. Vuetify is a wrapper around the Vue installer, with presets for common Vuetify project configurations. In the CLI, type the following command to proceed to the next steps of the installer wizard:

npm create vuetify

Now, do the following:

1. Choose vue-meal-planner as the project’s name.
2. Use the Base (Vuetify, VueRouter) installation.
3. Select TypeScript using the arrow keys.
4. Select the npm option to install the dependencies.

If you navigate to the new projects folder, you can run the local development server with npm run dev. The result should look very similar to what’s shown in Figure 5.1:

Figure 5.1 – The initialized Vuetify application

Before we continue, we also need an API key to make the example a bit closer to reality. This will also allow us to search for actual recipes. To register...