Overview

This repository consists of three different templates for building Vue 3 apps using Vite 2 and ESBuild. Each template corresponds to a different branch. The “master” branch is a regular single-page application (SPA), the “fastify” branch is a server-side rendered (SSR) app using Fastify and can be deployed on Heroku, and the “ssr-netlify-function” branch is an SSR app using Netlify for static hosting and functions.

Features

• Vue 3, Vite 2, ESBuild: Built with the latest and fastest technologies.
• Vue Router: The official router for Vue.js.
• Pinia: A Vue Store that provides an enjoyable development experience.
• VueUse: A collection of essential Vue Composition Utilities.
• Vue I18n: An Internationalization plugin for Vue.js.
• TailwindCSS: A utility-first CSS framework for rapidly building custom user interfaces.
• Iconify: Use icons from Iconify’s rich icon sets.
• Markdown as Vue component: Use Markdown syntax directly in Vue components.
• TypeScript support: Built-in support for TypeScript.
• Easily deploy on Netlify: Deploy your app on Netlify without manual server setup.
• Good practices from official libs/plugins/repos: Follows best practices from official libraries, plugins, and repositories.
• Always update to latest version of dependencies: Keeps dependencies up-to-date for a smoother development experience.
• Pre-packed Vue 3, Vue Router, Pinia, VueUse, @vueuse/head, Vue I18n, and Vite: Comes pre-packed with commonly used Vue libraries.
• Prettier, ESLint with @antfu/eslint-config: Coding style enforced by Prettier and ESLint.
• Dev tools: Includes helpful development tools like TypeScript, pnpm (a fast package manager), and VS Code extensions for Vue.

Installation

To use this template, follow these steps:

1. Create a new repository from this template on GitHub.
2. Clone the repository to your local machine using Git.
3. Optionally, if you prefer a cleaner Git history, you can manually recreate the repository and copy the files.
4. Update the following information in the package.json file: name, license, and version fields.
5. Change the author name in the LICENSE file.
6. Replace the favicon in the public folder with your own.
7. Remove the .github folder, which contains GitHub-related content.
8. Clean up the README as needed.
9. Start developing by running npm run dev and following the server logs.

To build for production, run npm run build. The generated files will be located in the “dist” folder.

You can preview your production build by running npm run preview.

If you want to deploy your app on Netlify, create a site on Netlify, connect it to your repository, and then deploy. Some configurations in Netlify UI will be overridden by the netlify.toml file. Refer to the available Netlify configurations for more details.

Summary

This repository provides three templates for building Vue 3 apps using Vite 2 and ESBuild. Each template corresponds to a different branch and offers different features and deployment options. It includes commonly used libraries, coding style enforcement, and helpful development tools. The templates are opinionated but can be customized to suit your needs.