vue3-template is a Vite-powered Vue 3 starter template that scaffolds a production-ready project with Tailwind CSS, PNPM, Vue Router, auto-imports, and built-in deployment actions for GitHub Pages and Netlify.
What is vue3-template?
vue3-template is a Vue 3 starter template created by developer lecoueyl that combines Vite, Vue 3, and Tailwind CSS with a preconfigured toolchain for linting, auto-imports, and theme switching. It takes a fresh project scaffold via pnpx degit lecoueyl/vue3-template my-project and produces a runnable Vue 3 single-page application with a GitHub Actions workflow that builds to the gh-page branch on every push to main. The template runs on Node.js and uses PNPM as its package manager, with an accompanying Netlify deployment button for one-click CI setup.
Key Features
- Vue 3 + Vite — Built on Vue 3's Composition API with Vite as the dev server and bundler, providing fast hot module replacement and modern ES module output.
- PNPM package management — Uses PNPM for installation and dependency management, which is faster and more disk-efficient than npm or Yarn.
- Vue Router — Includes Vue Router (the Vue 3-compatible version) for client-side routing, letting you add pages and navigation out of the box.
- Auto import — Uses
unplugin-auto-importto automatically import Vue APIs likerefandcomputed, eliminating manual import statements in components. - Tailwind CSS — Comes with Tailwind CSS preconfigured for utility-first styling, including support for light and dark mode via a custom theme composable.
- ESLint + Airbnb + stylelint — Preconfigured ESLint with the Airbnb JavaScript style guide, Tailwind CSS rules, and stylelint for CSS linting, keeping code consistent.
- Light and dark mode composable — Includes a theme composable that toggles between light and dark modes, linked to Tailwind's
darkvariant. - Inter var font — Bundles the Inter variable font by Rasmus Andersson for a clean, system-like typography without external font requests.
- GitHub Pages action — Ships a GitHub Actions workflow that builds the project and publishes it to the
gh-pagebranch, plus a Netlify Deploy to Netlify button for alternative hosting.
Who is it for?
- Vue 3 developers who want a ready-made starting point with Vite, Tailwind, and Vue Router already wired together, so they can skip repetitive setup.
- Teams deploying to GitHub Pages that need a project page (or user page) workflow; the template supports a
VITE_BASE_PUBLIC_PATHsecret to handle subpath routing for repository-hosted sites. - Developers who prefer PNPM for its speed and disk usage, and want a template that commits to PNPM rather than npm.
- Hobbyists and educators building small static frontends who want a free, zero-cost hosting path via GitHub Pages or Netlify.
What can you do with vue3-template?
- Frontend developers: scaffold a new Vue 3 project in one command, then customize the Tailwind theme and component styles to match a design brief.
- Open-source maintainers: use the template as the base for a Vue 3 component library or documentation site, with auto-import and linting already configured for contributors.
- Prototypers: quickly spin up a lightweight single-page app with client-side routing and deploy it to Netlify using the one-click button, then iterate on the live site.
How does vue3-template work?
Scaffold a project by running pnpx degit lecoueyl/vue3-template my-project and moving into the new directory. After pnpm install, the dev server starts with pnpm run dev. For production, the included GitHub Actions workflow runs on pushes to main and builds to the gh-page branch, or you can click the "Deploy to Netlify" button to set up continuous deployment from the repository.
FAQ
Is vue3-template free to use?
Yes, the template is open source under a permissive license and costs nothing to use or modify. Hosting costs are zero if you deploy to GitHub Pages or use Netlify's free tier.
How do I deploy vue3-template to GitHub Pages?
Push to the main branch and the included GitHub Actions workflow automatically builds the project and publishes it to the gh-page branch. For a project page, add a repository secret named VITE_BASE_PUBLIC_PATH with a value like /repository-name/ so the base path is correct.
Does vue3-template include a router?
Yes, Vue Router is included as a dependency, giving you client-side routing capabilities in a Vue 3 app. This lets you structure multi-page experiences without adding the library yourself.
What package manager does this template use?
PNPM. The scaffold instructions use pnpx degit to fetch the template, and all dependency commands run through pnpm (for example, pnpm install and pnpm run dev).
