Mocking up web app with Vitesse(speed)
-
📲 PWA
-
🎨 UnoCSS - the instant on-demand atomic CSS engine
-
🔥 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
-
🦔 Critical CSS via critters
-
🦾 TypeScript, of course
-
⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions
- UnoCSS - The instant on-demand atomic CSS engine.
- Iconify - use icons from any icon sets 🔍Icônes
- Pure CSS Icons via UnoCSS
- 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
- Cypress - E2E testing
- pnpm - fast, disk space efficient package manager
vite-ssg- Static-site generation- critters - Critical CSS
- Netlify - zero-config deployment
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
<script setup>IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- ESLint
As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!
- vitesse-lite - Lightweight version of Vitesse
- vitesse-nuxt3 - Vitesse for Nuxt 3
- vitesse-nuxt-bridge - Vitesse for Nuxt 2 with Bridge
- vitesse-webext - WebExtension Vite starter template
Vitesse requires Node >=14
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit jaronwanderley/vitesse-neutralino my-app
cd my-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
neu update # If you don't have Neutralino CLI installed, run: npm i -g @neutralinojs/neuWhen you use this template, try follow the checklist to update your info properly
- Change the author name in
LICENSE - Change the title in
App.vue - Remove the
.githubfolder which contains the funding info - Change the manifest.name and manifest.short_name in
vite.config.ts - Change the favicon.svg, favicon-dark.svg, favicon.ico in
public - Change the pwa-192x192.png and pwa-512x512.png in
public - Change applicationId in
neutralino.config.json - Change modes.window.title in
neutralino.config.json - Change cli.binaryName in
neutralino.config.json - Clean up the READMEs and remove routes
And, enjoy :)
To run on web browser just run and visit http://localhost:3333
pnpm devTo run on Neutralino application with hotreloading run
pnpm neupnpm build && pnpm neuTo build the PWA App, run
pnpm buildAnd you will see the generated file in dist/www that ready to be served.
To build the Desktop Application
pnpm neu:buildI have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. (see community maintained variation forks)