An Introduction To Quasar Framework: Constructing Cross-Platform Purposes

No Comments

On this article, I’ll clarify the right way to use Quasar Framework and its state-of-the-art UI (which follows Materials pointers) to construct a notes app. The app will get its knowledge from and retailer its knowledge to Firebase. This tutorial is supposed for anybody serious about constructing cross-platform purposes that work effectively throughout all units concurrently. On the finish of the article, it’s best to have a correct understanding of what Quasar is, the right way to get began creating apps with Quasar, and in addition the right way to use Firebase.

To comply with alongside on this article, it’s best to have:

an understanding of HTML, CSS, and JavaScript;
not less than a bit expertise with Vue.js;
Node.js model 10 or above and npm model 5 or above put in in your machine.
information of how the command-line interface (CLI) works.

The deployed app is obtainable for viewing, and the ultimate code is on Github.

What Is Quasar Framework?

Quasar Framework is an open-source Vue.js-based cross-platform framework whose motto is: “write code as soon as and concurrently deploy it as a web site, a cellular app and/or an Electron app”. It has many options that allow you, as an online developer, to construct apps on desktop and cellular and to create progressive net apps (PWAs) utilizing applied sciences reminiscent of Cordova, Electron, and the online (Vue.js).

Why Quasar Framework?

Quasar is an easy-to-use however highly effective UI package comprising numerous UI parts, structure parts, and helpers. Collectively, these parts present a full-featured toolset for constructing responsive front-end apps, with out your having to utilize many alternative UI libraries. It does the heavy lifting for you, permitting you to deal with options and never boilerplate.

In abstract, Quasar gives assist for a lot of construct modes, together with:

single-page purposes;
progressive net purposes;
server-side rendering;
cellular apps (iOS and Android), utilizing Cordova or Сapacitor;
multi-platform desktop apps, utilizing Electron;
browser extensions.

Getting Began

To get began, let’s have a look at the right way to set up Quasar in your native machine and arrange a venture.

Set up

There are 3 ways to begin utilizing Quasar:

embedding to an current venture through a content material supply community (CDN);
putting in utilizing the Vue.js CLI Quasar plugin;
putting in utilizing the Quasar CLI.

For this tutorial, we can be utilizing the third technique, which is the Quasar CLI. The very first thing to do is set up the Quasar CLI globally in your laptop, or verify whether or not it’s put in by operating the next instructions in your CLI:

quasar -v #verify if quasar has been put in beforehand

yarn international add @quasar/cli
# or
npm set up -g @quasar/cli

As soon as that is carried out, now you can transfer on to organising the venture.

Venture Set-Up

Run the next command in your CLI:

quasar create <folder_name>

Following this, you will be requested some questions. Right here is my full configuration for the app we can be constructing.

Now we are able to transfer into the venture folder and begin up the applying utilizing the next instructions:

cd <folder_name>
quasar dev

With the steps above full, our app needs to be operating on http://localhost:8080. That is what we should always see:

Quasar’s Folder Construction

The default utility construction for Quasar is meant to be a fantastic start line for builders to construct any sort of utility. You possibly can set up the applying nevertheless you want and create directories everytime you want them.

.
├── public/ # pure static property (instantly copied)
├── src/
│ ├── property/ # dynamic property (processed by Webpack)
│ ├── parts/ # .vue parts utilized in pages and layouts
│ ├── css/ # CSS/Stylus/Sass/… information in your app
│ ├── layouts/ # structure .vue information
│ ├── pages/ # web page .vue information
│ ├── boot/ # boot information (app initialization code)
│ ├── router/ # Vue Router
│ ├── retailer/ # Vuex Retailer
│ ├── App.vue # root Vue part of your app
│ └── index.template.html # template for index.html
├── .editorconfig # editor config
├── .gitignore # GIT ignore paths
├── .postcssrc.js # PostCSS config
├── babel.config.js # Babel config
├── bundle.json # npm scripts and dependencies
├── quasar.conf.js # Quasar app config file
└── README.md # readme in your app

The supply folder consists of about seven main directories {that a} newbie ought to care about:

