DEV Community: Mayur Patel

Quasar Prime Admin Template — Vue 3, Quasar 2 admin template

Mayur Patel — Tue, 16 Jan 2024 10:43:19 +0000

Just launched Quasar Prime Admin Template — Your Ultimate Solution for a Powerful and Elegant Dashboard!

Developer-Friendly and Highly Customizable
Premium Quality Applications Made Easy
Ready-to-Use Template
Dark mode ready
Free Lifetime Updates
One-time payment and get full access

Live preview — https://quasar-prime-admin-template.netlify.app/

To buy at a cheap price, email me at mayur091193@gmail.com

DON'T MISS THE LAUNCH PRICE!

Easy buy — https://techforest9.gumroad.com/l/QuasarPrimeAdminTemplate

To buy at a cheap price, email me at mayur091193@gmail.com or buy from https://techforest9.gumroad.com/l/QuasarPrimeAdminTemplate

DON'T MISS THE LAUNCH PRICE!

How to deploy the Vuejs(Quasar Framework) + Python-Flask app using AWS EC2 ubuntu server, PM2, and Nginx?

Mayur Patel — Thu, 15 Jun 2023 12:45:56 +0000

Introduction:

As we already know, web application development is growing day by day. In this blog, I will show you how we can easily deploy Vuejs Quasar Framework + Python Flask project on the AWS EC2 Ubuntu server using PM2 and Nginx.

Prerequisites:

Before we go into the deployment process, make sure you have the following prerequisites in place:

AWS EC2 ubuntu server up and running
Nodejs and npm installed on a server
Python/Flask installed on a server
Global PM2 installed on a server
Nginx installed on a server

Deployment Process:

Step 1: Build Vuejs — Quasar Framework Application

Connect to the ec2 server and go inside your project directory and build the Quasar application using the below command:

quasar build

The above command will create a spa folder inside dist like => /dist/spa

Now we need to serve this frontend build using nginx so, we have to copy this spa folder inside /var/www/html/ Use the below command to copy:

sudo cp spa /var/www/html/app-frontend

Step 2: Deploy Python Flask API using PM2

Make sure you have the Flask project ready on the server and virtual env ready with all dependencies installed inside venv.

First, install pm2 using the below command:

npm install pm2@latest -g

For PM2, create a config file on a server named ecosystem.config.js and put the below code inside it.

module.exports = {
  apps: [
    {
      name: 'app-name',
      script: '/home/ubuntu/app-folder/api/venv/bin/gunicorn',
      args: '-b 127.0.0.1:5001 app:app',
      log_type: 'json',
      cwd: '/home/ubuntu/app-folder/api/',
      interpreter: '/home/ubuntu/app-folder/api/venv/bin/python',
      out_file: '/home/ubuntu/logs/app_log_out.log',
      error_file: '/home/ubuntu/logs/app_log_err.log',
    }
  ]
}

In the above code, we’re telling PM2 which script to run, the current working directory, the interpreter, and where to write output/error logs.

Now we need to reload and restart PM2 using the below commands.

pm2 reload ecosystem.config.js
pm2 restart ecosystem.config.js
pm2 status

Once you restart pm2 and run pm2 status, you should see a table showing the app name and status — online meaning our API is running on the server on port 5001.

Step 3: Configure Nginx

Navigate to the nginx sites-enabled directory:

cd /etc/nginx/sites-enabled/

Inside this, you may have a default file already existing which is the sample config file provided by nginx. Now we need to edit the server section inside this file using an editor like nano/vim and put the below script.

server {
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    server_name abc.com;
    location / {
        root /var/www/html/app-frontend;
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_set_header X-Forwarded-For 
            $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:5001;
    }
}

In the above server blow, I’ve used dummy server_name abc.com. You need to use your own domain and make sure DNS entry is updated with your ec2 server IP in the DNS of your domain.

Last step is to reload and restart nginx using below commands:

sudo service nginx reload
sudo service nginx restart

And your domain is live!

If you have any question feel free to comments on this blow.

Conclusion:

Deployment process looks difficult if you have no knowledge of deployment but using the steps above you can easily deploy the website without any issue. The combination of Vuejs and Quasar on the frontend, along with Python-Flask on the backend, provides a powerful and scalable solution. With PM2 for process management and Nginx as the reverse proxy, your app will be robust and performant, ready to serve users on the web.

Quasar Admin CRM New Version [Premium] .. Quasar 2/Vue 3

Mayur Patel — Tue, 18 Oct 2022 12:57:25 +0000

I have re-designed my Admin CRM template and given it a totally new look. You can buy the new version for $79. If you are interested, please email me at mayur091193@gmail.com

Live preview — https://quasar-admin-crm-premium.netlify.app/

By at cheap price at https://techforest9.gumroad.com/l/gbrmmzj

Few Features:

Modern and responsive design
CRM Dashboard
Analytics Dashboard
Charts
Calendar
Export Feature

Please provide your valuable feedback and I will try to work on it. I will be adding a few more screens to the premium version in the near future.

Please find some screenshots of the new version below.

CRM

Analytics

Customer List

Login

To buy, email me at mayur091193@gmail.com or buy directly from https://techforest9.gumroad.com/l/gbrmmzj

Quasar Admin CRM - Best CRM template to buy - very cheap

Mayur Patel — Fri, 14 Oct 2022 11:15:53 +0000

Best CRM template written using Vue.js and Quasar Framework.

Code is written in such a way that you can easily wire your actual data and make the CRM live which will definitely add value to your business.

