https://github.com/bencodezen/typescript-and-vue-workshop
https://github.com/bencodezen/typescript-and-vue-workshop
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bencodezen/typescript-and-vue-workshop
- Owner: bencodezen
- Created: 2022-08-30T13:49:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-22T16:14:14.000Z (almost 2 years ago)
- Last Synced: 2025-01-26T09:28:53.982Z (12 months ago)
- Language: Vue
- Size: 132 KB
- Stars: 24
- Watchers: 4
- Forks: 45
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeScript and Vue with Frontend Masters
Watch the full course on the [Frontend Masters website](https://frontendmasters.com/courses/vue-typescript).
## Prerequisites
- [Git](https://git-scm.com/)
- [Node LTS](https://nodejs.org/en/)
- [Volar VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
## Installation Instructions
> Note: Make sure to change directories into the `app` directory before running `npm install`.
```bash
git clone https://github.com/bencodezen/typescript-and-vue-workshop.git
cd typescript-and-vue-workshop/app
npm install
```
To run the application, use:
```bash
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:
```javscript
import { storeToRefs } from 'pinia'
```
Update the `restaurantList` array:
```javascript
const restaurantList = storeToRefs(restaurantStore).list
```
In the `filteredRestaurantList` computed property, update the `filter` method:
```javascript
return restaurantList.value.filter((restaurant) => { ... })
```