How to Create Web and Mobile Cryptocurrency Apps with Quasar & Vue.JS

In this tutorial, we're going to be creating a web and mobile cryptocurrency application using the exact same codebase utilizing Quasar. For those not familiar with Quasar, it's a convenient framework with a large component library and the ability to write your mobile and web applications at the same time.

Timestamps
0:00 - Intro
0:27 - App Demo
1:41 - Quasar CLI Installation/Project Creation
3:30 - Dev Server and Layout Changes
7:50 - CoinGecko API and Axios Boot File
9:47 - Main Page Code
22:27 - Crypto Details Page and Components
55:26 - Back Button and Page Animations
59:30 - Adding Mobile App Functionality
1:04:35 - Outro

Links
Quasar - https://quasar.dev
Quasar Grid Table - https://quasar.dev/vue-components/table#grid-style
Quasar Mobile App Guide: https://quasar.dev/quasar-cli/developing-capacitor-apps/preparation
Android Studio: https://developer.android.com/studio
Android Emulator Setup: https://developer.android.com/studio/run/managing-avds
Vue.js - https://vuejs.org
CoinGecko API - https://www.coingecko.com/en/api
BitBucket Repo: https://bitbucket.org/TheDiligentDev/quasar-crypto-app/src/master/

VS Code Extensions
Vue VSCode Snippets - https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
Vetur - https://marketplace.visualstudio.com/items?itemName=octref.vetur 
Auto Rename Tag - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Close Tag - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Frosted Glass CSS
.frosted-glass {
 backdrop-filter: blur(7px);
 background-color: #0000001a;
 color: black;
}

Subscribe: https://www.youtube.com/c/DiligentDev/featured 

#vuejs  #quasar  #softwaredeveloper 

How to Create Web and Mobile Cryptocurrency Apps with Quasar & Vue.JS

How to Create a Menu Bar App with Electron & Quasar

Create a Menubar App with Electron & Quasar (for Mac & Windows)

In this video I’m gonna show you how to create a menu bar app - a simple counter app which has its own menubar icon and which runs in the menubar - for both Mac & Windows

We're gonna create this using Electron & the incredible Quasar Framework.

The menubar icon will also work in both light mode (black icon) & dark mode ( white icon).

⚠️ NOTE: Please check out my Important Notes in the pinned comment.

0:00 Introduction
01:23 Getting Started
04:19 Counter App Design
12:04 Data & Methods
15:27 Electron App
19:47 Move App to the Menubar!
25:08 Custom Menubar Icon
29:13 How we Quit this Sucker?!
32:30 Quit with Preload & Context Bridge
40:15 Windows Version
44:59 Windows - Fix the Icon

#electron #quasar #mac #windows

How to Create a Menu Bar App with Electron & Quasar
Khaitan

Khaitan

1644474187

Quasar Framework is Amazing!

Quasar Framework is Amazing!

In this video, I’m gonna show you why Quasar Framework is amazing, by showing you the entire front-end of my app Fudget 2.

Fudget 2 is both a mobile and desktop app that I’ll be publishing to the iOS, Android, Mac & Windows app stores next year.

You’ll see how I’ve used many different Quasar components, including: QCard, QTabs, QDialog, QInfiniteScroll, QSplitter, QDate, QTable & QMarkupTable, QChip, QParallax & QExpansionItem ...

... See how I’ve used Quasar Directives, such as v-touch-swipe

... And how I’ve used external plugins & libraries, such as SortableJS & Cordova Ionic Keyboard plugin.

There’s a lot going on in this app, and probably a lot of stuff you would like to see tutorials on - so I’m gonna need your help.

As I’m showing you around the front-end of this app, please leave a comment below letting me know the features or aspects of Fudget 2 that you’d like to see a tutorial on - and I’ll create videos for the most requested tutorials

00:00 Introduction
01:03 What is Fudget 2?
02:37 Budgets Page (QCard, QTabs, QDialog, v-touch-swipe, SortableJS)
09:59 Entries Page (QInfiniteScroll, QSplitter, QDate, QTable, QChip, ChartJS, Ionic Keyboard)
26:48 Starred Page
28:32 Settings Page
31:09 Account Page (QParallax, QMarkupTable, QExpansion, Loading Plugin)
37:39 Desktop App Version

