This repository has a starter setup to use vue 3 with Quasar framework. It has initial configurations for:
- vuex typings
- firebase authentication and roles management
- routing and guard navigation for redirections depending on user role
- some scripts to create users in firebase and manage its roles
The repository has been created with quasar cli. Read it's documentation to know how to get started
yarnyarn buildSee Configuring quasar.conf.js.
Firebase project configuration is set as env variable at quasar.config.js, just change firebase config with your own If you want to deploy to firebase hosting you have to add your project to configuration.
yarn add-firebase-projectyarn deployTo use app and local environment without affecting production project just start the emulators and set NODE_ENV=dev. yarn dev will automatically set env to dev. With emulators running, just access to ui and create a user to login.
yarn emulatorsyarn devservice-account.json is needed for the cli to access admin sdk credentials.
- At firebase console go to project configuration
- Go to service account tab and generate a new private key.
- Save this file as "service-account.json" at the root of the project (don't commit this file as it contains credentials)
Once this is ready, to create a user for production use
yarn create-userand follow prompts.
To assign roles use
yarn add-roleThis repository shows how to wrap typings for vuex. Vuex 4 typing support is quite basic so i recommend not to use modules with this typings. Vuex 5 will come with full typescript support and it removes module concept by replacing with store composition.
As repo has implemented firebase authentication, route forwarding and guarding is a very interesting feature in this app. Take a look at how redirections are made depending on user roles and authenticated state, this is a starting point of something more complex