Getting Started with Vue

Initial Setup#

• Install Visual Studio Code
• Install Chocolatey to manage all software in Windows
• Install Git using Chocolatey
• Install nvm , tool to manage npm versions, using Chocolatey

Using Vue in Visual Studio Code#

Install Volar

Browser Setup#

Main guide from official Vue’s documentation: Browser Devtool

It’s recommended to test the app in all popular browsers (Chrome, Edge, Safari, Firefox in that order), but you might not need to install devtool in all browsers, but only the one you usually use.

Use Git#

Refer to Getting Started to start.

Getting started with Vue#

• Vue Tutorial
• Vue Documentation
• Vue Cheat Sheet
• Getting Started with Vite - building tool for Vue

Advanced Topics#

• State management with Pinia
• Routing with Vue-Router
• Server-Side Rendering with Vite

Unit Testing#

• Vue Introduction to Testing
• Vitest, testing tool for Vite projects
• Tutorial for Unit Testing with Vue + Vite + Vitest

Mock API#

1. Create your first mock API with Mockoon
2. Mockoon GUI cheat sheet
3. Mockoon. How to create your local API server in 2 minutes

Create Apps#

Example:

• Building to-do list with Vue and Pinia

Exercise

1. Follow the example to create the first to do list app.
2. Create mock API for Todo app.
3. Change the Todo app to call mock API.
4. Create Unit Testing.
5. Push your code to your personal repository in TSP’s Gitlab.