Quasar Framework with Vue 3 Composition API - Building a cross platform note app

quasar framework is an open source vue.js framework for building apps with a single code base and deploying it on mobile web and desktop today we'll be using the quasar framework with the view 3 composition api to create a note-taking app this app will allow users to create update and delete notes using a rich text editor that comes pre-configured with quasar i'll also show you how you can run the app on web desktop and mobile if you're new around here don't forget to subscribe and check out some of my other vue.js tutorials a link to the source code can be found in the description below when it comes to creating a quasar project there are three different ways for setting it up for this tutorial we'll be using the quasar cli since it is the recommended way but using the cli does not allow you to embed quasar within an existing project depending on your use case you should take a look at the documentation to determine which one will work best for you we can install the quasar cli with yarn or mpm at the time of recording this support for view 3 is in beta so i'll be using the next version you can optionally enable typescript and vuex with your application which i'd recommend for any large scale project since this tutorial is an introduction to quasar we'll stick with the default options if we open our project you can see it's similar to any other view project inside the source folder we can find all the core components our router layouts pages and styles with the project set up you can run quasar dev to spin up our web development server let's start by defining the layout for our application layouts are used across multiple pagers quasar has an amazing tool to build custom layouts that allows you to fill out a simple forum and auto-generate the view code for you for the application we're building today we'll only need a header bar but you can add sidebars and a footer if you wish we can copy the code snippet and paste it into our main layout view component i'll also quickly delete the quasar icon and give it a custom title inside the routes folder we'll want to define all the routes for our application since we want all of these routes to use the layout we created we'll need to make sure the routes are children of the main layout path this application will have a total of three pages the index page will contain a list of all notes created by the user a user can then click on the create icon which will open a new page for the user to fill out a form and initialize a new note a user can also click on an existing note which will redirect the user to the notes route that has a parameter with the id of the note i've created a view component for each of these pages inside the pages folder so we can build out the user interface at the bottom of our routes file you'll also notice we have this catch all path this will simply redirect all traffic that doesn't match any of the previous routes to a 404 error page before we can start building our features we'll need a way to handle storage and retrieval of notes created by the users to do this we can use local storage which will work for all the different platforms available to deploy the application to however in a real application you'd want to point these operations to some kind of api endpoint or sdk like firebase instead of using local storage we'll create a reusable function called use local storage this function will create a reactive reference that reflects the value saved to a specified key value we'll start by initializing our ref with a default value and we'll create a simple read function that will parse the string value saved in local storage and assign it to the ref we'll call this function so that we can initially load the value if one exists we'll also need to read from local storage whenever it's updated outside of this function we can do this by adding an event listener to the unmounted lifecycle hook don't forget to always clean up your hooks after for writing to local storage we can simply create a write function that converts a value into a string and saves it with the key we'll have this function called every time the value changes by using the watch function we'll want to make sure we watch for deep changes so that when we push new elements to this array it also writes it to local storage now we'll wrap this function inside use local notes which will simply pass in our note storage key along with an empty array as the default value we'll call this composition hook throughout our components to read and write notes to local storage before we can start building out the features we'll need to create a container component this component will simply center our content and add a max width to the div quasar has a whole bunch of css classes you can add to your components like the ones we are using here we'll use a few more types throughout this tutorial we'll also want to use a slot to pass any child components inside the style div now let's create our index page this page will list all notes the user has created we'll need to start by grabbing all the nodes from local storage and returning them in our setup function we'll also need the router so that when a user clicks on a note card it will redirect them to the notes page in the template we'll need to wrap everything in a queue page to control the offset of the page from the layout and we'll need an add our container component to center our content inside we'll add a header and a quasar button we can style the button and use an add icon to make it look better we can also use the to property to redirect the user when they click on the button to get the content on this page to align correctly we can use a row class this will simply set up a flexbox next we'll create a notecard component this component will be a simple quasar card component that will display the name and description of the note when the user clicks the card we'll have the card emit this event to the parent component we'll also wrap the body in a quasar card section for better padding the title will be an h5 header and the description will be small gray text below it we'll import this component into our index page and use it when we iterate over each of our notes we'll deconstruct the note in the for loop just to make the code less confusing and pass it in to the note card component when the user clicks the card we'll redirect the user to the note page and pass in the index as the parameter at the bottom i'll also add a simple message that lets the user know if there are no notes next let's set up the note create form we'll want to start off by creating a submit function this function will add our newly created note to the top of our notes array which in return writes it to local storage once the note is created we'll want to redirect the user back to the index page and reset the form information we'll need to return the note and submit function so we can access them in the template once again we'll wrap everything in a page and container component we'll create a form that will call the submit function once it's completed quasar has a built-in input component that gives some nice options for styling we can create two of these input components one for the title and one for description and model their corresponding note properties i'll add a dense property to the description input to make it smaller for the editor quizar actually comes with a fully featured text editor right in the component library you can add custom options like headers if you'd like but for now i'm just going to use the default options available we'll wrap the editor inside a card for better styling at the bottom we'll add a cancel form which will redirect the user back to the index page and a submit button we'll add some colors to make them look better and now if we create a note it will insert it into local storage and redirect the user to the index page the last step to do is the page for viewing a note we can grab the actual note by getting the current route and parsing the id parameter we called this value id when we're creating the view router config we can use this id as an index to get the actual note we'll also need to add a function for deleting the current note in this function we'll splice it at the index by one to remove the current note then we'll redirect the user back to the index page the last thing before we head to create the template is we'll add a simple boolean ref which will toggle a switch into editing mode as usual we'll want to wrap everything inside a page and container component in the editing mode we'll want to display the note inside input fields that will update the note when they are edited this is really similar to the form we made for creating new notes except when they submit the form will disable the editing mode if they are not in editing mode we'll want to display the note in a clean format we'll wrap the title in a header tag and align it with an edit and delete button to the right of it we can use the row class to create a flexbox out of the div and then center the items when a user clicks the edit button we'll simply set editing mode to true and for the remove button we'll call our remove function we defined earlier i added the edit and delete icon with their appropriate colors to make the buttons look nicer for the description we can create a simple div element and render it inside lastly for actually rendering the content of the note we can render it as html this is because the quasar editor outputs an html string with the applied styles and we are done we now have a fully working quasar text editor quasar made this process super easy and we just touched the surface of all the components and directive classes it has to offer on top of this we can now deploy it to mobile web and desktop let's take a look at how we can do that now for the web we can simply run quasar build which will create a single page application but you also have the option of enabling server side rendering which can be found in the quasar config.js file to build for desktop we can use electron if you don't know electron i've created a tutorial about this topic on my channel and you should check it out all we need to do is install electron and then run the quasar dev command with electron this will launch our application in development mode which will run in a desktop window it will also generate all the required configurations we need once again a new section will be added to the quasar configuration.json file where you can control how the application will be bundled for production for mobile you can use cordorva or capacitor which are both great for using modern web apps natively on ios and android i won't go into detail about setting up and running quasar with these tools since it requires the installation of some extra external dependencies such as android studios and xcode the instructions are laid out in the quasar documentation which provides a great explanation of how to set everything up and configure it once the environment is configured you can run the application with the quasar dev command similar to how we ran it with electron overall quizar is an amazing framework that combines the work of many other libraries into a single package as you can see it's versatile as well as simple to use if you enjoy this content don't forget to subscribe and check out some of my other tutorials i also have a growing community over on discord you should come check it out and ask me any questions hope to see you in the next one you

Channel: Coding with Justin

Views: 14,501

Keywords: quasar framework, vue framework, vue 3, composition api, vue js, quasar framework vue, vue quasar, quasar vue, vue quasar tutorial, quasar vue basics, quasar tutorial, quasar vue pwa, quasar vue electron, quasar vue cordova, vue 3 tutorial, vue 3 router, vue 3 composition api

Id: qPkSwo8QyoA

Length: 12min 13sec (733 seconds)

Published: Mon Mar 29 2021

Reddit Comments

[u/_tonytheonly_]

Has any speed tests been done to compare Vue / Quasar / electron vs react native / expo / electron? I’d be curious to see the information on it.