Hi everyone,

Do you want to give back to the Quasar and don’t know where to start?

Do you want to learn something new and need guidance?

Read Quasar contribution guide to get started. Be bold and start today.
Enjoy!

Quasar provides starter kits for SPA, SSR, PWA, Mobile App and Electron App.

Starter Kits for Mobile Development

• https://github.com/djleven/quasar-dockerised-starter - Dockerised Quasar Cordova Android

Starter Kits for Backends with Quasar SPA / PWA / SSR / UMD

• https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress - showing how you can use the Quasar UMD version

JS HapiJS

• https://github.com/gregory-latinier/quasar-starter-kit -

C# / .Net Core

• https://github.com/TrilonIO/aspnetcore-Vue-starter - Vuex, webpack, Web API, Docker, Quasar have to be installed manually
• https://github.com/MitchellMonaghan/DotnetCoreQuasar

PHP / Laravel

• https://laqul.github.io/ - Laravel GraphQL API, Multilanguage Capability, OAUTH 2.0, Social Login, Password Login, User Registration, Reset Password, User Avatar, Firebase Ready
• https://github.com/metalsadman/quasar-laravel - PWA
• https://github.com/neatpro/Laravel-Quasar/tree/master - UMD
• https://blog.aprilpnguyen.com/2017/08/how-to-set-up-quasar-v014-on-laravelvue.html

Python / Django

• https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs - Quasar with Django, Django Rest Framework, Django Channels, and celery. It includes docker-compose for local development and .gitlab-ci.yml for CI/CD using S3 deployment and ECS all defined in ECS. Includes implemented JWT authentication, social authentication with OAuth2 providers (Google and GitHub are included), a WebSocket example, and also testing with Cypress.
• https://github.com/gtalarico/django-vue-template
• https://www.youtube.com/watch?v=_0NarCGgPjw

Ruby / Ruby on Rails

• https://github.com/quasarails/quasarails

Go / Gin

• https://github.com/valasek/quasar-starter-kit-go-gin

API - GraphQL, FeatherJS

• https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress

Others
How to add multi-page support to a Quasar cli project. This will help people having a backend web app without rest api or graphql implementation start using Quasar. It includes an example for django. See StackOverflow - build multiple pages using Quasar or deep dive into the code. Full project is here: https://gitlab.com/noor-projects/noor.

Note
When integrating a project folder (created by Quasar CLI) with an existing backend, a common need is to access the backend API when using the dev server. To achieve this, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend.

I encourage you to create and share your own starter kit.
Please comment under this post and propose to add new, remove or update anything on the list and I will keep this post up to date.

If you want to create a new kit, here is a proposed content

• backend serves Quasar UI via HPPTS (default) or HTTP
• can serve static files
• can handle uploading and downloading the files
• it is up to date with the latest backend and Quasar on major version
• contains readme how to clone and start, basically I can simply clone the repo and start working

Hi all,

this was released in Quasar 1.3.0. See https://dev.to/quasar/hys-1-quasar-1-3-0-15eo and https://quasar.dev/quasar-plugins/dark.

Enjoy.

Hi everyone!

This is a great opportunity to help us spread the word on Quasar and why it’s great via Twitter.

Now you have the ability to share your tech stack or check an existing tech stack around the Quasar framework.

Amazing piece of work

@binaryconstruct, @fakx dark mode was released - https://quasar.dev/style/dark-mode or https://dev.to/quasar/hys-1-quasar-1-3-0-15eo.

Hi all,

this was released in Quasar 1.3.0. See https://dev.to/quasar/hys-1-quasar-1-3-0-15eo and https://quasar.dev/quasar-plugins/dark.

Enjoy.

qenv is not applied when I run quasar dev only when I run yarn dev.
Any hint where I should look?

dev script from package.json

"dev": "cross-env QENV=development quasar dev",

.quasar.env.json

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "development",
    "APP_DOMAIN": "localhost",
    "APP_PORT": "3000",
    "APP_TYPE": "Version for Academic and Non-Profit Organizations",
    "APP_LOGO": "logo-cloud.png"
  },
  "production-da": {
    "ENV_TYPE": "Running Production DataArch",
    "ENV_PROD": "production-dataarch",
    "APP_DOMAIN": "192.168.1.102",
    "APP_PORT": "3000",
    "APP_TYPE": "",
    "APP_LOGO": "logo-dataarch.png"
  },
  "production-cloud": {
    "ENV_TYPE": "Running Production Cloud",
    "ENV_PROD": "production-cloud",
    "APP_DOMAIN": "timesheet.simplesw.net",
    "APP_PORT": "8080",
    "APP_TYPE": "Version for Academic and Non-Profit Organizations",
    "APP_LOGO": "logo-cloud.png"
  }
}

quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.1.5
 Pkg @quasar/app... v1.1.2
 Debugging......... enabled

 app:extension Running "@quasar/qmarkdown" Quasar App Extension... +0ms
 app:extension Running "@quasar/testing-quality" Quasar App Extension... +4ms
 app:extension Running "@quasar/qenv" Quasar App Extension... +1ms
 app:extension Running "@quasar/icon-genie" Quasar App Extension... +349ms
 app:quasar-conf Reading quasar.conf.js +3ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +2ms
 app:quasar-conf Extension(@quasar/qmarkdown): Extending quasar.conf... +4ms
 App Extension (qmarkdown) Info: 'Adding qmarkdown boot reference to your quasar.conf.js'
 App Extension (qmarkdown) Info: 'Adding markdown.styl css reference to your quasar.conf.js'
 app:quasar-conf Extension(@quasar/qenv): Extending quasar.conf... +1ms
! App Extension (qenv): missing QENV environment variable; skipping
 app:webpack Extension(@quasar/qmarkdown): Chaining SPA Webpack config +246ms
 App Extension (qmarkdown) Info: 'Adding markdown loader to chainWebpack in your quasar.conf.js'
 App Extension (qmarkdown) Info: 'Adding .vmd (vue+markdown) loader to chainWebpack in your quasar.conf.js'
 app:webpack Extending SPA Webpack config +7ms
 app:dev Extension(@quasar/icon-genie): Running beforeDev hook... +1ms
 app:generator Generating Webpack entry point +17ms
 app:dev-server Booting up... +3ms


 SPA █████████████████████████ [100%] in ~12s



 DONE  Compiled successfully in 12327ms               11:08:22 AM


 N  App dir........... /home/valasek/Programming/tests/timesheet/
client
    App URL........... http://localhost:8080/
    Dev mode.......... spa
    Pkg quasar........ v1.1.5
    Pkg @quasar/app... v1.1.2
  
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to /index.html
 app:dev-server Opening default browser at http://localhost:8080/
 +13s

vs

yarn dev
yarn run v1.17.3
$ cross-env QENV=development quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.1.5
 Pkg @quasar/app... v1.1.2
 Debugging......... enabled

 app:extension Running "@quasar/qmarkdown" Quasar App Extension... +0ms
 app:extension Running "@quasar/testing-quality" Quasar App Extension... +5ms
 app:extension Running "@quasar/qenv" Quasar App Extension... +1ms
 app:extension Running "@quasar/icon-genie" Quasar App Extension... +350ms
 app:quasar-conf Reading quasar.conf.js +4ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +2ms
 app:quasar-conf Extension(@quasar/qmarkdown): Extending quasar.conf... +6ms
 App Extension (qmarkdown) Info: 'Adding qmarkdown boot reference to your quasar.conf.js'
 App Extension (qmarkdown) Info: 'Adding markdown.styl css reference to your quasar.conf.js'
 app:quasar-conf Extension(@quasar/qenv): Extending quasar.conf... +0ms
 app:webpack Extension(@quasar/qmarkdown): Chaining SPA Webpack config +257ms
 App Extension (qmarkdown) Info: 'Adding markdown loader to chainWebpack in your quasar.conf.js'
 App Extension (qmarkdown) Info: 'Adding .vmd (vue+markdown) loader to chainWebpack in your quasar.conf.js'
 app:webpack Extending SPA Webpack config +6ms
 app:dev Extension(@quasar/icon-genie): Running beforeDev hook... +1ms
 app:generator Generating Webpack entry point +13ms
 app:dev-server Booting up... +4ms


 SPA █████████████████████████ [100%] in ~12s



 DONE  Compiled successfully in 11834ms               11:07:27 AM


 N  App dir........... /home/valasek/Programming/tests/timesheet/
client
    App URL........... http://localhost:8080/
    Dev mode.......... spa
    Pkg quasar........ v1.1.5
    Pkg @quasar/app... v1.1.2
  
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to /index.html
 app:dev-server Opening default browser at http://localhost:8080/
 +12s

@briancaffey thank you for building and sharing your kit. It looks amazing. I have added it to the starter kits.

I am not able to say how solid it is with regard to a technical/architectural part but the documentation and intro description really is easy to consume.

@djleven thank you for sharing. I am creating the list of all starter kits and your kit is now included. Feel free to add via comments all undiscovered kits.
After the consolidation is done I plan to curate the list.

@laqul thank you for sharing. I am creating the list of all starter kits and your kit is now included. Feel free to add via comments all undiscovered kits.
After the consolidation is done I plan to curate the list.

Quasar provides starter kits for SPA, SSR, PWA, Mobile App and Electron App.

Starter Kits for Mobile Development

• https://github.com/djleven/quasar-dockerised-starter - Dockerised Quasar Cordova Android

Starter Kits for Backends with Quasar SPA / PWA / SSR / UMD

• https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress - showing how you can use the Quasar UMD version

JS HapiJS

