This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint
Lint with ESLint
npm run lint
- TailwindCSS - for the project styling
- Vue-router - for pages navigation
Any system with atleast 4GB RAM, a code editor and a browser
- User opens the website sees the home page with tools on toolhub and a section for tools with missing details
- User clicks on a tool with missing details to see the details page
- User can click on the edit button to upload missing fields or change field details
- User can click on the records link in the navigation to see the tools metrics which includes:
i. Total number of Tools in the records ii. Number of tools with missing information iii. Percentage of tools with missing information compared with the total number of tools in the records iv. Number of tools edited using this record management tool
- User can click on leaderboard link on the navigation to see the list of tools editor, date and number of edits they made.