Vite-CVP

An opinionated Vite Starter Template
Inspired by Vitesse

🔥 This repo consists 3 kinds of templates corresponding to each branch:

• 👉 (now) master (demo) - regular SPA
• ssr--fastify (demo) - SSR with Fastify + deploy on Heroku
• ❌ (maintaining) ssr--netlify-function (demo) - SSR with Netlify platforms (static hosting + functions)

✨ Features

• ⚡️ Vue 3, Vite 2, ESBuild - born with fastness

• Vue 3 eco-system

  • 🚀 Vue Router - the official router for Vue.js
  • 🗃️ Pinia - the Vue Store that you will enjoy using

• Vue 3 extensions

  • 💡 VueUse - collection of essential Vue Composition Utilities
  • 🌍 Vue I18n - Internationalization plugin for Vue.js

• 🎨 TailwindCSS - utility-first CSS framework for rapidly building custom user interfaces

• 😃 Use icons from Iconify's rich icon sets

• 📝 Use Markdown as Vue component

• 🛡️ TypeScript support

• ☁️️ Easily deploy on Netlify without manual server setup

• 💪 Good practices from official libs/plugins/repos

• 👍 Always update to latest version of dependencies

📦 Pre-packed

Vue 3

• Vue Router
• Pinia
• VueUse
  • @vueuse/head
• Vue I18n

Vite

• unplugin-vue-components

  Note: Only enable for auto-importing Iconify icons via unplugin-icons. Regular components should be explicitly imported for better IDE support.

• unplugin-icons
• vite-plugin-vue-i18n
• vite-plugin-md

UI

• TailwindCSS
  • @tailwindcss/typography
  • @tailwindcss/forms
• Iconify
• markdown-it
  • markdown-it-prism & prismjs
  • markdown-it-prism-backticks
  • markdown-it-attrs
  • markdown-it-anchor

Coding Style

• Prettier
• ESLint with @antfu/eslint-config

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• VS Code Extensions
  • Volar - Explore high-performance tooling for Vue
  • Tailwind CSS IntelliSense
  • Headwind - An opinionated class sorter for Tailwind CSS
  • ESLint
  • Prettier - Code formatter

📥 Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with a cleaner git history

npx degit cuongvuong-phoenix/vite-cvp my-vite-cvp-app
cd my-vite-cvp-app
pnpm install

🗹 Checklist

When you use this template, try following this checklist to update your info properly:

• Rename name, license, version fields in package.json
• Change the author name in LICENSE file
• Change the favicon in public folder
• Remove .github folder which contains GitHub related content
• Clean up the README

and... enjoy :)

💁 Usage

Development

Just run

pnpm dev

and follow dev-sever logs.

Build

To build for production, run

pnpm build

and you will see the generated files in dist that ready to be served.

Preview

You can preview your production build by running:

pnpm serve

Deploy on Netlify

Create your site at Netlify, connect to your repo & hit OK, your app will be live in a minute.

Some configs in Netlify UI will be overrided by netlify.toml file. Check all configs avaiable for more details.

❓ Why this exists

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.