planets

My planets website with Vue/Vite implementation. Using three.js and it looks like this:

Screen.Recording.2025-02-19.at.15.03.21.mov

Also you can click on the buttons on the top left of the website, it will zoom into the planet and display some text and go back and stuff.

Screen.Recording.2025-02-19.at.15.07.01.mov

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for `.vue` Imports in TS

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 Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Compile and Hot-Reload for Production Manual Testing

pnpm prd

Type-Check, Compile and Minify for Production

pnpm build

Checking production build

pnpm preview

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
pnpm build

# Runs the end-to-end tests
pnpm test:e2e
# Runs the tests only on Chromium
pnpm test:e2e --project=chromium
# Runs the tests of a specific file
pnpm test:e2e tests/example.spec.ts
# Runs the tests in debug mode
pnpm test:e2e --debug

Lint with ESLint

pnpm lint

ThomasHarris0147/planets