Posts

Showing posts with the label Quasar Framework

Donate

Vue 2 Charts (vue-chartjs v4) Not Working In Quasar Framework Project Version 1x

Image
Hello, We have a new sprint to work with that is to add metrics module to an existing project with tabular and charts. Since this is a legacy version of Quasar project, we need to add an old version of charts plugin also. There were lots of chart plugins to choose from but the team had the experience working with chart.js before in ASP.NET MVC projects and so we opt to select vue-chartjs as such. However, getting the plugin to work with the legacy Quasar project is a pain in the butt. I had to research in the forums and stackoverflow to make it work since the commands to install vuechart-js does not work on our app. After researching and experimenting for several hours, I came up with the solution that is to specify the versions of vue-chartjs and the chart.js during installation npm i vue-chartjs@4.1.2 chart.js@3.9.1 . After that, we can now fully utilize the features of vue-chartjs v4. The Quasar project that we are working has the following versions: Quasar: 1.2.2 Vue.js: 2

Quasar date.formatDate() Function Not Formatting Dates In Q-Table Component

Image
Hello All, When formatting date columns in Quasar table (QTable) the accepted solution is to use the date.formatDate() function and supply the parameters with the actual value and the format type such as below code. columns : [ //More Columns here... { name : "startTime" , label : "Start Time" , align : "right" , sortable : true , field : row => row.startTime, format : val => date.formatDate(val, "DD-MMM-YYYY hh:mm:ss A" ), }] And then render the columns to the table component. <q -table :data= "activeUsers" :columns= "columns" :separator= "separator" table-header-class= "bg-cts-purple text-white" :rows-per-page-options= "[10, 20, 30, 0]" :filter= "filter" :filter-method= "filterActiveUsers" > <template # body= "props" > <q -tr :props= "props" > <q -td key= "opera

Debugging Quasar Framework Applications Using Visual Studio Code (VS Code) Editor

Image
Hello, I was recently assigned and trained to work on future sprints for an existing project using Quasar Framework/Vue as Front-End and ASP.NET Core API as the back-end. Given that the project has been established for a couple of years now and has been significantly updated by the developer/architect in the US, learning through this involves sharing is caring, debugging and stepping through the code itself. With the goal at hand, I did some research on how to debug Quasar projects using the Visual Studio Code editor. After a few hours, I managed to debug the application based from the provided steps below. 1. Create a launch.json file if you have not do so. To create a launch.json file, click the Debug button on the left side of the editor and click 'create a launch.json file' link. This will create a launch.json file inside .vscode folder. 2. Replace the configurations object properties in the launch.json file with the settings below. Make sure to change the port of th

Donate