quasar.conf.js
That is the mind behind any Quasar utility, as a result of most configurations are carried out on this file. Amazingly, Quasar handles many of the complicated configurations wanted by the varied instruments and packages that you simply may use in an utility. A few of these configurations are for:
Quasar parts, directives, and plugins that will be wanted in your app;
icon packs;
CSS animation;
PWA manifest file and Workbox choices;
Electron packager and/or Electron builder;
and a lot extra.

src/property
The property listing incorporates your uncompiled property, reminiscent of Stylus or Sass information, photographs, and fonts.
src/parts
That is the place your whole reusable parts will stay. These parts make up the totally different components of the applying and could be reused and imported into your pages, layouts, and even different parts.
src/css
You’ll not discover this in Vue.js, however Quasar supplies this in order that we are able to have all of our international CSS in Sass type. It consists of two information: app.sass is the place all of our types will go, whereas quasar.variables.sass incorporates the entire reusable variables we might need to make use of when styling our app. You might ignore the CSS listing for those who really feel it’s of no use to you.
src/layouts
This helps us create outlined layouts for an app with out repeating code. That is helpful while you need to embrace sidebars or mounted backside bars or have distinct layouts for cellular and desktop.
src/pages
The pages listing incorporates our utility’s views and routes. Our pages are injected into the app and managed by way of Vue Router in /src/router/routes.js. Which means that every web page must be referenced there.
src/router
This holds the routing configuration of our app. It consists of two folders:
/src/router/index.js holds the Vue Router initialization code.
/src/router/routes.js holds the routes of the app, loading our layouts alongside the routes or pages within the app.
You won’t must do something to the index.js file in a small venture, but when your venture may have routes, you have to so as to add them to the routes.js file.

Constructing a Notes App

When constructing an utility with Quasar, the very first thing we’ll need to do is create a structure. Quasar has made this course of loads simpler than every other framework by making use of a structure builder. For our notes app, we’ll need one thing like the next, which is kind of much like the default structure however with just a few modifications:

App Format

Within the sidebar of Quasar’s documentation, you will note the “Format and Grid” choice. Once you click on it, a dropdown will seem with extra choices, one in every of which is “Format Builder”. Click on on “Format Builder”, which can deliver you right here:

This enables us to decide on the choices we would like and take away those we don’t. Then, we might generate the code to stick within the structure file.

The primary choice helps us to select the structure components, whereas the second permits us to configure the structure components. Lastly, we export the generated structure.

If you would like the very same structure as mine, use the code beneath:

<template>
<q-layout view=”lHh lpR fFf”>
<q-header elevated class=”bg-primary text-white”>
<q-toolbar>
<q-btn dense flat spherical icon=”menu” @click on=”left = !left” />
<q-toolbar-title>
<q-avatar>
<img src=”https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg” />
</q-avatar>
Title
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer show-if-above v-model=”left” aspect=”left” bordered>
<!– drawer content material –>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>

<script>
export default {
knowledge() {
return {
left: false
};
}
};
</script>

Take away the default structure and paste the code above or the code that you’ve generated into src/layouts/MainLayout.vue.

The code above is split into three sections: the header (navbar), the drawer (sidebar), and the web page container (which incorporates the router view).

We’ve made use of the state-of-the-art UI to type the entire web page. As I stated earlier, when utilizing Quasar, you gained’t want further heavy libraries reminiscent of Hammer.js, Second.js, or Bootstrap.

We can be including knowledge to the sidebar and enhancing the navbar. When you’ve saved, you’ll discover our app now appears like this:

Let’s work on the structure, including some gadgets to the sidebar and altering the title of the app, If you happen to scan the structure code that we added, you will note the place we’re alleged to edit and add these numerous gadgets.

Here’s what my structure appears like after I’ve added gadgets to the sidebar and altered the title:

And right here is the code:

<template>
<q-layout view=”lHh lpR fFf”>
<q-header elevated class=”bg-primary text-white”>
<q-toolbar>
<q-btn dense flat spherical icon=”menu” @click on=”left = !left” />
<q-toolbar-title class=”text-h6″>
My Notes
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer show-if-above v-model=”left” aspect=”left” bordered>
<q-list class=”q-pt-xl”>
<q-item clickable v-ripple to=”/”>
<q-item-section avatar>
<q-icon identify=”residence” measurement=”md” />
</q-item-section>
<q-item-section class=”text-weight-bold”>House</q-item-section>
</q-item>
<q-item clickable v-ripple to=”/about”>
<q-item-section avatar>
<q-icon identify=”data” measurement=”md” />
</q-item-section>
<q-item-section class=”text-weight-bold”>About</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
<q-footer class=”bg-grey-2 text-black “>
<q-toolbar>
<q-toolbar-title class=”text-subtitle2″>
Designed and Constructed For this text.
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script>
export default {
knowledge() {
return {
left: false
};
}
};
</script>