#quasar 

Quasar Framework is Amazing!
Sean Robertson

Sean Robertson

1626321318

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#3] (Real World App #11)

In this video, you’re gonna carry on using Quasar 2 & Vue 3, to finish our iOS-style app with beautiful iOS-style page transitions - where all pages have their own routes.

This app features:

  • Multiple sections with child pages
  • Routes for all pages & child pages
  • Pages that keep alive
  • Swipe to go back
  • Dynamic content
  • All the behaviour you would expect from a mobile app
  • And much more!

We’ll also get this app running and working as a Real iOS App on a Real iOS device!

In this series I’m documenting my journey creating a real world app from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows App Stores.

👉 Source Code: https://dannys.link/iostransitionscode

#quasar #vue #ios

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#3] (Real World App #11)
Sean Robertson

Sean Robertson

1625069770

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#2] (Real World App #10)

In this video, you’re gonna carry on using Quasar 2 & Vue 3, to create our app with beautiful iOS-style page transitions - where all pages have their own routes - from scratch.

This app features:

  • Multiple sections with child pages
  • Routes for all pages & child pages
  • Pages that keep alive
  • Swipe to go back
  • Dynamic content
  • All the behaviour you would expect from a mobile app
  • And much more!

We’ll also get this app running and working as a Real iOS App on a Real iOS device!

In this series I’m documenting my journey creating a real world app from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows App Stores.

In each episode of this series, I’m gonna:

  • give a progress report of where I’m up to
  • talk about what I’ve learned
  • talk about any problems I’ve encountered
  • show you any interesting code & explain it
  • let you know what I’m gonna do next

