TypeScript and Vue with Frontend Masters

Watch the full course on the Frontend Masters website.

Prerequisites

• Git
• Node LTS
• Volar VS Code Extension
• TypeScript Vue Plugin (Volar)

Installation Instructions

Note: Make sure to change directories into the app directory before running npm install.

git clone https://github.com/bencodezen/typescript-and-vue-workshop.git
cd typescript-and-vue-workshop/app
npm install

To run the application, use:

npm run dev

Course Errata

Global State Management with Pinia

During the Global State Management with Pinia lesson, the user interface is not reactive. If you delete a restaurant or dish, you need to change views in order to see the updated UI. Follow the steps below to create a reactive interface:

In RestaurantPage.vue, import storeToRefs from Pinia:

import { storeToRefs } from 'pinia'

Update the restaurantList array:

const restaurantList = storeToRefs(restaurantStore).list

In the filteredRestaurantList computed property, update the filter method:

return restaurantList.value.filter((restaurant) => { ... })