Each and every graph/section are made by keeping the CRM business in mind, every graph provides you a way to visualize your business easily which will definitely add some value to your business.

To buy at a cheap price, email me at mayur091193@gmail.com

Buy at cheap price directly from https://techforest9.gumroad.com/l/gbrmmzj

To buy at a cheap price, email me at mayur091193@gmail.com or buy directly from https://techforest9.gumroad.com/l/gbrmmzj

q-google-map - Integrate google map in the Quasar 2, Vue 3 project using the Quasar extension - easy steps

Mayur Patel — Wed, 28 Sep 2022 12:41:41 +0000

Website - https://q-google-map.netlify.app/

Quasar Framework is a great UI framework that provides lots of ready-to-use components which are well tested on the web, iPad, mobile, and all devices.

q-google-map is a Quasar app extension written using Quasar 2 and Vue 3 to integrate Google Maps in any Quasar project. It works with Quasar 1.X as well as 2.X.

Demo and Documentation - https://q-google-map.netlify.app/
GitHub - https://github.com/mayur091193/q-google-map

To install the extension, use the below command:

quasar ext add q-google-map

To uninstall the extension, use the below command:

quasar ext remove q-google-map

In quasar.conf.js, add below:

...
build: {
  ...
  env:{
      options: JSON.stringify({
          load: {
            key: 'xxxxxxxxxxxxxxxxxxxxxx'
          },
          installComponents: true
      })
    },
  ...
},
...

Front-end code - HTML and script

<q-google-map :center="center"
              :zoom="zoom"
              style="width: 320px;height: 230px;">
</q-google-map>

data() {
    return {
      center: { lat: 20.7937, lng: 78.3629 },
      zoom: 4
    }
}

mayur091193@gmail.com

Add Tailwind CSS in the Quasar 2 and Vue 3 project — Simple steps

Mayur Patel — Tue, 27 Sep 2022 10:11:18 +0000

(Image Source — https://stackdiary.com/vue-ui-components-kits/)

.
.
Quasar Framework is a great UI framework that provides lots of ready-to-use components which are well tested on the web, iPad, mobile, and all devices.

By adding Tailwind CSS, you can build website UI within minutes. Quasar+Tailwind CSS will definitely help you increase front-end development speed!

In 90% of cases, if you install tailwind using the default command, it won’t work, I am sharing steps that worked for me after lots of trial and error.

Create Quasar Project and install Tailwind CSS and it’s dependencies:

quasar create quasar-tailwind-project
cd quasar-tailwind-project
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Add tailwindcss in the plugins section to .postcssrc.js like below

module.exports = {
     plugins: [
       require('tailwindcss')
     ]
}

Add tailwindcss imports to src/css/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you are ready to use Tailwind CSS in your Quasar Project, just use code from their official documentation.

Readme Pro - An Easy and Simple way to create Readme

Mayur Patel — Wed, 21 Sep 2022 15:22:11 +0000

Hello Everyone,

I made Readme Pro - An open source project which offers simple and easy way to create readme generator and GitHub profile readme generator.

Website - https://readmepro.netlify.app/
Please star this repo - https://github.com/mayur091193/readme-pro
Please support - https://www.buymeacoffee.com/mayur091193

https://github.com/sponsors/mayur091193
https://paypal.me/mayurpp

UI Screenshots:

q-google-map - Quasar app extension to integrate Google maps

Mayur Patel — Fri, 04 Sep 2020 05:10:44 +0000

I've just released the q-google-map quasar app extension to integrate Google Maps in the Quasar project. Any feedback will greatly be appreciated.

Few features to list:

Map
Marker
Polyline
Polygon
Circle
Rectangle
Kml layer

Website - https://q-google-map.netlify.app/
GitHub - https://github.com/mayur091193/q-google-map
NPM - https://www.npmjs.com/package/quasar-app-extension-q-google-map

Vue native app starter - Starter app created using vue-native

Mayur Patel — Thu, 30 Apr 2020 06:08:04 +0000

Hello everyone,

I hope everyone is safe!

Have a look at Vue native app starter - Starter app created using vue-native.

I have also enabled sponsorship on my Github. If you find my starter app helpful in any way, please sponsor me on GitHub, minimum you can sponsor $1/month but that will make my day. Every small contribution can make my day and boost me for making more and more open-source projects.

Github sponsor profile link - https://github.com/sponsors/mayur091193

Vue native starter app - https://github.com/mayur091193/vue-native-app-starter

Thanks a lot!

Quasar Shopping - A free and beautiful eCommerce UI template written in Vue.js/Quasar

Mayur Patel — Thu, 30 Apr 2020 06:06:08 +0000

I've made an open-source shopping website template using the Quasar framework.

Please have a look! Feedback will make my day!

Don't forget to have a look at my sponsor page(link in end) - :)

https://quasar-shopping.netlify.com/

https://github.com/mayur091193/quasar-shopping

https://github.com/sponsors/mayur091193

Turbo Tabs - Chrome New Tab Extension made with Quasar Framework

Mayur Patel — Thu, 30 Apr 2020 06:03:13 +0000

Hello everyone!

I've made Turbo Tabs - Chrome New Tab Extension using the Quasar framework. Any feedback/suggestions/new feature requests can make my day!

Don't forget to have a look at my sponsor page(link in end) - :)

https://github.com/mayur091193/turbo-tabs

https://chrome.google.com/webstore/detail/pfagelipodlapancgiiolcjafdbmjoob

https://github.com/sponsors/mayur091193