Vitesse Enterprise Starter

Live Netlify demo
Live Vercel demo

Features

• ⚡️ Vue 3

  • 🏃 Vite 2, pnpm, ESBuild

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 📲 PWA

• 🎨 Windi CSS

• 😃 Use icons from any icon sets, with no compromise

• 🌍 I18n ready

• 🗒 Markdown Support

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing

• 🖨 Server-side generation (SSG) via vite-ssg

• 🦾 TypeScript, of course

• 🦔 Critical CSS via critters

• 🖌️ SCSS support

• 👮🏻 Format and Lint with VSCode and CLI

  • 💾 Eslint, Import Sort*, Markdownlint, Prettier and, Stylelint.

• 🤖 Standards checking with pre-commit hooks. Test validation on pre-push with Husky

• ⚙️ Component and end-to-end testing with Cypress

• 📤 GitHub Actions and GitLab CI (wip)

• ☁️ Deploy on Netlify, zero-config - See Netlify Deployment

• ☁️ Deploy on Vercel - See Vercel Deployment

*CLI only. VSCode plugin does not support configuration files.

Pre-packed

UI Frameworks

• windicss
  • typography

Icons

• iconify - use icons from any icon sets 🔍Icônes
• unplugin-icons - icons as Vue components

Plugins

• pinia
• vue-router
  • vite-plugin-pages
  • vite-plugin-vue-layouts
• vite-plugin-pwa
• vite-plugin-windicss
• vite-plugin-md
  • markdown-it-prism
  • prism-theme-vars
• vue-i18n-next
  • vite-plugin-vue-i18n
• vueuse
  • @vueuse/head
• unplugin-vue-components
• unplugin-auto-import

Nice to haves

• Alias @ to <rootDir>
• Alias ~ to <rootDir>/src a.k.a. <srcDir>
• Predefined and fully typed global variables:
  • VITE_APP_VERSION is read from package.json version at build time
  • VITE_APP_BUILD_EPOCH is populated as new Date().getTime() at build time

Dev tools

• typescript
• cypress - E2E Testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
  • critters - Critical CSS
• recommended vscode extensions - Near IDE experience on VSCode

Variations

This template is strongly opinionated with my personal preferences and feature sets. It is a fork of the original template created by @antfu and also takes inspiration from vitesse-stackter made by @shamscorner.

For an up-to-date list of official and community contributions to the vitesse ecosystem, we recommend checking the official repository's variations section.

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 FranciscoKloganB/vitesse-enterprise my-vitesse-enterprise-app
cd my-vitesse-enterprise-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

• Select your git repository of choice
  • Using GitHub?
    • Remove .github/funding.yml file which contains the funding info
    • Remove .gitlab folder and .gitlab-ci.yml file
  • Using GitLab?
    • Remove the .github folder
  • Using neither? Perform both steps.
• Remove vercel.json or netlify.yml depending on your deployment provider.
• Rename name field in package.json
• Change the author name in LICENSE
• Change the title in App.vue
• Change the favicon in public
• Clean up the READMEs and remove routes
• Bump project dependencies (e.g.: dependabot) - We update them on a best-effort-basis, every now and then.

Usage

Development

Run and visit http://localhost:4000

pnpm dev

Code formatting

pnpm lint

Testing

# Interactive test run
pnpm test:components
pnpm test:e2e
# Headless ( can run both in one step with: pnpm test:ci )
pnpm test:ci:components
pnpm test:ci:e2e

Build for production

# Ouputs files to dist folder. Ready to be served in SPA mode.
pnpm build:prod
# Outputs files to dist folder which passed through the Vite SSG pipeline. Ready to be served.
pnpm build:prod:ssg

Previewing

# Runs project locally with files from dist folder
pnpm preview
# Can also run locally with HTTPS (may require sudo)
pnpm preview:https

Separation of Concerns

• Create separate folder for each module and place them under /src folder
• The following folders are auto imported within each module
  • components/
  • modules/
  • pages/
  • stores/
• Place all the layouts in the core/layouts folder
• Place all the custom styles in the core/assets/styles folder and import them into main.{css,scss}

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Deploy on Vercel

Vercel has some short-commings regarding pnpm based projects. After creating and importing the project on Vercel dashboard you will need to navigate to the project settings and override the Build Command and Install Command respectively, with the following bash commands:

  # Build Command
  npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build:prod:ssg
  # Install Command
  npm i -g pnpm && pnpm -i

Alternatevely, for zero configuration on import you need to alter package.json scripts to have a build and install entries with the commands above.

Why

On top of what was mentioned by Anthony Fu in the original post, working in conjunction with others often requires strict styling rules. Creating a seamless developer experience across VSCode, CLI and CI/CD consumes time. Vue, Vite and, Vitesse, are amazing tools for web developmen and are now my go to choices for development. To avoid repeating myself over and over again for to get this configurations going, I decided to fork Vitesse repository and create a baseline project for my own (or other people) use, enabling us to be vite. Pun intended.

Feedback

If you notice any bug, inconsistency or change for improvement, feel free to either create an issue so that I may try to fix it later or to propose a pull request with the changes.