No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. stefanvh
    S
    • Profile
    • Following 0
    • Followers 1
    • Topics 3
    • Posts 18
    • Best 7
    • Groups 0

    stefanvh

    @stefanvh

    14
    Reputation
    147
    Profile views
    18
    Posts
    1
    Followers
    0
    Following
    Joined Last Online

    stefanvh Follow

    Best posts made by stefanvh

    • Adding custom functionality to Quasar's components

      First of all, I definitely do not consider myself to be an expert and there are tutorials which describe this process in more detail (for example: https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae). However, sometimes you simply want to know how to do something without knowing all the ins and outs.

      Anyway, I noticed that since Quasar v1 beta was released, a lot of questions or remarks come down to “this was much easier in v0.17”. I also experienced this myself and as annoying as it is that you can’t simply do something, it is the only way to create a proper and maintainable framework. Let’s hope that in the future Quasar will get improved to a point where you can perform everything without programming anything, but until that time arrives we will have to add the functionality ourselves.

      So, the great thing about Quasar v1 is that they seemed to have considered every scenario when developing the base components, so by extending the base you can add your own functionality.

      For example, there is an Input and a Date component, and as explained in the documentation you can combine the two to get a date input (https://v1.quasar-framework.org/vue-components/date#Example--With-QInput). Now, I wanted to hide the popup on selection of a date: https://codepen.io/stefanvh/pen/XGJVMv

      This works fine as of itself, but imagine you would need 10 date inputs. That requires 90 lines of code, and in the case you would want to change something in the future, changing the same thing 10 times. So, what do we do? We create a reusable component:

      quasar new component QDateInput
      If we would copy the code from the codepen into QDateInput.vue, we can import QDateInput.vue as a component in any page in Quasar:

      import qDateInput from 'components/QDateInput.vue'
      
      export default {
        name: 'PageDates',
        components: {
          qDateInput
        }
      }
      

      In the template we can then use it with <q-date-input>:

      <template>
          <q-date-input />
      </template>
      

      However, QInput and QDate have a lot of properties which are and cannot be used in this way. To be able to set the underlying properties of QDate and QInput we will have to add the properties to our QDateInput component:

      <template>
        <q-input
          :value="formattedDate"
          v-bind="{ error, errorMessage, label, stackLabel, hint, hideHint, color, dark, filled, outlined, borderless, standout, bottomSlots, rounded, square, dense, readOnly }"
        >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="proxy">
              <q-date
                v-model="localValue"
                v-bind="{ landscape, color, textColor, dark, readonly, disable, firstDayOfWeek, todayBtn, minimal, options, events, eventColor }"
                @input="$refs.proxy.hide()"
              />
            </q-popup-proxy>
          </q-icon>
      ` </template>
      </q-input>
      </template>
      
      <script>
      import { date as dateUtil } from 'quasar'
      
      export default {
        name: 'QDateInput',
        props: {
          value: {
            type: String,
            default: ''
          },
          error: Boolean,
          errorMessage: String,
          label: String,
          stackLabel: String,
          hint: String,
          hideHint: Boolean,
          filled: Boolean,
          outlined: Boolean,
          borderless: Boolean,
          standout: Boolean,
          bottomSlots: Boolean,
          rounded: Boolean,
          square: Boolean,
          readOnly: Boolean,
          dense: Boolean,
          landscape: Boolean,
          color: String,
          textColor: String,
          dark: Boolean,
          readonly: Boolean,
          disable: Boolean,
          firstDayOfWeek: [String, Number],
          todayBtn: Boolean,
          minimal: Boolean,
          options: [Array, Function],
          events: [Array, Function],
          eventColor: [String, Function]
        },
        computed: {
          localValue: {
            get () { return this.value },
            set (localValue) { this.$emit('input', localValue) }
          },
          formattedDate () {
            return dateUtil.formatDate(this.value, 'DD/MM/YYYY')
          }
        }
      }
      </script>
      
      

      By defining the value prop, you are able to use v-model on the component. This will give a two-way binding with the data you use as v-model. Note that in order to set the date, the data is also coupled with v-model inside the component. Directly using value as v-model for QDate will result in a “Avoid mutating a prop directly” error, so instead we will have to use a local computed value which takes the value of value and emits an input event on change.
      Now we can use the component as followss:

      <q-date-input
        filled
        hint="Hint"
        bottom-slots
        first-day-of-week="1"
        :events="['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']"
        ...
       />
      

      So you can use any of the props of either QInput and QDate and it will change them inside the component accordingly, and we added our own custom functionality. Hiding the popup on select is a really simple example, but it proves the point.

      “Wait, will I have to do this everytime I need a function that isn’t covered by Quasar out of the box?”
      Well, yes, or you let someone else do it. And that is what I think the app extensions will be for.

      posted in Useful Tips (NEW)
      S
      stefanvh
    • RE: Laravel + Quasar 1.0 with Quasar CLI

      It’s your lucky day 😄 :
      https://github.com/stefanvanherwijnen/quasar-auth-starter/tree/quasar1.0

      I just updated it to v1.0 and as far as I tested everything works. Please check it out and I am open to any feedback

      https://github.com/stefanvanherwijnen/quasar-auth-starter

      posted in Starter Kits
      S
      stefanvh
    • RE: Quasar v1.0 beta has arrived

      @pavarine said in Quasar v1.0 beta has arrived:

      Has anyone already mentioned that u guys are VERY awesome? Thank you Razvan and colaborators!

      I’ll have to agree. Quasar 0.x already was the most developer-friendly framework imo, but with v1.0 you guys kicked it to another level. Really impressive.

      posted in Announcements
      S
      stefanvh
    • RE: [Solved] PWA force refresh when new version released?

      Quasar also provides a localstorage API:
      https://quasar-framework.org/components/web-storage.html

      posted in Framework
      S
      stefanvh
    • RE: How to UPGRADE from Quasar 0.17 to 1.0 beta

      You can´t expect to upgrade to v1 and have the CLI tell you what to change.

      Copied from Discord:
      If you a want a “preview” for Upgrade notes (remember, these are the notes), you can look here: https://gist.github.com/hawkeye64/da4b4d662ab1484bd0b532ffd871679e

      This will tell you what has changed, but you will still have to manually check and edit the code yourself. I believe the best way at this moment is to start a new project and copy/rewrite your project from scratch (as there still might be bugs in the beta so you will have to check if you made a mistake or if it is a bug that has to be fixed).

      posted in Help
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      I have been working on a templating solution in the form of an app extension for Quasar. Currently I’m stuck on how to integrate dynamic content. Unfortunately, there is no standard for the communication with the backend. I’ve been using json-api but that does not cover authentication for example.

      I’m wondering what your thoughts are on what is the most convenient way to implement this @Ben-Hayat @qyloxe .
      For example, if Firebase provides authentication, how do you login (which routes, payload, responses) with Quasar? Any standards you use?

      posted in Hangout
      S
      stefanvh
    • RE: Adding custom functionality to Quasar's components

      Turns out there is an easier way to achieve this:

      https://stackoverflow.com/questions/50800945/vue-wrap-another-component-passing-props-and-events/50801786#50801786

      posted in Useful Tips (NEW)
      S
      stefanvh

    Latest posts made by stefanvh

    • RE: Would you use Vue + Quasar to build a Marketing site?

      @qyloxe said in Would you use Vue + Quasar to build a Marketing site?:

      @stefanvh said in Would you use Vue + Quasar to build a Marketing site?:

      I have been working on a templating solution in the form of an app extension for Quasar. Currently I’m stuck on how to integrate dynamic content. Unfortunately, there is no standard for the communication with the backend. I’ve been using json-api but that does not cover authentication for example.

      I’m wondering what your thoughts are on what is the most convenient way to implement this @Ben-Hayat @qyloxe .
      For example, if Firebase provides authentication, how do you login (which routes, payload, responses) with Quasar? Any standards you use?

      This is a too broad question. “Dynamic content” could mean anything, “integrate” is almost a meme word, the “authentication” you write probably means “authorisation”, “convenient” is not a synonym for “secure”. Please just write what are your constraints, what is your expected outcome in specific context, then it would have sense to write anything. Any of us could come with different solutions which could be “convenient” “integrated” and any of buzz words, but without context they all would be wrong. There’s a little learning in this.

      This post exactly describes the problem. There are a billion ways to implement it, but it is not feasible for a templating system to support a billion different methods. I have a working solution myself, but I’m curious how other people approach the same problem and if there maybe is a common solution that would suit most people.

      I meant authentication. Authorization happens using HTTP headers, which fortunately is a pretty standard solution but can also be implemented in a bunch of different ways.

      So, for example simple blog functionality. There needs to be a way to authenticate the user with an username and password. The authentication returns an authorization token. With the authorization token the user should be able to create a blog post (e.g. POST /posts). Unauthenticated people should be able to retrieve this post (e.g. GET /posts or /posts/1). This post is prefetched in Quasar and then displayed in a QCard for example. JSON-API covers creating and fetching resources (the posts), but authentication and even authorization can be performed in a billion different ways. Personally I am using PASETO tokens and /login and /register routes with simply {username, password} as payload with the appropriate HTTP status codes as response. But there are a lot of other ways (http://www.passportjs.org/packages/).

      For a templating system there needs to be some kind of communication standard between the frontend and backend if you want dynamic content (dynamic as in you don’t have to rebuild your app).

      @Ben-Hayat I don’t want to hijack your topic so let me know if I have to move this discussion somewhere else.

      posted in Hangout
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      I have been working on a templating solution in the form of an app extension for Quasar. Currently I’m stuck on how to integrate dynamic content. Unfortunately, there is no standard for the communication with the backend. I’ve been using json-api but that does not cover authentication for example.

      I’m wondering what your thoughts are on what is the most convenient way to implement this @Ben-Hayat @qyloxe .
      For example, if Firebase provides authentication, how do you login (which routes, payload, responses) with Quasar? Any standards you use?

      posted in Hangout
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      Seems to look good to me. I have no experience with Firebase myself but I think it’s a common solution with Vue so it looks like you are on the right track. Perhaps you should resort to Discord if you have any specific questions regarding backend, Firebase etc.
      Good luck with your project :).

      posted in Hangout
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      I get that, it was just an example of functionality which I had been looking for but could not find for Quasar. In your case, I cannot imagine that you are the only person on this planet that needs the marketing functionality. So the challenge is finding the right people to set something up. If you intend to learn a new skill or language in order to create this new marketing app, using an open source framework (Vue) seems better to me personally than a vendor locked solution (Webflow). I’m also sceptical about visual editors as things might look great once rendered, but the actual code can be a mess. Personally I like the simplicity of Vue and knowing exactly what it does.

      For your application I think the main concern is how you would implement the backend logic. Quasar and Vue will pretty much work out of the box if used correctly. A database, multi-tenancy, ACL, backups, API etc is much more complicated to implement. The ‘easy’ solution would be to use a framework (e.g. Laravel), but my experience is that you always run into something that you need to do a bit different than is supported. And ‘hacking’ the functionality into the framework usually causes more problems than it solves.

      As qyloxe said, ideally you should know exactly what you want to implement and how you want to implement it before choosing a tool to use. This in my opinion is the main challenge.

      posted in Hangout
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      I think @mesqueeb is right. You shouldn’t have to reload a SSR page. Any data could be changed reactively and you won’t need to rerender or reload the page.

      @Ben-Hayat
      I think using Quasar with a proper backend is definitely a good option, but probably a lot of work for a single developer. The ‘best’ way would be to collaborate with other developers needing the same functionalities and create an OS project.
      For example, I’d guess that a CMS built with Quasar is something a lot of people could use, but someone has to do the heavy lifting to set something up.

      posted in Hangout
      S
      stefanvh
    • RE: Would you use Vue + Quasar to build a Marketing site?

      I think the flexibility and the lack of a ‘ready-built’ system is a problem with OSS in general. All those ready-built systems are great if you use them exactly like prescribed. Something like Wordpress works great for a simple blog. If you want it to look different you will have to add a theme. If you want functionality X, you add a plugin. What you end up with is a big ball of plugin spaghetti and the corresponding security concerns (https://www.cvedetails.com/vulnerability-list/vendor_id-2337/product_id-4096/).

      The ‘best’ solution is to built your own system starting from scratch and thinking everything through. But who has the time or money for that? People just want something that works, and thus they resort to Wordpress. I have no experience with Wix, but personally I would like to be in control of my own website and know what web technologies it uses. And of course it is a commercial business, so after you assembled your free website and lack feature Y, it is probably available for some extra costs.

      Personally, Quasar is the best I’ve come across yet. It provides the building blocks with clear instructions on how to use them (and maybe more importantly, how NOT to use them). And I am probably biased, but I am pretty sure that the quality of Quasar and Vue is higher than that what Wix offers, but there is no way to know because Wix seems to be closed source.

      Anyways, there will always be the dilemma of full flexibility vs simplicity. The average person wants something that just works, the experienced developer want to be able to use things his way. In any case, you should use the tool that fits you best, but in current times you have to think about security. With the new regulations you have to take responsibility for any data leaks caused by using a ‘simple’ option.

      posted in Hangout
      S
      stefanvh
    • RE: Adding custom functionality to Quasar's components

      Turns out there is an easier way to achieve this:

      https://stackoverflow.com/questions/50800945/vue-wrap-another-component-passing-props-and-events/50801786#50801786

      posted in Useful Tips (NEW)
      S
      stefanvh
    • Adding custom functionality to Quasar's components

      First of all, I definitely do not consider myself to be an expert and there are tutorials which describe this process in more detail (for example: https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae). However, sometimes you simply want to know how to do something without knowing all the ins and outs.

      Anyway, I noticed that since Quasar v1 beta was released, a lot of questions or remarks come down to “this was much easier in v0.17”. I also experienced this myself and as annoying as it is that you can’t simply do something, it is the only way to create a proper and maintainable framework. Let’s hope that in the future Quasar will get improved to a point where you can perform everything without programming anything, but until that time arrives we will have to add the functionality ourselves.

      So, the great thing about Quasar v1 is that they seemed to have considered every scenario when developing the base components, so by extending the base you can add your own functionality.

      For example, there is an Input and a Date component, and as explained in the documentation you can combine the two to get a date input (https://v1.quasar-framework.org/vue-components/date#Example--With-QInput). Now, I wanted to hide the popup on selection of a date: https://codepen.io/stefanvh/pen/XGJVMv

      This works fine as of itself, but imagine you would need 10 date inputs. That requires 90 lines of code, and in the case you would want to change something in the future, changing the same thing 10 times. So, what do we do? We create a reusable component:

      quasar new component QDateInput
      If we would copy the code from the codepen into QDateInput.vue, we can import QDateInput.vue as a component in any page in Quasar:

      import qDateInput from 'components/QDateInput.vue'
      
      export default {
        name: 'PageDates',
        components: {
          qDateInput
        }
      }
      

      In the template we can then use it with <q-date-input>:

      <template>
          <q-date-input />
      </template>
      

      However, QInput and QDate have a lot of properties which are and cannot be used in this way. To be able to set the underlying properties of QDate and QInput we will have to add the properties to our QDateInput component:

      <template>
        <q-input
          :value="formattedDate"
          v-bind="{ error, errorMessage, label, stackLabel, hint, hideHint, color, dark, filled, outlined, borderless, standout, bottomSlots, rounded, square, dense, readOnly }"
        >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="proxy">
              <q-date
                v-model="localValue"
                v-bind="{ landscape, color, textColor, dark, readonly, disable, firstDayOfWeek, todayBtn, minimal, options, events, eventColor }"
                @input="$refs.proxy.hide()"
              />
            </q-popup-proxy>
          </q-icon>
      ` </template>
      </q-input>
      </template>
      
      <script>
      import { date as dateUtil } from 'quasar'
      
      export default {
        name: 'QDateInput',
        props: {
          value: {
            type: String,
            default: ''
          },
          error: Boolean,
          errorMessage: String,
          label: String,
          stackLabel: String,
          hint: String,
          hideHint: Boolean,
          filled: Boolean,
          outlined: Boolean,
          borderless: Boolean,
          standout: Boolean,
          bottomSlots: Boolean,
          rounded: Boolean,
          square: Boolean,
          readOnly: Boolean,
          dense: Boolean,
          landscape: Boolean,
          color: String,
          textColor: String,
          dark: Boolean,
          readonly: Boolean,
          disable: Boolean,
          firstDayOfWeek: [String, Number],
          todayBtn: Boolean,
          minimal: Boolean,
          options: [Array, Function],
          events: [Array, Function],
          eventColor: [String, Function]
        },
        computed: {
          localValue: {
            get () { return this.value },
            set (localValue) { this.$emit('input', localValue) }
          },
          formattedDate () {
            return dateUtil.formatDate(this.value, 'DD/MM/YYYY')
          }
        }
      }
      </script>
      
      

      By defining the value prop, you are able to use v-model on the component. This will give a two-way binding with the data you use as v-model. Note that in order to set the date, the data is also coupled with v-model inside the component. Directly using value as v-model for QDate will result in a “Avoid mutating a prop directly” error, so instead we will have to use a local computed value which takes the value of value and emits an input event on change.
      Now we can use the component as followss:

      <q-date-input
        filled
        hint="Hint"
        bottom-slots
        first-day-of-week="1"
        :events="['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']"
        ...
       />
      

      So you can use any of the props of either QInput and QDate and it will change them inside the component accordingly, and we added our own custom functionality. Hiding the popup on select is a really simple example, but it proves the point.

      “Wait, will I have to do this everytime I need a function that isn’t covered by Quasar out of the box?”
      Well, yes, or you let someone else do it. And that is what I think the app extensions will be for.

      posted in Useful Tips (NEW)
      S
      stefanvh
    • RE: Dynamic content in layout

      I found a solution in https://github.com/LinusBorg/portal-vue.

      yarn add portal-vue
      quasar new boot PortalVue

      boot/PortalVue.js:

      import PortalVue from 'portal-vue'
      
      export default async ({ Vue }) => {
        Vue.use(PortalVue)
      }
      

      In MyLayout.vue:

      <q-menu>
        <q-list style="min-width: 100px">
          <portal-target name="menu" />
        </q-list>
      </q-menu>
      

      In any component:

      <portal to="menu">
        <q-item
          v-close-menu
          clickable
        >
          <q-item-section>
            <div class="text-h6 text-truncate">
              Title
            </div>
            <div class="text-subtitle2">
              Subtitle
            </div>
          </q-item-section>
        </q-item>
      </portal>
      
      posted in Help
      S
      stefanvh
    • Dynamic content in layout

      I did some searching but can’t really find the solution which I am looking for (might not even be possible maybe):
      https://forum.quasar-framework.org/topic/171/could-you-change-the-layout-header-slot-from-a-child-component
      https://forum.quasar-framework.org/topic/2017/dynamic-left-drawer-to-pages

      I’d want to have a button in the toolbar in the main layout which dynamically changes content according to the page which is shown and triggers actions on the shown page. From the topics above I understand that I should define the menu for the whole app and show the right actions by using v-if. However, how does the layout interact with the component in that case?

      An example of the layout would be:

        <q-layout view="lHh Lpr lFf">
          <q-header
            elevated
            class="glossy"
          >
            <q-toolbar>
              <q-btn
                flat
                round
                dense
                icon="menu"
              >
                <q-menu>
                  <q-list style="min-width: 100px">
      		<!-- Dynamic content -->  
                  </q-list>
                </q-menu>
              </q-btn>
            </q-toolbar>
          </q-header>
      
          <q-page-container>
            <router-view />
          </q-page-container>
        </q-layout>
      
      posted in Help
      S
      stefanvh