0:00 Introduction
1:42 Header Back Button
5:24 Fix Header Title
7:39 Parallax Effect: Style
15:41 Parallax Effect: Add Class
23:55 Grandchild Page
28:25 Questions Section
34:05 Prevent Animations when Changing Section (#1)
38:11 Prevent Animations when Changing Section (#2)
45:49 Remember the Deepness!

👉 My Courses - https://dannys.link/courses
👉 Download Fudget: https://www.fudget.com
👉 My VSCode Setup - https://dannys.link/vscodesetup
👉 DONT CLICK THIS - https://dannys.link/dontclick

#vue #quasar

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#2] (Real World App #10)
Imani  Gorczany

Imani Gorczany

1624948673

Quasar Framework 2.0: A Way to Build Vue.js 3-based UIs Quickly

Quasar Framework 2.0: A Way to Build Vue.js 3-based UIs Quickly

Quasar Framework - Build high-performance VueJS user interfaces in record time

Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both.

#quasar #vue #javascript #web-development #webdev

Quasar Framework 2.0: A Way to Build Vue.js 3-based UIs Quickly
Sean Robertson

Sean Robertson

1623898595

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#1] (Real World App #9)

In this video, you’re gonna learn how to use Quasar 2 & Vue 3, to create an app with beautiful iOS-style page transitions - where all pages have their own routes - from scratch.

This app features:

  • Multiple sections with child pages
  • Routes for all pages & child pages
  • Pages that keep alive
  • Swipe to go back
  • Dynamic content
  • All the behaviour you would expect from a mobile app
  • And much more!

We’ll also get this app running and working as a Real iOS App on a Real iOS device!

In this series I’m documenting my journey creating a real world app from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows App Stores.

In each episode of this series, I’m gonna:

  • give a progress report of where I’m up to
  • talk about what I’ve learned
  • talk about any problems I’ve encountered
  • show you any interesting code & explain it
  • let you know what I’m gonna do next
  • 0:00 Introduction
  • 2:20 Progress Report
  • 15:28 iOS Page Transitions: Getting Started
  • 19:43 iOS-Style Layout
  • 23:27 Routes & Pages
  • 25:25 Global Page Component
  • 29:46 Page Component - Style
  • 36:20 Dynamic Header & Body Components
  • 40:47 Child Page & Router View
  • 44:05 Child Page Transition

#quasar #vue

Quasar & Vue 3: iOS Page Transitions WITH Routes! [#1] (Real World App #9)

Calculadora [JavaScript + Vue.js 3 + Quasar]

Vamos a crear una Calculadora con Javascript, Vue.js y Quasar. Tutorial paso a paso para reforzar lo aprendido de nuestro curso de Quasar Next.

🧨Curso Vue.js 3 + Firebase [UDEMY] http://curso-vue-js-udemy.bluuweb.cl

Links:
💩 https://bluuweb.github.io/vue-3-ui/01d-calculadora/
💩 Quasar curso [Lista de reproducción]: https://bit.ly/2R0u9UF

#javascript #vue #quasar

Calculadora [JavaScript + Vue.js 3 + Quasar]
Sean Robertson

Sean Robertson

1622688709

Quasar & Vue 3: Let's Create a Badass Tooltip! (Real World App #8)

In this video, you’re gonna learn how to create a badass Tooltip component, using Quasar 2 & Vue 3 - from scratch.

This tooltip takes Quasar’s default tooltip component and supercharges it with a big chunky design, drop shadow, arrows that we can place in 12 different places.

We can also show this tooltip programmatically, hide it after a delay, and we can even add a close button to it and customise its colors.

In this series, I’m documenting my journey creating a Real World app, Fudget 2, from scratch, using Quasar 2, Vue 3 & Composition API. An app that will ultimately be deployed to the iOS, Android, Mac & Windows app stores.

👉 Source Code: https://dannys.link/badasstooltipcode

In each episode of this series, I’m gonna:

  • give a progress report of where I’m up to
  • talk about what I’ve learned
  • talk about any problems I’ve encountered
  • show you any interesting code & explain it
  • let you know what I’m gonna do next
  • 0:00 Introduction
  • 1:51Getting Started
  • 4:31 Create Tooltip Component
  • 8:16 Tooltip Design
  • 10:50 Arrow Design
  • 14:32 Put Arrow Behind the Box
  • 17:44 3 Different Top Arrows
  • 21:35 Bottom, Left & Right Arrows
  • 26:29 Setup an Arrow Prop
  • 34:02 Showcase our Tooltips So Far
  • 38:43 Programmatically Triggered Tooltip
  • 41:12 Hide After Delay
  • 49:06 Tooltip with Close Button
  • 54:15 Custom Colors!

#quasar #vue

Quasar & Vue 3: Let's Create a Badass Tooltip! (Real World App #8)

CHAT APP (Vue 3 + Quasar + Firebase + Auth + Firestore + Realtime Database)

Último video del curso de Quasar (Vue js) + Composition API, en este tutorial crearemos un Chat en tiempo real con Firestore y Auth (email y contraseña).

  • 00:00:00 Presentación
  • 00:01:02 Instalación de Quasar y dependencias
  • 00:04:40 Boot Firebase
  • 00:08:18 Consola Firebase
  • 00:11:00 ApiKeys
  • 00:12:00 Firebase Boot
  • 00:15:34 MainLayout
  • 00:17:43 Vista Login y Registro
  • 00:27:25 Registro (Firebase)
  • 00:32:51 Login (Firebase)
  • 00:34:30 Detectar a usuario
  • 00:37:58 Cerrar sesión (Firebase)
  • 00:41:00 Guardar usuario en Firestore
  • 00:49:25 Leer array usuarios
  • 00:58:29 Pintar array usuarios
  • 01:04:21 Ordenar array usuarios
  • 01:09:00 Vista Formulario enviar mensajes
  • 01:12:04 Vista mostrar chat
  • 01:13:59 Provide/inject uid
  • 01:17:54 Guardar mensaje chat
  • 01:25:57 Leer chat en tiempo real
  • 01:30:57 Watch uid user
  • 01:37:03 Scroll mensajes
  • 01:40:26 Fin :)

Links:
💩 https://bluuweb.github.io/vue-3-ui/01c-firechat/
💩 https://next.quasar.dev/
💩 Quasar curso [Lista de reproducción]: próximamente

#vue #quasar #firebase #database

CHAT APP (Vue 3 + Quasar + Firebase + Auth + Firestore + Realtime Database)
Sean Robertson

Sean Robertson

1622039638

Quasar & Vue 3: Drag & Drop, Touch Events & Parallax (Real World App #7)

In this video, you’ll learn about Touch Events, Drag & Drop, creating an iOS-style parallax effect and more, within a Quasar 2 / Vue 3 project. I’ll also be sharing my thoughts on the Composition API so far.

In this series, I’m gonna document my journey creating a Real World Quasar Framework app from scratch. This app that will ultimately be deployed to the iOS, Android, Mac & Windows app stores.

In each episode of this series, I’m gonna give a progress report of where I’m up to talk about what I’ve learned talk about any problems I’ve encountered show you any interesting code & explain it let you know what I’m gonna do next

  • 0:00 Introduction
  • 0:53 Progress Report
  • 3:28 Swipe to Reveal Options
  • 10:06 Drag to Reorder
  • 14:39 Swipe to Go Back
  • 17:45 Parallax Page Animation
  • 20:32 Pane Header & Footer Spacers
  • 26:57 Composition API: What I Think Now
  • 31:43 Testing on a Real Device
  • 34:11 What next?

#vue #quasar

Quasar & Vue 3: Drag & Drop, Touch Events & Parallax (Real World App #7)

Quasar v.2 - Iconos (Q-icon) #08

Un pequeño video para entender cómo funciona el componente de iconos en Quasar, así podrás agregar diferentes opciones según tus necesidades.

Links:
💩 https://bluuweb.github.io/vue-3-ui/01-quasar/
💩 https://next.quasar.dev/
💩 https://classic.yarnpkg.com/en/docs/install/#windows-stable
💩 Quasar curso [Lista de reproducción]: próximamente

#quasar #vue

Quasar v.2 - Iconos (Q-icon) #08

Quasar v.2 - Fundamentos de Q-Table (pintar y ordenar) #07

Según nuestro ejemplo anterior hoy vamos a comprender como funcionan las tablas en Quasar, es muy sencillo implementar y pintar datos utilizando Vue JS.

Links:
💩 https://bluuweb.github.io/vue-3-ui/01-quasar/
💩 https://next.quasar.dev/
💩 Quasar curso [Lista de reproducción]: https://bit.ly/2R0u9UF

#quasar #vue

Quasar v.2 - Fundamentos de Q-Table (pintar y ordenar) #07
Sean Robertson

Sean Robertson

1621429620

Quasar & Vue 3: Dialogs, Animations & Touch Events (Real World App #6)

In this video, you’ll learn about Custom Dialogs, Animations and Touch Events in a real-world Quasar 2 & Vue 3 Project.

In this series, I’m gonna document my journey creating a Real World Quasar Framework app from scratch. This app that will ultimately be deployed to the iOS, Android, Mac & Windows app stores.

In each episode of this series, I’m gonna

  • give a progress report of where I’m up to
  • talk about what I’ve learned
  • talk about any problems I’ve encountered
  • show you any interesting code & explain it
  • let you know what I’m gonna do next
  • 0:00 Introduction
  • 0:29 Progress Report
  • 2:48 Ask a Question
  • 9:53 Account Section: Dialogs & Buttons
  • 21:19 Budgets Page: Dialogs
  • 28:28 Budgets Page: Touch Slider
  • 36:00 What next?

#quasar #vue

Quasar & Vue 3: Dialogs, Animations & Touch Events (Real World App #6)

Quasar v.2 - Btn, Formularios, Validaciones y Notify #06

Comenzamos con las prácticas en Quasar V.2 trabajando con Vue 3 y composition API. Aplicaremos nuestros primeros componentes trabajados con botones, formularios, validaciones y notificaciones utilizando el Notify.

Links:
💩 https://bluuweb.github.io/vue-3-ui/01-quasar/
💩 https://next.quasar.dev/

#quasar #vue #javascript #web-development #developer

Quasar v.2 - Btn, Formularios, Validaciones y Notify #06