Suggestion/Feedback from a NEW user's Perspective!

  • @s-molinari

    Thanks Scott;
    Your point is well taken and I’m trying to go along with it.

    So perhaps you can answer this question for me.
    In regular Vue App, we have the main.js as you see in the screenshot below, before we instantiate the Vue object, we have to check Firebase’s state (To login user async) BEFORE we can instantiate the Vue obj.

    But in Quasar built apps, we get another file called app.js in Quasar folder that does what main.js does, except, this is auto generated and should not be edited.
    So my question (which I can’t find in docs), where do I add codes in the entry point like we did in main.js??

    alt text

  • @Ben-Hayat Ok, so I misread…I followed the herring instead of the bigger fish.

    I think what you are looking for is a Quasar plugin:

    Examples of plugins I use:

    import AnimatedVue from 'animated-vue'
    export default ({ Vue }) => {
    import axios from 'axios'
    export default ({ Vue }) => {
      Vue.prototype.$axios = axios
    // batman's utility belt for javascript
    import _ from 'lodash'
    export default ({ Vue }) => {
      Vue.prototype._ = _
    import moment from 'moment'
    // leave the export, even if you don't use it
    export default ({ Vue }) => {
      Vue.prototype.$moment = moment
    // form validation
    // See: this project is dead
    // now using dodoslug, a fork of node-slug
    // See:
    import slug from 'dodoslug'
    slug.defaults.modes['mymode'] = {
      replacement: '-', // replace spaces with replacement
      symbols: true, // replace unicode symbols or not
      remove: /[._]/g, // (optional) regex to remove characters
      lower: true, // result in lower case
      charmap: slug.charmap, // replace special characters
      multicharmap: slug.multicharmap // replace multi-characters
    slug.defaults.mode = 'mymode'
    export default ({ Vue }) => {
      Vue.prototype.$slug = slug

  • @hawkeye64

    A common use case for Quasar applications is to run code before the root Vue instance is instantiated.

    That’s exactly what I was looking for. Thank you Sir!

  • Glad to have helped. 🙂

  • Yep. quasar-conf.js is a perfect example of that layer of abstraction higher above Vue I was talking about.

    I’m thinking about how getting started as a beginner can be more clear in the docs. I mean quasar init my-project is pretty simple, but where to go from there for a beginner isn’t really given as a clear “guide”. I also think overall concepts about the abstraction that probably most experienced Quasar devs take for granted are also not really clear and need better explaining.

    Let me give it some more thought over the weekend. 😄


  • @s-molinari
    Scott, more docs to make things more transparent, are always welcomed.

    Basically, a workflow of things, after the Quasar CLI has created the project. What those extra files are for. Basically, explanation on anything that Quasar adds on the top of Vue CLI that NEW users are NOT familiar with.

    By disclosing those info and explaining the DIFFERENCES (A table would be nice to show Vue vs. Quasar), and we can immediately see, for example, Vue uses main.js and it is editable but Quasar uses app.js and requires plugins. Then what and how plugins are wriiten and used.
    This way, new users can see things more clear than it is now.

    Hope this helps.

  • @Ben-Hayat Forgot to give you the plug-in information (above) for quasar.config.js:

    module.exports = function (ctx) {
      return {
        // app plugins (/src/plugins)
        plugins: [

  • @hawkeye64
    Thanks Bud!

  • @s-molinari wrote:

    I’m thinking about how getting started as a beginner can be more clear in the docs.

    I think a larger set of example plugins like those that Hawkeye64 gave would be very beneficial. There is an “examples” section in the docs but it doesn’t have actual code examples and is pretty thin.

    Also the Directory Structure page lists “plugins” in the directory tree but I think this deserves more prominent mention since one of the first steps in a real project is often going to be integrating a few third-party or internal libraries. The nomenclature of “plugins” can be a bit deceiving since they also can serve as a more general-purpose initialization (vs Quasar-specific plugins which I first thought they were) which the docs author even acknowledges because the “(app initialization code)” in parentheses is added beside the “plugins” directory.

    So for example the sentence:

    If you are a beginner, all you’ll need to care about is /quasar.conf.js (Quasar App Config file), /src/router, /src/layouts, /src/pages and optionally /src/assets.

    Could be augmented with mention of plugins:

    If you are a beginner, all you’ll need to care about is /quasar.conf.js (Quasar App Config file), /src/router, /src/layouts, /src/pages and optionally /src/assets. Custom initialization code in Quasar is handled via “App Plugins” rather than the typical Vue convention of editing main.js.

    Keep up the great work, Quasar team!

  • @colinm - If you could, make a PR to improve the docs with your suggestion.


  • BTW, I’m working on a blog series to help newcomers to dive into Quasar faster. The topic of this thread will also be covered in that series too. This tutorial blog series is currently planned to be released around the time 1.0 is released and will be released in, most likely, weekly installments.


  • @s-molinari Did you ever create the blog series for newcomers? I just discovered Quasar yesterday, and would be interested in reviewing a newcomer blog series.

  • @digiproduct - No. Unfortunately not. How well do you know Vue?


  • I know Vue a little … enough to be able to use it relatively well in Laravel … but don’t consider myself an expert by ANY means.

    I’m simple awe-struck by the Quasar Framework, and want to start using it, and would love to follow some sort of best practices series to make sure that I begin in the best possible way. I’m busy looking at lots of forum messages and sample code at the moment before I even attempt to try my first installation of Quasar.

  • @s-molinari I just managed to find some tutorials, and I’m about to work my way through them …

  • I’d like to suggest you go through this Udemy course.

    If you got that under your belt, getting deeper into Quasar will be much easier. It’s basically then just learning what the CLI offers.


  • Hi Scott, please when you start the blog series write a note here so that we can get notified. Release 1 seems very close… I just discovered Quasar and would really test: at first glance docs, support, look and richness of components seem awesome! I stumbled upon Quasar coming from Vuetify and looking for a splitter with rtl support!

  • Unfortunately, my intentions to make a “beginner’s introduction” blog have died. I’d like to point everyone to this video set, which is being done and looks pretty good.

    Write to him in the comments that you definitely want to see this work done to the end. 😃


  • @s-molinari @sandroden I will echo Scott’s recommendation.

    I’ve followed that series, and I’ve had some email conversations with Danny Connell directly. It’s going to be a total of 10 videos with a new video released each Monday, so there should be a 5th video today. Danny has a good training style.

    Andre Madarang also has a Quasar tutorial … plus he has some other tutorials about Vue which are useful too. Andre also has a good training style.

  • @s-molinari
    have you created the blog ?

Log in to reply