We eliminated the brand within the navbar and edited the textual content, then added a listing to the sidebar, making use of Quasar’s state-of-the-art UI. Take a look at the record gadgets, and replica the code of any you want to use.

App Design

Earlier on, I stated I used to be going to make use of Quasar’s state-of-the-art UI (which follows Materials pointers) to construct a notes app, and that’s what we can be doing now. Explaining the entire course of in an article like that is tough, however the “Model & Identification” part of Quasar’s documentation covers it effectively.

This can be a one-page app (index.vue), and right here is the code, with none styling utilized:

<template>
<q-page class=””>
<div class=”q-pa-md”>
<q-input
bottom-slots
v-model=”newNoteContent”
placeholder=”Write your observe right here…”
counter
autogrow
maxlength=”300″
>
<template v-slot:after>
<q-btn spherical dense flat icon=”ship” />
</template>
</q-input>
</div>
<q-separator measurement=”10px” />
<q-list bordered class=”rounded-borders” type=”max-width: 600px”>
<q-item-label header>You have got 3 Notice(s)</q-item-label>
<div>
<q-item>
<q-item-section high>
<q-item-label caption class=”text-grey-9″>
He who has creativeness with out studying has wings however no toes.
</q-item-label>
</q-item-section>
<q-item-section high aspect>
<div class=”text-grey-9 q-gutter-xs”>
<q-btn measurement=”13px” flat dense spherical icon=”delete” />
</div>
</q-item-section>
</q-item>
<q-separator measurement=”1px” />
</div>
<div>
<q-item>
<q-item-section high>
<q-item-label caption class=”text-grey-9″>
He who has creativeness with out studying has wings however no toes.
</q-item-label>
</q-item-section>
<q-item-section high aspect>
<div class=”text-grey-9 q-gutter-xs”>
<q-btn measurement=”13px” flat dense spherical icon=”delete” />
</div>
</q-item-section>
</q-item>
<q-separator measurement=”1px” />
</div>
<div>
<q-item>
<q-item-section high>
<q-item-label caption class=”text-grey-9″>
He who has creativeness with out studying has wings however no toes.
</q-item-label>
</q-item-section>
<q-item-section high aspect>
<div class=”text-grey-9 q-gutter-xs”>
<q-btn measurement=”13px” flat dense spherical icon=”delete” />
</div>
</q-item-section>
</q-item>
<q-separator measurement=”1px” />
</div>
</q-list>
</q-page>
</template>
<script>
import db from “src/boot/firebase”;
export default {
identify: “PageIndex”,
knowledge() {
return {
fundamental: false,
mounted: false,
newNoteContent: “”
};
}
};
</script>

Within the code above, we have now an enter discipline from Quasar. We’ve connected a v-model to get the info from the enter discipline as soon as the “Submit” button is clicked. We even have a listing of things that can be used to show every observe, and every record merchandise has an icon used to delete that specific merchandise when clicked.

Setting Up Native Information

At this level, the design of our app is in place. The subsequent factor we’ll do is create an array that will include all of our notes. We are going to be certain that we are able to add to and delete from this array earlier than organising Firebase.

Right here is the array that we’ll be making use of in our app for now. Later, we’ll take away this array or remark out the code.

notes: [
{
id: 1,
noteContent: “Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam.”
},
{
id: 2,
noteContent: “Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam.”
},
{
id: 3,
noteContent: “Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse repudiandae nisi velit provident corporis commodi eius fugiat reiciendis non aliquam.”
}
]

Fetching Information

We now have our array. Let’s add these knowledge to our app. As a result of we perceive Vue.js, all we’ll do is loop by way of this array utilizing the v-for directive, use the info gotten from the array, after which put the content material wherever we would like it to look.

