This template should help get you started developing with Vue 3 in Vite.
-
馃彈 Advice on how to treat certain plants 馃尫
-
馃彈 Import information for different plants 馃尰
-
馃彈 Create, edit and delete plant entries 馃崈
-
馃彈 Overview of your plants 馃槻
-
馃彈 Reminders when you should look after your plant next based on entered parameters 馃尩
-
馃彈 Dark Mode 馃殌
-
馃彈 and more to come...
馃 Stay on top of the plant game and lean back since the app reminds you when it's time to pour them again 馃挧馃毎
-
馃敟 Use the new
<script setup>
syntax -
馃馃徎 Reactivity Transform enabled
-
馃摜 APIs auto importing - use Composition API and others directly
-
鈿欙笍 Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions
-
馃 TypeScript, of course
-
鈽侊笍 Deploy on xxx, zero-config
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.
pnpm i
pnpm run dev
pnpm run build
Run Unit Tests with Vitest
pnpm run test:unit
Run End-to-End Tests with Cypress
ppnpm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing
Lint with ESLint
pnpm run lint