Nuxt 3 Starter with Vite

Nuxt 3 POC created by Vite, with eslint, prettier, tailwind, and more.

中文版請走 👉 這裡

Todo List

Core (JavaScript, Vue, TypeScript)

• eslint
• prettier
• event bus alternatives
  • mitt
  • inject & provide
  • pinia
• disable Nuxt auto imports
• Component "go to definition" error

Style

• tailwindcss
  • custom gradient color
  • CSS class name sorting
• icons
• scrollbar style
• CSS properties sorting with stylelint

Testing (Maybe)

• component testing
• E2E testing
  • playwright
  • cypress
  • puppeteer

Other

• Internationalization aka i18n
• Accessibility aka a11y
• Dark theme
• Git push validation (husky)

Solutions

eslint & prettier setup

• [Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 環境建置 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

"Go to definition" of components in VS Code

No resolve yet in Nuxt 3, but works for Vue 3 with Volar.

Ref:

• "Go to definition" doesn't work in .vue files · Issue #707 · vuejs/vetur

CSS Sorting

To sort in CSS class, using prettier-plugin-tailwindcss recommended by Tailwind official site.

To sort CSS properties in style of component, using stylelint-order with rules from stylelint-config-idiomatic-order

Git Validation

• Husky - Git hooks
• Using Husky git hooks with GitKraken - DEV Community 👩‍💻👨‍💻