<div v-for=”noteContent in notes” :key=”noteContent.id”>
<q-item>
<q-item-section high>
<q-item-label caption class=”text-grey-9″>
{{ noteContent.observe }}
</q-item-label>
</q-item-section>
<q-item-section high aspect>
<div class=”text-grey-9 q-gutter-xs”>
<q-btn
measurement=”13px”
flat
dense
spherical
icon=”delete”
@click on=”deleteNote(noteContent)”
/>
</div>
</q-item-section>
</q-item>
<q-separator measurement=”1px” />
</div>

We additionally added a click on occasion handler to the delete button, in order that it hundreds this perform every time it’s created.

Including Notes

Let’s see the right way to add notes to our app through the use of the enter discipline. We are going to use JavaScript’s unShift() strategies, which provides a number of parts to the start of an array and returns the brand new size of the array.

The very first thing to do is so as to add a click on occasion handler to the button.

<q-btn spherical dense flat icon=”ship” @click on=”addNote” />

Then, proceed to create this technique within the script space.

strategies: {
addNote() {
let newNote = {
id: this.notes.size + 1,
observe: this.newNoteContent
};
this.notes.unshift(newNote);
this.newNoteContent = “”;
}
}

Within the code above, we created an object for the brand new observe, which contains the ID and the observe itself, after which we added this newNote to the array of notes through the unShift() technique.

Deleting Notes

Lastly, earlier than continuing to make use of Firebase in our app, let’s see the right way to delete a observe. The very first thing could be so as to add an occasion listener to the delete icon:

<q-btn
measurement=”13px”
flat
dense
spherical
icon=”delete”
@click on=”deleteNote(noteContent)”
/>

After which we might create a way:

deleteNote(noteContent) {
let noteId = noteContent.id;

//doing this to get the true id of the notes
let index = this.notes.findIndex(noteContent => noteContent.id === noteId);
this.notes.splice(index, 1);
}

On this code, we acquired the id of the actual observe that we need to delete by way of the parameter handed to the clicking occasion technique that was created. Then, we made use of the splice technique to take away solely that merchandise from the array.

Firebase

Now that these two items of performance work, let’s now see how we are able to use Firebase in Quasar so as to add, fetch, and delete knowledge. Firebase may also give us real-time knowledge syncing throughout all units. The information in our app gained’t be very a lot, as a result of it’s only for the aim of studying. In case you’re pondering of one thing massive that will be utilized by hundreds of thousands of individuals, take a look at the pricing web page.

Firebase is utility improvement software program from Google that allows us to develop iOS, Android, and net apps.

Setting Up Cloud Firestore

To get began, go to firebase.google.com and click on on both the “Go to console” hyperlink within the top-right nook of your display or the “Get began” button (be certain that you sign up along with your Google account).

This may deliver us to the console space, the place we are able to create a venture. Click on on the “Add a venture” button, and a type to create your venture will seem. The primary query will request the venture’s identify, which might be something; for this text, we’ll name it “notesApp”. Let’s additionally disable Google Analytics as a result of ours is a mini-app.

Click on on the “Create venture” button (this may take few seconds, so be affected person). Then, click on on “Proceed”, in order that we are able to create our cloud Firestore.

Within the sidebar, click on on “Firestore”, after which “Create database”.

This may deliver up a modal. Click on on “Begin in check mode”, which can make it straightforward for us to begin working with our database. Keep in mind that, “The default safety guidelines for check mode enable anybody along with your database reference to view, edit and delete all knowledge in your database for the following 30 days”.

Click on on “Subsequent”, depart the default Cloud Firestore location, after which click on on the “Allow” button. As soon as it hundreds, our database can be totally prepared for us to make use of.

Notice: The Firebase database is made up of collections, and these collections include paperwork, and every doc is a JavaScript object that has fields in it.

Let’s get began by creating a brand new assortment for our notes.

To create a set, click on on “Begin assortment”. A modal will pop up so that you can enter the gathering ID — that means, a reputation. Then, click on on the “Subsequent” button.

Now you can begin creating the paperwork and fields for every observe. Auto-generate the ID of the doc to make sure that it’s distinctive by clicking “Auto-ID” beside the doc discipline.

Click on “Save”, and proceed to create extra paperwork. Ultimately, that is what my database appears like:

Now that we’re carried out, let’s see the right way to join Firebase to our app. Go to “Venture overview” within the sidebar, and let’s add this to an online app by clicking the “Internet” button.

