Skip to content
/ VueSienna Public template

⚡️ Vue3, Vuetify3, Vite3, , Pinia, State Persistence, Pages, Layouts, Auto Import ['components, libs, plugins] , Macros, CSS Shortcuts, Themes, Firebase Authentication, VueJS best practices.

Notifications You must be signed in to change notification settings

santiagoaloi/VueSienna

Repository files navigation

image image image image

🔗 Live preview

Features


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


Plugins


Coding Style


Project Setup


yarn install

Compile and Hot-Reload for Development

yarn dev

Compile and Minify for Production

yarn build