password-generator

This is a solution to the Password generator app. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Screenshot

Links

• demo
• Github repo

Built with

• ESLint - For coding styles
• Fort-awesome - icons
• Generate-Password-Browser - A 3rd party packages for generating password
• Pinia - For managing global states
• Prettier - For coding styles
• Vite
• Vitest + Vue Test Utils + JSDom - For testing
• Sass - For styles (CSS-preprocessor)
• Vue3 - JS Library

What I learned

1. Syntax of composition API: ref, reactive, computed, defineProps, emit
2. use stores by Pinia in composition syntax: defineStore, useStateStore, storeToRefs
   • watch this video to know how to get start using pinia
3. make rwd layouts
4. change browser default component styles, like: input-range-slider and checkbox
   • how to change checkbox color
   • how to change range slider color
5. use scss variables in global vue project
6. use scss styles in global vue project
   • How to use scss in global whole project
7. how to copy text to browser clipboard

   navigator.clipboard.writeText("text-here");

8. use testing tools for testing vue component
9. deploying on github action
   • how to use github action
10. vue unit test

Deploy

This website is deployed on Github pages by Github action. Learn how to use.

Useful Resources

1. Frontend Mentor - password generator app
2. How to use Github CD for github pages.
3. Vue school - how to access pinia states in components.
4. Vue3 composition API - ref or reactive, which one to choose?
5. remove vue-eslint multi word component naming rules.
6. Pinia Official Guide - how to get start to use store.
7. How to use scss in global whole project.
8. Conquering Responsive Layouts - tutorial to teach you how to create a RWD website.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).