frandiox / Vitessedge Template
Programming Languages
Projects that are alternatives of or similar to Vitessedge Template
Vitessedge
Deploy your fullstack SSR apps to Cloudflare Workers using Vitedge.
Features
-
⚔️ Edge-side rendering in Cloudflare Workers via Vitedge, with edge cache and HTTP/2 server push
-
📲 PWA
-
🎨 Windi CSS - on-demand Tailwind CSS with speed
-
🌍 I18n ready with different routes for each language.
-
🔥 Use the new
<script setup>
style -
🦾 TypeScript, of course
-
☁️ Deploy on Cloudflare Workers, minimal setup
Pre-packed
UI Frameworks
-
Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bundle additional features!
- Windi CSS Typography - similar to Tailwind CSS Typography but for Windi CSS
Icons
- Iconify - use icons from any icon sets 🔍Icônes
-
vite-plugin-icons
- icons as Vue components
Plugins
-
Vue Router
-
vite-plugin-pages
- file system based routing -
vite-plugin-vue-layouts
- layouts for pages
-
-
vite-plugin-components
- components auto import -
vite-plugin-pwa
- PWA -
vite-plugin-windicss
- WindiCSS support -
vite-plugin-md
- Markdown as components / components in Markdown-
markdown-it-prism
- Prism for syntax highlighting -
prism-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
-
@vueuse/head
- manipulate document head reactively
Coding Style
- Use Composition API with
<script setup>
SFC - ESLint with @antfu/eslint-config-vue, single quotes, no semi.
Dev tools
- TypeScript
- Vitedge - Edge-side rendering
- Wrangler - deploy to Cloudflare Workers
- VS Code Extensions
Variations
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 are also welcome!
- vitesse-lite by @kn0wn
- vitesse-addons by johncampionjr - additional options for integrations, including Prettier and Storybook
Try it now!
GitHub Template
Create a repo from this template on GitHub.
Clone to local
If you prefer to do it manually with the cleaner git history
npx degit frandiox/vitessedge-template my-vitesse-app
cd my-vitesse-app
npm i
Checklist
When you use this template, try follow the checklist to update your info properly
- [ ] Rename
name
field inpackage.json
- [ ] Change the author name in
LICENSE
- [ ] Change the title in
index.html
- [ ] Change the favicon in
public
- [ ] Remove the
.github
folder which contains the funding info - [ ] Clean up the READMEs and remove routes
And, enjoy :)
Usage
Development
Just run and visit http://localhost:3333
npm run dev # SSR development
npm run dev:spa # SPA without SSR
Build
To build the App, run
npm run build
And you will see the generated files in dist
, and some of these files will be moved to serverless
for deployment.
Deploy on Cloudflare Workers
- Create your Cloudflare account.
- Install Wrangler CLI.
- Modify the
account_id
in wrangler.toml. Then:
npm run preview # Simulate Worker environment locally
npm run deploy
Why
I 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)