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. danbars
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 10
    • Best 4
    • Groups 0

    danbars

    @danbars

    9
    Reputation
    10
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    danbars Follow

    Best posts made by danbars

    • Quasar SEO tips

      Here are some tips on how to improve SEO when using quasar to build a web site. The following were steps that I used to improve seo of https://charttt.com and are the result of some trial and error.

      1. Use history router mode. The default hash mode is bad for SEO as it is considered internal links on the same page. To config that, in quasar.conf.js file set the following

        build: {
           vueRouterMode: 'history'
        }
        
      2. Make sure you have sitemap.xml, and submit it to Google via search console. To generate sitemap at build time, I used sitemap-webpack-plugin.

        1. Run npm install --save-dev sitemap-webpack-plugin
        2. In quasar.conf.js add the following:
          // this is at the top of the file
          const SitemapPlugin = require('sitemap-webpack-plugin').default
          const paths = [
            { path: '/' },
            { path: '/pricing' }
            // add all pages here
          ]
          // down on the "build" section
          build: {
            extendWebpack (cfg) {
              cfg.plugins.push(
                new SitemapPlugin('https://charttt.com', paths, {
                  filename: 'sitemap.xml',
                  // the following are the defaults for all paths. You can set them separately per path in the paths array
                  lastmod: true,
                  changefreq: 'weekly',
                  priority: '0.8'
                })
            }
          }
          
        3. That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google
      3. Make sure you have all the metatags on each page.

        1. Start by generating all the tags that you need in https://metatags.io/ for the home page.
        2. The Tags that are static for all pages of the site, you can place in index.template.html in the head section
        3. For all other tags, I used quasar meta plugin that allows setting meta tags from within a component. To enable it edit quasar.conf.js file, and add the plugin:
          plugins: [
            'Meta'
          ]
          
        4. Some tags have the same value. For example title, og:title and twitter:title are likely to have the same value. Same goes for description, og:description, twitter:description. And rel='canonical', og:url, twitter:url. I didn’t want to repeat that logic inside any component that has to override these value, so this is what I did:
          • I’ve created src/utils/meta.js file that encapsulates the above logic. This is the file:
          export default function meta () {
            const metaObj = { meta: {} }
            if (!this.metaTags) {
              return metaObj
            }
            if (this.metaTags.title) {
              console.log('adding title')
              metaObj.title = this.metaTags.title
              metaObj.meta.ogTitle = { name: 'og:title', content: this.metaTags.title }
              metaObj.meta.twitterTitle = { name: 'twitter:title', content: this.metaTags.title }
            }
            if (this.metaTags.description) {
              console.log('adding desc')
              metaObj.meta.description = { name: 'description', content: this.metaTags.description }
              metaObj.meta.ogDescription = { name: 'og:description', content: this.metaTags.description }
              metaObj.meta.twitterDescription = { name: 'twitter:description', content: this.metaTags.description }
            }
            if (this.metaTags.url) {
              console.log('adding url')
              metaObj.meta.ogUrl = { name: 'og:url', content: this.metaTags.url }
              metaObj.meta.twitterUrl = { name: 'twitter:url', content: this.metaTags.url }
              metaObj.meta.canonical = { rel: 'canonical', href: this.metaTags.url }
            }
            if (this.metaTags.image) {
              console.log('adding image')
              metaObj.meta.ogImage = { name: 'og:image', content: this.metaTags.image }
              metaObj.meta.twitterImage = { name: 'twitter:image', content: this.metaTags.image }
            }
            return metaObj
          }
          
          
          • In each component that wants to override the tags (you should add it at the main layout.vue too with the “root” values):
          <script>
            import meta from '../utils/meta.js'
            export default {
              data () {
                return {
                  metaTags: {
                    description: 'description...',
                    title: 'My page | My site',
                    url: 'canonical url',
                    image: 'absolute url to share image'
                  }
                }
              },
              meta //this is the method that the plugin is using
            }
          </script>
          

      If you have more tips, please do share them.
      I hope this helps someone
      Cheers

      posted in Show & Tell
      D
      danbars
    • RE: I can't focus my q-input...

      I have the same issue. In my case I tried to set focus immediately after the QInput was created with v-for.
      I tried setting focus inside this.$nextTick but it didn’t work. The focus was set and immediately blurred.
      I was able to make it work by setting the focus inside setTimeout:

      AddItemToArray(item) //this adds an item which creates another qinput that is behind v-for
      const _this = this
      let fields = _this.$refs.myinput
      setTimeout(() => {
        fields[fields.length - 1].focus()
      }, 500)
      
      posted in Help
      D
      danbars
    • RE: How can I hide a column

      Link has changed: https://quasar.dev/style/visibility#Window-Width-Related

      basically lt- and gt- prefixes allow visibility on resolutions less than or greater than what is defined. E.g. lt-lg will be displayed on xs, sm and md

      posted in Framework
      D
      danbars
    • RE: [Solved] PWA force refresh when new version released?

      It seems that Quasar now supports this out of the box: https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa#Reload-%26-Update-Automatically

      posted in Framework
      D
      danbars

    Latest posts made by danbars

    • RE: [Solved] PWA force refresh when new version released?

      It seems that Quasar now supports this out of the box: https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa#Reload-%26-Update-Automatically

      posted in Framework
      D
      danbars
    • Set default time for date-picker

      I have a form that filters some data set. It has from and to input fields, like this one:

      <q-input v-model="fromDate" mask="date" :rules="[v => v === null || v.length === 0 || /^-?[\d]+\/[0-1]\d\/[0-3]\d$/.test(v)]" >
           <q-popup-proxy ref="qFromDateProxy" >
             <q-date today-btn v-model="fromDate" @input="() => $refs.qFromDateProxy.hide()" title="From date" subtitle=" " >
                  <div class="row items-center justify-end q-gutter-sm">
                      <q-btn label="OK" color="primary" flat v-close-popup />
                 </div>
             </q-date>
         </q-popup-proxy>
      </q-input>
      

      I would like both from/to fields to be inclusive in my filter, therefore I’d like the default time for the To field to be 23:59:59 (the default is 00:00:00 which is good for the from field). However, I don’t want to show the time or to allow users choosing it.
      How can I achieve this?

      posted in Framework
      D
      danbars
    • RE: How to make a q-page-container child use full height of its grandparent?

      See here: https://stackoverflow.com/a/59422841/1655734
      row and items-strech classes on the q-page solved the issue for me without min-height on any of the children.
      I did have to set width:100% on the direct child of q-page

      posted in Help
      D
      danbars
    • Quasar SEO tips

      Here are some tips on how to improve SEO when using quasar to build a web site. The following were steps that I used to improve seo of https://charttt.com and are the result of some trial and error.

      1. Use history router mode. The default hash mode is bad for SEO as it is considered internal links on the same page. To config that, in quasar.conf.js file set the following

        build: {
           vueRouterMode: 'history'
        }
        
      2. Make sure you have sitemap.xml, and submit it to Google via search console. To generate sitemap at build time, I used sitemap-webpack-plugin.

        1. Run npm install --save-dev sitemap-webpack-plugin
        2. In quasar.conf.js add the following:
          // this is at the top of the file
          const SitemapPlugin = require('sitemap-webpack-plugin').default
          const paths = [
            { path: '/' },
            { path: '/pricing' }
            // add all pages here
          ]
          // down on the "build" section
          build: {
            extendWebpack (cfg) {
              cfg.plugins.push(
                new SitemapPlugin('https://charttt.com', paths, {
                  filename: 'sitemap.xml',
                  // the following are the defaults for all paths. You can set them separately per path in the paths array
                  lastmod: true,
                  changefreq: 'weekly',
                  priority: '0.8'
                })
            }
          }
          
        3. That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google
      3. Make sure you have all the metatags on each page.

        1. Start by generating all the tags that you need in https://metatags.io/ for the home page.
        2. The Tags that are static for all pages of the site, you can place in index.template.html in the head section
        3. For all other tags, I used quasar meta plugin that allows setting meta tags from within a component. To enable it edit quasar.conf.js file, and add the plugin:
          plugins: [
            'Meta'
          ]
          
        4. Some tags have the same value. For example title, og:title and twitter:title are likely to have the same value. Same goes for description, og:description, twitter:description. And rel='canonical', og:url, twitter:url. I didn’t want to repeat that logic inside any component that has to override these value, so this is what I did:
          • I’ve created src/utils/meta.js file that encapsulates the above logic. This is the file:
          export default function meta () {
            const metaObj = { meta: {} }
            if (!this.metaTags) {
              return metaObj
            }
            if (this.metaTags.title) {
              console.log('adding title')
              metaObj.title = this.metaTags.title
              metaObj.meta.ogTitle = { name: 'og:title', content: this.metaTags.title }
              metaObj.meta.twitterTitle = { name: 'twitter:title', content: this.metaTags.title }
            }
            if (this.metaTags.description) {
              console.log('adding desc')
              metaObj.meta.description = { name: 'description', content: this.metaTags.description }
              metaObj.meta.ogDescription = { name: 'og:description', content: this.metaTags.description }
              metaObj.meta.twitterDescription = { name: 'twitter:description', content: this.metaTags.description }
            }
            if (this.metaTags.url) {
              console.log('adding url')
              metaObj.meta.ogUrl = { name: 'og:url', content: this.metaTags.url }
              metaObj.meta.twitterUrl = { name: 'twitter:url', content: this.metaTags.url }
              metaObj.meta.canonical = { rel: 'canonical', href: this.metaTags.url }
            }
            if (this.metaTags.image) {
              console.log('adding image')
              metaObj.meta.ogImage = { name: 'og:image', content: this.metaTags.image }
              metaObj.meta.twitterImage = { name: 'twitter:image', content: this.metaTags.image }
            }
            return metaObj
          }
          
          
          • In each component that wants to override the tags (you should add it at the main layout.vue too with the “root” values):
          <script>
            import meta from '../utils/meta.js'
            export default {
              data () {
                return {
                  metaTags: {
                    description: 'description...',
                    title: 'My page | My site',
                    url: 'canonical url',
                    image: 'absolute url to share image'
                  }
                }
              },
              meta //this is the method that the plugin is using
            }
          </script>
          

      If you have more tips, please do share them.
      I hope this helps someone
      Cheers

      posted in Show & Tell
      D
      danbars
    • RE: Meta plugin - dynamic properties

      @qyloxe @s-molinari - good ideas, thanks. I will check these directions.

      posted in Help
      D
      danbars
    • RE: Meta plugin - dynamic properties

      Thanks for the answer. But I think it’s not exactly what I’m looking for.
      In your solution I’d still have to define the meta tag og:title in each page, right?
      I.e

      meta () {
          return {
            title: this.title,
            meta: {
              ogTitle: { name:'og:title', content: this.title }
            }
          }
        }
      

      I was looking for a way that the pages will not have to define og:title at all.
      The reason is that there are many such social meta tags, and I don’t want to repeat their template on each page. og:title is just one example

      posted in Help
      D
      danbars
    • Meta plugin - dynamic properties

      Hi,

      I’m trying to use meta plugin to dynamically inject description and title from components.
      For both of these there are additional meta tags that should get the same values:
      og:title, og:description, twitter:title, twitter:description
      I would like to define in the layout component that og:title (as example) should be the same as the title, and in the page component I just want to override the title itself.
      E.g.

      // MainLayout.vue
      <script>
      export default {
        meta () {
          return {
            title: ' My awesome site',
            meta: {
              ogTitle: { name:'og:title', content: this.meta.title }
            }
          }
        }
      }
      </script>
      
      // Page1.vue
      <script>
      export default {
        meta () {
          return {
            title: ' Page 1',
          }
        }
      }
      </script>
      

      This doesn’t work because this.meta is undefined while I’m still running meta() function.
      How can I make og:title tag match title tag that is defined on each page, without repeating its definition on each page?

      posted in Help
      D
      danbars
    • RE: How can I hide a column

      Link has changed: https://quasar.dev/style/visibility#Window-Width-Related

      basically lt- and gt- prefixes allow visibility on resolutions less than or greater than what is defined. E.g. lt-lg will be displayed on xs, sm and md

      posted in Framework
      D
      danbars
    • RE: Using Quasar components within an App Plugin

      @metalsadman said in Using Quasar components within an App Plugin:

      .

      For anyone who land here like I did, to call Notify this way you have to use the method create like this:
      Notify.create('message')
      or
      Notify.create({message:'message', position:'top'...})

      This is equivalent to calling
      this.$q.notify()
      from within a component

      posted in Help
      D
      danbars
    • RE: I can't focus my q-input...

      I have the same issue. In my case I tried to set focus immediately after the QInput was created with v-for.
      I tried setting focus inside this.$nextTick but it didn’t work. The focus was set and immediately blurred.
      I was able to make it work by setting the focus inside setTimeout:

      AddItemToArray(item) //this adds an item which creates another qinput that is behind v-for
      const _this = this
      let fields = _this.$refs.myinput
      setTimeout(() => {
        fields[fields.length - 1].focus()
      }, 500)
      
      posted in Help
      D
      danbars