Vue 3 + Vite + Vuetify 3 + Firebase 9

🔗 Live preview

Features

---

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

• 🗂 File based routing

• 📦 Components auto importing

• 📑 Layout system

• 📥 APIs auto importing - use Composition API and others directly

• 🍍 State Management via Pinia

• 💾 Pinia Persisted State

• 🤙🏻 Use the new <script setup> syntax

• 🤙🏻 Reactivity Transform enabled

• 🔥 Google Firebase for authentication

• 🔆 Dark / Light theme switch with persistance

CSS shortcuts

---

@use 'vuetify';

.buttonClass {
  @extend .text-white, .mx-2;
}

<VBtn class="buttonClass"> ... </VBtn>

Auto import plugins

---

import { Vue } from '@U/instanciateVue'

// Init Vue and set new user on auth changes.
auth.onAuthStateChanged(async user => {
 Vue(user)
})

const modules = import.meta.globEager('@M/*.js')
export default app => Object.values(modules).map(m => m.install(app))

import { router } from '@M/routes'

export const install = app => {
  const pinia = createPinia()

  // Router can be used in any pinia store module.
  pinia.use(({ store }) => {
    store.router = markRaw(router)
  })

  app.use(pinia)
}

Frameworks

---

• Vue 3 - Progressive JavaScript Framework
• Vuetify 3 - Material Design Framework

Recommended IDE Setup

---

• VS Code + Volar

Plugins

---

• Vue Macros
• 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

Coding Style

---

• Use Composition API with <script setup> SFC syntax

• VS Code Extensions

  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • ESLint

Project Setup

---

Yarn install

Compile and Hot-Reload for Development

yarn dev

Compile and Minify for Production

yarn build