• https://github.com/gregory-latinier/quasar-starter-kit -

C# / .Net Core

• https://github.com/TrilonIO/aspnetcore-Vue-starter - Vuex, webpack, Web API, Docker, Quasar have to be installed manually
• https://github.com/MitchellMonaghan/DotnetCoreQuasar

PHP / Laravel

• https://laqul.github.io/ - Laravel GraphQL API, Multilanguage Capability, OAUTH 2.0, Social Login, Password Login, User Registration, Reset Password, User Avatar, Firebase Ready
• https://github.com/metalsadman/quasar-laravel - PWA
• https://github.com/neatpro/Laravel-Quasar/tree/master - UMD
• https://blog.aprilpnguyen.com/2017/08/how-to-set-up-quasar-v014-on-laravelvue.html

Python / Django

• https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs - Quasar with Django, Django Rest Framework, Django Channels, and celery. It includes docker-compose for local development and .gitlab-ci.yml for CI/CD using S3 deployment and ECS all defined in ECS. Includes implemented JWT authentication, social authentication with OAuth2 providers (Google and GitHub are included), a WebSocket example, and also testing with Cypress.
• https://github.com/gtalarico/django-vue-template
• https://www.youtube.com/watch?v=_0NarCGgPjw

Ruby / Ruby on Rails

• https://github.com/quasarails/quasarails

Go / Gin

• https://github.com/valasek/quasar-starter-kit-go-gin

API - GraphQL, FeatherJS

• https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress

Others
How to add multi-page support to a Quasar cli project. This will help people having a backend web app without rest api or graphql implementation start using Quasar. It includes an example for django. See StackOverflow - build multiple pages using Quasar or deep dive into the code. Full project is here: https://gitlab.com/noor-projects/noor.

Note
When integrating a project folder (created by Quasar CLI) with an existing backend, a common need is to access the backend API when using the dev server. To achieve this, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend.

I encourage you to create and share your own starter kit.
Please comment under this post and propose to add new, remove or update anything on the list and I will keep this post up to date.

If you want to create a new kit, here is a proposed content

• backend serves Quasar UI via HPPTS (default) or HTTP
• can serve static files
• can handle uploading and downloading the files
• it is up to date with the latest backend and Quasar on major version
• contains readme how to clone and start, basically I can simply clone the repo and start working

@alexui @fogelfish you can try Material Design 2.0 for Sketch, Adobe XD or Figma as Quasar closely follows the MD spec. Below are the links I have found for:

Sketch

• https://materialdesignkit.com/
• https://www.sketchappsources.com/free-source/1601-material-design-sketch-template-v2.html
• https://developertown.com/material-design-2-kit

Figma

• https://www.figma.com/resources/assets/material-design-2/
• https://www.figma.com/resources/assets/material-design-themeing-ui-kit/
• https://www.figma.com/blog/material-design-figma-styles/

Adobe XD

• https://dribbble.com/shots/4182073-Material-Design-Ui-Kit-For-Adobe-XD-And-Sketch
• https://xdkit.ru/tag/material-design-2-0/

I did not try them by myself so if you try an share your feedback it would be highly appreciated.
Let others know how it worked for you.

@metalsadman do I understand this correctly: from @input="(val) => onUpdateDate({id: props.row.id, date: val})" to @input="(val) => {onUpdateDate({id: props.row.id, date: val})}"

this change does not work … full code

<q-input :value="props.row.date | formatDate" dense >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"
                      fit anchor="bottom left" self="top left"
                    >
                      <q-date :value="props.row.date" @input="(val) => {onUpdateDate({id: props.row.id, date: val})}"
                        mask="YYYY-MM-DD" :rules="['date']" first-day-of-week="1"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

hmm, so now sure how to continue … @metalsadman any advice on what can I try?

I removed acync/await but got the same, broken, functionality.

    confirmDiffrentWeek (d) {
      return Promise.new(this.$refs.confirm.open('Please confirm', 'You selected ' + format(parseISO(d), 'iiii, MMM do', Intl.DateTimeFormat().resolvedOptions().timeZone) + '. The record will be moved to another week. Continue?', { color: 'bg-warning' }))
    },
    onUpdateDate (newValue) {
      this.$nextTick(function () {
        console.log(this.$refs.qDateProxy)
        this.$refs.qDateProxy.hide()
      })
      let payload = {
        id: newValue.id,
        type: 'date',
        value: newValue.date
      }
      if (isWithinInterval(parseISO(newValue.date), { start: this.dateFrom, end: this.dateTo })) {
        this.$store.dispatch('reportedHours/updateAttributeValue', payload)
      } else {
        if (this.confirmDiffrentWeek(newValue.date)) {
          this.$store.dispatch('reportedHours/updateAttributeValue', payload)
          this.$store.dispatch('settings/jumpToWeek', parseISO(newValue.date))
        }
      }
    },