Like Vitesse, but with Tailwind CSS, Heroicons and Headless Ui
-
📲 PWA
-
🎨 Tailwind CSS - utility-first CSS framework
-
🔥 Use the new
<script setup>
syntax -
🤙🏻 Reactivity Transform enabled
-
📥 APIs auto importing - use Composition API and others directly
-
🖨 Static-site generation (SSG) via vite-ssg
-
🦾 TypeScript, of course
-
⚙️ Unit Testing with Vitest
-
☁️ Deploy on Netlify, zero-config
- Tailwind CSS - utility-first CSS framework.
- Vue Router
vite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pages
- Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
unplugin-vue-components
- components auto importunplugin-auto-import
- Directly use Vue Composition API and others without importingvite-plugin-pwa
- PWAvite-plugin-md
- Markdown as components / components in Markdownmarkdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variables
- Vue I18n - Internationalization
vite-plugin-vue-i18n
- Vite plugin for Vue I18n
- VueUse - collection of useful composition APIs
vite-ssg-sitemap
- Sitemap generator@vueuse/head
- manipulate document head reactively
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
- TypeScript
- Vitest - Unit testing powered by Vite
- pnpm - fast, disk space efficient package manager
vite-ssg
- Static-site generation- Netlify - zero-config deployment
- VS Code Extensions
Just run and visit http://localhost:3000
pnpm dev
To build the App, run
pnpm build
And you will see the generated file in dist
that ready to be served.
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.