Watch the full course on the Frontend Masters website.
Note: Make sure to change directories into the
app
directory before runningnpm 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
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) => { ... })