This template should help get you started developing with Vue 3 and Typescript in Vite.
Uses the additional following libraries:
- Tailwind CSS (because utility-CSS scales better)
- Vitest (because running tests should be fast)
- Prettier (auto-formats when save in VS Code)
- ESLint (Fix problems in your TypeScript Code)
- simple-import-sort (Sort import statements)
- unplugin-icons (iconify: the definitive icon library)
Make sure you have git and node installed.
Navigate to your desired folder to save the files and execute the following commands:
npx degit https://github.com/linusang/vite-starter-kit.git
// say yes if prompted
npm install
// if you use git
git init
// running the app
npm run dev
// open browser and navigate to http://localhost:3333
Don't want to clone to your desktop? Just run in the browser!
https://stackblitz.com/github/linusang/vite-starter-kit
- Vitest to test business logic (use
npm run vitest
)
- Uses Tailwind CSS because of this article
- Makes use of JIT feature
VSCode + Vue Language Features + Prettier + ESLint.
- Go to icones.js.org.
- Select a collection, then do
npm install @iconify-json/[collection id]
if you don't have the collection installed. - Import in Vue file, eg:
import HeroiconsRocketLaunchSolid from '~icons/heroicons/rocket-launch-solid'
- In template, use
<HeroiconsRocketLaunchSolid/>
If you need to install the latest dependencies you can run npx taze
to check which npm packages are outdated. Then run npx taze -w
if you are sure that the minor versions can be overwritten in package.json. Thereafter, run npm install
to install the latest packages.