A type will seem for us to “Add Firebase” to our net app. We are going to give it the identical identify, “notesApp”, and register the app (don’t verify the “Firebase internet hosting” discipline).

As soon as it has loaded, it’s going to deliver up an SDK to assist us initialize our database within the app. We gained’t do it this manner, though we’ll want some data from the generated SDK. The appropriate method to do that in Quasar is to import the modules that we’d like and use a boot file.

So, depart that tab open, and let’s see the right way to add the Firebase SDK and initialize Firebase in our Quasar app.

The very first thing to do could be to put in Firebase in our venture with npm.

npm set up –save firebase

As soon as set up is full, we’re going to initialize our app’s connection to Firebase by making a boot file, in order that we have now fast entry to the database when our app is prepared.

A boot file helps us to run code earlier than the app’s Vue.js root part is instantiated. Quasar’s documentation has extra details about boot information and when to make use of boot information.

To generate a boot file, we’ll run this command in our CLI:

quasar new boot firebase

Notice: You don’t want to make use of Firebase because the identify of the boot file.

As soon as that is carried out, you’ll discover that the file is now created within the boot folder. To utilize this newly created boot file, we’ll want so as to add it to the quasar.config.js file’s boot array.

Let’s return to the newly created boot file. Delete the entire code there as a result of we don’t want it. We’ll import the modules that we’d like and configure our database. Paste within the following code:

import firebase from “firebase/app”;
import “firebase/firestore”;

const firebaseConfig = {
// …
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Right here, we’ve imported Firebase itself and Firestore, and we’ve initialized Firebase, making use of the config, which we can be including now.

At this level, we’re virtually carried out configuring our app. We have to add our distinctive configuration, which was supplied within the SDK that was generated once we added Firebase to our net app. Copy solely the configuration, and paste it into our array.

We should always now have one thing like this:

import firebase from “firebase/app”;
import “firebase/firestore”;
const firebaseConfig = {
apiKey: “AIzaSyDRcq5PXJSi5c5C8rl6Q6nudIJqTFaxXeA”,
authDomain: “notesapp-ffd7c.firebaseapp.com”,
projectId: “notesapp-ffd7c”,
storageBucket: “notesapp-ffd7c.appspot.com”,
messagingSenderId: “18944010047”,
appId: “1:18944010047:net:ddfb46fc6bc8bba375158a”
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

One very last thing, since we’re making use of Firestore, is that we’ll must initialize the cloud Firestore by including this code to our boot file (the final line):

let db = firebase.firestore();
export default db;

This db will give us entry to our Firestore database. We additionally exported it in order that we are able to use it wherever in our app.

At this level, you may nonetheless be a bit confused, however when you’ve got adopted this information, then you’ll have correctly initialized Firebase in your utility. You possibly can learn extra about including Firebase to your JavaScript venture within the documentation.

Fetching Information From Firebase

When you’ve got adopted the information thus far, every little thing ought to work effective when you launch your app. Now let’s seize the notes created within the database and show them in our app.

For this, we can be making use of the .onSnapshot hook, which can be fired any time the info in our assortment adjustments. This may inform us whether or not a doc has been added, eliminated, or up to date. For this information, we’ll solely cope with the addition and elimination of paperwork. Utilizing hooks like this makes real-time syncing throughout units attainable. Let’s get began.

The very first thing to do could be for us to get entry to the database by importing it into the index web page of our app.

import db from ‘src/boot/firebase’;

Then, create a mounted hook, as a result of we need to fetch our knowledge instantly after the app has loaded.

mounted() {
db.assortment(“notes”).onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {

let noteChange = change.doc.knowledge();

if (change.sort === “added”) {
console.log(“New observe: “, noteChange);
this.notes.unshift(noteChange);
}
if (change.sort === “modified”) {
console.log(“Modified observe: “, noteChange);
}
if (change.sort === “eliminated”) {
console.log(“Eliminated observe: “, noteChange);
}
});
});
}

Within the code above, we’re merely grabbing our notes assortment, and each time there’s a change within the assortment, the onSnapShot technique can be fired, which can return a snapShot of all our knowledge. All of those knowledge can be objects with sort properties. These sort properties will inform us the kind of change that has occurred and provides us entry to the info that was both added, modified, or eliminated.

