Vitesse - Opinionated Vite Starter Template with Nhost and Quasar support

Live Demo

Frontend Features

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - born with fastness
• 🗂 File based routing
• 📦 Components auto importing
• 🍍 State Management via Pinia
• 📑 Layout system
• 📲 PWA
• 🎨 UnoCSS - the instant on-demand atomic CSS engine
• 😃 Use icons from any icon sets with classes
• 🌍 I18n ready, in this template only cs and en language
• 🗒 Markdown Support
• 🔥 Use the new <script setup> syntax
• 🤙🏻 Reactivity Transform enabled
• 📥 APIs auto importing - use Composition API and others directly
• 🦔 Critical CSS via critters
• 🦾 TypeScript, of course
• ⚙️ Unit Testing with Vitest
• ☁️ Deploy on Netlify, zero-config
• 📑Quasar Framework integration
  

Pre-packed

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.
• Quasar - Quasar framework.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS
• Iconset from quasar framework

Plugins

• Vue Router
• vite-plugin-pages - file system based routing
• vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-pwa - PWA
• vite-plugin-vue-markdown - Markdown as components / components in Markdown
• markdown-it-shiki - Shiki for syntax highlighting
• Vue I18n - Internationalization
• vite-plugin-vue-i18n - Vite plugin for Vue I18n
• VueUse - collection of useful composition APIs
• vite-ssg-sitemap - Sitemap generator
• @vueuse/head - manipulate document head reactively
• Nhost integration - the best backend service for me. I this repo I show login, register, lost password and logout. In the Profile page I use storage (for Avatar) and GraphQL for update user data.
• OneSignal integration - sample of using webpush notification and user managment for Onesignal.

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• pnpm - fast, disk space efficient package manager
• Netlify - zero-config deployment
• VS Code Extensions
• Vite - Fire up Vite server automatically
• Volar - Vue 3 <script setup> IDE support
• Iconify IntelliSense - Icon inline display and autocomplete
• i18n Ally - All in one i18n support
• ESLint

Backend Features

For backend I will use Nhost features:

• Database
• GraphQL
• Auth
• Storage
• Serverless Function

Usage

Development

Prepare local backend with nhost-cli. Please instal cli as described here. Then move to the nhost-demo-template folder

Onesignal integration - Create on the Onesignal web new Web Application, with origin http://localhost:4010. Then fill this env variables in the nhost-demo-template folder - in the file .env.development

APP_FRONTEND_URL=http://localhost:4010
ONE_SIGNAL_REST_API_KEY=your rest api key from Onesignal web
ONE_SIGNAL_APP_ID=your APP_ID from Onesignal web

cd nhost-demo-template
nhost up

You may see Hasura Console here: http://localhost:1337

Onesignal integration - If you want use Onesignal you need add these variables to the .env.development file in the frontend folder.

VITE_ONESIGNAL_APP_ID=the same as ONE_SIGNAL_APP_ID above
VITE_ONESIGNAL_LOCALHOST=true

Then you may run

cd frontend
npx vite --port=4010

Just run and visit http://localhost:4010

Build

To build the App, run

cd frontend
pnpm build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute. Don't forget use frontend folder as root folder. Please do not forget set this ENV variables on the Netlify site:

VITE_FRONTEND_URL - front end URL address ( without / at the end)
VITE_NHOST_REGION - region from your Nhost app
VITE_NHOST_SUBDOMAIN - subdomain from your Nhost app

If you want use OnseSignal integration, you must register new application on the Onesignal web, for your netlify URL origin }or some custom domain).

Then you need add this ENV variable:

VITE_ONESIGNAL_APP_ID - App id of the new web on one signal. Will be different from local dev.

Why

I have been using Hasura GraphQL Engine as a backend for my projects for a long time. Now, after a long time, I found the Nhost cloud solution and I have to say that, except for a few minor things (e.g. email templates only in the paid version), this product suits me.

In the same way, I used the Vitesse template for my projects, so I decided to extend it with Nhost Serverless Functions. In my opinion, it is a combination of some of the best things available now.

It is a complex solution and I will be happy if this template contributes to the expansion of already published examples and templates.