Suggestion/Feedback from a NEW user's Perspective!



  • @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:
    https://quasar-framework.org/guide/app-plugins.html

    Examples of plugins I use:

    import AnimatedVue from 'animated-vue'
    
    export default ({ Vue }) => {
      Vue.use(AnimatedVue)
    }
    
    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: https://www.npmjs.com/package/slug this project is dead
    // now using dodoslug, a fork of node-slug
    // See: https://github.com/dodo/node-slug
    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. 😄

    Scott



  • @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: [
          'animated-vue',
          'axios',
          'download',
          'lodash',
          'moment',
          'slug'
        ],
    


  • @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.

    Scott



  • 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.

    Scott