This may sound complicated, however you’ll perceive what we’re doing as you learn on.

If you happen to save your code and verify the console surroundings, you’ll discover that every observe has been logged out. We will now push these objects to the notes array that we created earlier, in order that we are able to show real-time knowledge in our utility.

The very first thing to do is delete or remark out the objects within the notes array, in order that we have now one thing like this:

notes: []

Then, cross the objects to this array:

this.notes.unshift(noteChange);

Your code ought to now appear to be this:

if (change.sort === “added”) {
this.notes.unshift(noteChange);
}

At this level, for those who load the app, you’ll discover that you’ve efficiently fetched your knowledge from Firebase.

Including Information to Firebase

Let’s see the right way to add a observe to our notes assortment on this app. At this level, for those who attempt to use the enter discipline so as to add a observe, it’s going to work however the observe will disappear when you refresh the web page as a result of it’s not saved in any database.

To do that with Firebase, all that’s wanted is to replace the addNote() technique that we created earlier.

addNote() {
let newNote = {
// id: this.notes.size + 1,
observe: this.newNoteContent
};
// this.notes.unshift(newNote);

db.assortment(“notes”)
.add(newNote)
.then(docRef => {
console.log(“Doc written with ID: “, docRef.id);
})
.catch(error => {
console.error(“Error including doc: “, error);
});

this.newNoteContent = “”;
},

The very first thing we did right here was take away the ID that’s used once we made use of the earlier array, as a result of we at the moment are going to auto-generate the ID from Firebase. We additionally eliminated the unshift() technique; it’s now not helpful as a result of knowledge is being fetched for our app as soon as there may be an replace utilizing the snapShot hook.

If we have a look at the code chargeable for updating the Firestore db, all we’re passing to the gathering (notes) is the brand new object (newNote), and this perform will mechanically generate an ID for every of our paperwork. The documentation has extra data on including knowledge to Firebase.

Deleting Information From Firebase

We’re virtually carried out with our app, however we’d like to have the ability to delete knowledge in our app from Firebase. Presently, the delete perform works, however for those who reload the app, the deleted knowledge will reappear.

As we did earlier than, we’re going to delete these knowledge (or paperwork) from Firebase utilizing the distinctive ID generated by Firebase.

Presently, we don’t have entry to the ID. To entry it, we’ll add it to the noteChange object:

noteChange.id = change.doc.id;

As soon as that’s set, deleting knowledge can be as straightforward as including it. All we have now to do is go to the deleteNote(noteContent) technique that we created beforehand, delete the earlier code, and make use of this:

deleteNote(noteContent) {
let noteId = noteContent.id;
db.assortment(“notes”)
.doc(noteId)
.delete()
.then(() => {
console.log(“Doc efficiently deleted!”);
})
.catch(error => {
console.error(“Error eradicating doc: “, error);
});
}

This checks the notes assortment for a doc with the desired ID after which deletes it. But when we save our code now and click on the delete icon, the info will delete however gained’t depart the app’s interface except we refresh our code, that means that the snapshot hook must be up to date. Go to the snapshot hook for eliminated, and add this code:

if (change.sort === “eliminated”) {
console.log(“Eliminated observe: “, noteChange);
let index = this.notes.findIndex(
noteContent => noteContent.id === noteChange.id
);
this.notes.splice(index, 1);
}

This merely will get the ID of the submit that we deleted and removes it from the interface.

With that carried out, we have now constructed an app with Quasar that works with Firebase. One main benefit of Quasar is that it allows us to concurrently deploy our venture as a web site, cellular app, or Electron app.

To deploy for iOS, Cordova must be put in on our native machine. A MacBook is very preferable. Navigate to your CLI, and set up Cordova globally:

$ npm set up – g cordova

To put in on Home windows, you’d make use of Electron. The documentation correctly explains how to do that.

Conclusion

On this information, we have now constructed a notes utility utilizing Quasar and Firebase. By following this information, you at the moment are able to enhance on and add your individual options and performance. Listed here are just a few concepts to get you began:

Implement performance to switch notes.
Add dates, so that you could order the info by date.
Model the app, and make it extra artistic.
Add photographs.
Much more.

Helpful Sources

Quasar documentation
Firebase documentation

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment