Quasar Framework

danbars

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.

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'
}
```

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.

Run npm install --save-dev sitemap-webpack-plugin

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'
      })
  }
}

That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google

Make sure you have all the metatags on each page.

Start by generating all the tags that you need in https://metatags.io/ for the home page.
The Tags that are static for all pages of the site, you can place in index.template.html in the head section
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'
]
```

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

danbars

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)

danbars

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

danbars

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

danbars

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?

danbars

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

danbars

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.

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'
}
```

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.

Run npm install --save-dev sitemap-webpack-plugin

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'
      })
  }
}

That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google

Make sure you have all the metatags on each page.

Start by generating all the tags that you need in https://metatags.io/ for the home page.
The Tags that are static for all pages of the site, you can place in index.template.html in the head section
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'
]
```

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

danbars

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

danbars

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

danbars

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?

danbars

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

danbars

@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

danbars

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)

danbars

@danbars

Best posts made by danbars

Latest posts made by danbars