π Opinionated Vue + Vite Starter Template with SSR in Node.js
MIT License
Vue + Vite + SSR template based on @antfu's Vitesse with
vite-ssr
.
π File based routing
π Layout system
π² PWA
π¨ Windi CSS - on-demand Tailwind CSS with speed
π I18n ready
π Markdown Support
π₯ Use the new <script setup>
style
π¨ Server-side rendering (SSR) in Node.js via vite-ssr
π¦Ύ TypeScript, of course
βοΈ Deploy on Vercel, minimal config
vite-plugin-icons
- icons as Vue componentsvite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pagesvite-plugin-components
- components auto importvite-plugin-pwa
- PWAvite-plugin-windicss
- WindiCSS supportvite-plugin-md
- Markdown as components / components in Markdown
markdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variablesvite-plugin-vue-i18n
- Vite plugin for Vue I18n@vueuse/head
- manipulate document head reactively<script setup>
SFC
vite-ssr
- Server-side renderingAs 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!
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit frandiox/vitesse-ssr-template my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
When you use this template, try follow the checklist to update your info properly
name
field in package.json
LICENSE
App.vue
public
.github
folder which contains the funding infoAnd, enjoy :)
Just run and visit http://localhost:3333
pnpm dev # SSR development
pnpm dev:spa # SPA without SSR
To build the App, run
pnpm build
And you will see the generated files in dist
, and some of these files will be moved to serverless
for deployment.
Go to Vercel and install its CLI. Then:
pnpm preview # Simulate Vercel environment locally
pnpm deploy
pnpm deploy:prod
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)