Quasar Dev

Installation, Configuration, Helpful Links

Installation

Create a Project

$npm init quasar@latest

- App with Quasar Cli
- Project folder: jmr-portfolio
- Quasar v2 (Vue 3 | Latest and greatest)
- Javascript
- Quasar App CLI with Vite 6 (v2)
- Package name: jmr-portfolio
- Project product name: jmr-portfolio
- Project description: jmr-portfolio
- Composition API with <script setup>
- Sass with SCSS syntax (We can also choose not to setup to use Css)
- State Management (Pinia)
- Add Prettier for code formatting: n
- Yes, use npm

Install Quasar CLI

$npm i -g @quasar/cli

Run Project

$npm run dev

Build Project

$quasar build -m <mode>

Replace <mode> with one of the following:
- spa (Single Page Application)
- ssr (Server-Side Rendering)
- pwa (Progressive Web App)
- bex (Browser Extension)
- cordova (for mobile apps with Cordova)
- capacitor (for mobile apps with Capacitor)
- electron (for desktop apps)

Configuration

Prevent Opening New Browser Tab

  <q-item
    clickable
    tag="a"
    target="_self"
    :href="props.link"
  >
  <!--  target="_blank" -->

Change the URL Path

//quasar.config.js
vueRouterMode: 'history', //http://localhost:9001/about
               'hash',    //http://localhost:9001/#/about

Sample Route

//router/routes.js
const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'about', name:'About', component: () => import('pages/AboutPage.vue') },
      { path: 'github', name:'Github', component: () => import('pages/GithubPage.vue') },
      { path: 'myprojects',name:'My Projects', component: () => import('pages/MyProjectsPage.vue') },
      { path: 'blogs', name:'Blogs', component: () => import('pages/BlogsPage.vue') },
      { path: 'resume', name:'Resume', component: () => import('pages/ResumePage.vue') },
      { path: 'contactme', name:'Contact Me', component: () => import('pages/ContactMePage.vue') },
    ]
  }

Get Router Console Log

//router/index.js
  Router.beforeEach((to, from, next)=>{
    console.log(to);
    document.title = to.name //Change Page Title
    next();
  })

Prevent Page Refresh

//src/components/EssentialLinks.vue
 <!-- <q-item
    clickable
    tag="a"
    target="_self"
    :href="props.link"
  > -->

<!-- Change tag to 'router-link' Quasar use Vue Router by default -->
  <q-item
    clickable
    tag="router-link"
    :to="props.link"

Access Route Values

 <q-toolbar-title>
    {{ $route.name }}
</q-toolbar-title>

Troubleshoot

Adding “fullscreen” class in q-page may cause q-item clickable not to work

<q-item clickable></q-item>

<q-page class="fullscreen">
</q-page>

Helpful Links

Quasar Sample Repository

Get John Mark’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

https://github.com/pollyolly/QUASAR-NOTES

Quasar Icons

https://fonts.google.com/icons

Quasar Charts

https://quasar-apexcharts.netlify.app/#/

Dynamic Page

https://www.youtube.com/watch?v=Pcrzy1f1fK4