VUE3 + VUETIFY3 + PINIA + AUTH0 BOILERPLATE

Uses Vue3, Vite, Pinia, Vuetify 3 beta, TS and Auth0

Quickstart

• First setup Auth0 by going to the dashboard and configure your SPA app authorization. update values in .env to match

  • see here for more info about Auth0
  • sample .env file:

    VITE_API_SERVER_URL=YOUR_SERVER_URL
    VITE_AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
    VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID
    VITE_AUTH0_AUDIENCE=YOUR_AUTH0_AUDIENCE
    VITE_AUTH0_CALLBACK_URL=YOUR_APP_URL/callback
    

• then you can get building:

# Project setup
npm i

# build and hot-load
npm run dev

# compile and Minify for Production
npm run build

# lint
npm run lint

Notes

• Typescript and Vue3
• more in depth TS info here
• how to transition from vue-class-components to the CompositionAPI
• Vuex is being deprecated so let's use Pinia! 🍍
• More about Pinia
• Vite Configuration Reference
• Static deployment using Vite
• Render Deployment
  • you can connect your github repo to Render and it will automatically deploy when new commits are pushed. neat!
  • important notes about deploying Vue apps using redirects for proper router behavior
  • see this app in action at https://vue3-boilerplate.onrender.com/
• Vuetify 3 beta
• Material Design Icons
• lint
• For Vue3 it is recommended to disable Vetur and use VSCode extensions Volar and TypeScript Vue Plugin (Volar)
• adding Auth0 to an existing Vue3 app
• Vue app with express backend and Auth0
• guide to Auth0 in Vue3

To-do

• auth and store: investigate using a plugin for auth0-vue sdk
• do something with LogIn view, or remove it
• lazy-loading in router/index.ts
• improve or remove page loader -- combine with other app loading state (isLoading = auth.isLoading || appState.isLoading)
• get knowing about CompositionAPI and OptionsAPI -- check that you're using best practices
• scss -- maybe? css may be preferred

Type Support for .vue Imports in TS

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.