Vue app to manage Agenda
Agenda App is an open-source PWA to manage Agenda or Activity for Sinjai Regency, but because I decide this app to be open-source, so feel free to use and change the code as you need.
Agenda App is build with Firebase Firestore, Storage and Auth. Also with another great plugin such as Vuefire, Vuetify, and other helpfull plugin.
To start installing the project, run npm command install.
npm install
Add Vuetify and other plugin.
vue add vuetify pwa babel
Install dependencies and plugin.
npm install vuefire firebase moment hooper vue-marquee-text-component
Create a new project on Firebase. Then add the config code setup on "src/plugins/firebase.js" path. Inside the config field.
Example:
const congfig = {
apiKey: "yourapikey123",
authDomain: "yourauthdomain.firebaseapp.com",
databaseURL: "https://databaseurl.firebaseio.com",
projectId: "your-project-id",
storageBucket: "your-storage.appspot.com"
}
If you want to use RTB instead of Firestore, make sure to replace the import statement and change the export variable.
Example:
From:
import "firebase/firestore"
export const db = app.firestore();
To
import "firebase/database"
export const db = app.database();
Then you are ready to ROCK!!!
Inside the main.js file, there is a few plugin that we have to import so the plugin could be use in the app such as the vueMq plugin to setting the media query for the app, but unfortenally the media query that I set is just for mobile and desktop display, to change it you only need to add a new breakpoint inside the ;"breakpoints" field.
Example:
Vue.use(vueMq, {
breakpoints: {
mobile: 600,
tablet: 780, //tablet display
laptop: 1200, //laptop display
desktop; Infinity
}
})
After change or add your own media query configuration, please note that you need add your own style for your recent mq configuration.
You can easily look the vue-mq documentation for more configuration.
ArkjuniorK - College Student and Front End Developer