Meta plugin - working with mixins

[lucassbgomes]

Hi! I am using version 0.17.15, I am trying to use the meta plugin dynamically, with the title worked, but with the meta description and keywords does not load the data of the variable, I followed the example: https://github.com/quasarframework/quasar-framework.org/blob/dev/source/components/meta-plugin.md

I tried this way: meta () { return { title: this.titleSite, meta: { description: { name: 'description', content: this.descriptionSite } }, ... }

Where this.titleSite and this.descriptionSite comes from a mixin, someone can help?

[123mitnik]

you can set some meta with

  meta () {
    return {
       meta: [
         { 'property': 'og:description', 'content': 'pageContent', 'vmid': 'og:description' },
         { 'property': 'og:title', 'content': 'pageTitle', 'vmid': 'og:title' },
         { 'property': 'og:url', 'content': 'siteUrl', 'vmid': 'og:url' }
      ]
    }
  }

sadly the above is useless with fb open graph (if not ssr or prerender) .. but this is different story

[rstoenescu]

@123mitnik this refers to Quasar's Meta plugin -- which is recommended against all alternatives due to its perf and tight integration with Quasar.

[rstoenescu]

This can be closed now. Works on v1. Please take note of the warning in docs though:

Just make sure not to duplicate content that already exists in /src/index.template.html. If you want to use the Meta plugin, the recommended way is to remove the same tags from the html template. But on use-cases where you know a tag will never change and you always want it rendered, then it’s better to have it only on the html template instead.

[123mitnik]

@rstoenescu yes.. i was talking about the quasar plugin not for third party alternatives.

for be it works by setting it like this

  meta () {
    return {
      title: this.title,
      meta: [
        { 'name': 'description', 'content': this.descriptionContent }
      ]
    }
  }

[rstoenescu]

@123mitnik The correct syntax (as specified in docs) is:

// meta tags
    meta: {
      description: { name: 'description', content: 'Page 1' },
      keywords: { name: 'keywords', content: 'Quasar website' },
      equiv: { 'http-equiv': 'Content-Type' content: 'text/html; charset=UTF-8' }
    },

It should now work with mixins on latest v1.

[123mitnik]

unfortunately this way its not working :( inside my quasar.conf i have

      // Quasar plugins
      plugins: [
        'Notify',
        'Meta'
      ]

  @quasar/cli - 1.0.0-beta.7
  quasar - 1.0.0-beta.21 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-beta.22 -- Quasar Framework App CLI

the only way to set the description and the rest of the tags (the only exception is the title) is with the syntax i showed above .. anyway you can leave this issue closed... it may be that something is broken at my end

[rstoenescu]

@123mitnik if something works with your syntax, it means you're not using the Quasar Meta plugin. It means you have installed some other package handling your Meta out there.

[123mitnik]

here is what i have .. i guess you're right .. i just don't remember installing and using something different .. no trace inside the dependencies . Don't want to waste your time on this. it works the way it is on my project

  "dependencies": {
    "@quasar/extras": "^1.1.2",
    "apollo-cache-inmemory": "^1.5.1",
    "apollo-client": "^2.5.1",
    "apollo-link-context": "^1.0.17",
    "apollo-link-error": "^1.1.10",
    "apollo-link-http": "^1.5.14",
    "apollo-utilities": "^1.2.1",
    "axios": "^0.18.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "croppie": "^2.6.3",
    "dummyjs": "^1.1.7",
    "epic-spinners": "^1.0.4",
    "filepond": "^4.4.2",
    "filepond-plugin-file-poster": "^2.0.2",
    "filepond-plugin-file-validate-size": "^2.1.3",
    "filepond-plugin-file-validate-type": "^1.2.4",
    "filepond-plugin-image-crop": "^2.0.3",
    "filepond-plugin-image-edit": "^1.2.0",
    "filepond-plugin-image-exif-orientation": "^1.0.6",
    "filepond-plugin-image-preview": "^4.1.0",
    "filepond-plugin-image-resize": "^2.0.4",
    "filepond-plugin-image-transform": "^3.2.4",
    "filepond-plugin-image-validate-size": "^1.2.3",
    "fsevents": "^1.2.7",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "intersection-observer": "^0.5.1",
    "laravel-echo": "^1.5.3",
    "lodash-es": "^4.17.11",
    "node-fetch": "^2.3.0",
    "plate-vue-dfp": "^1.3.65",
    "pusher-js": "^4.4.0",
    "quasar": "^1.0.0-beta.21",
    "v-lazy-image": "^1.3.2",
    "v-viewer": "^1.4.0",
    "vue-apollo": "^3.0.0-beta.28",
    "vue-async-computed": "^3.6.1",
    "vue-autosuggest": "^1.8.3",
    "vue-avatar": "^2.1.7",
    "vue-awesome-swiper": "^3.1.3",
    "vue-echo-laravel": "^0.0.6",
    "vue-filepond": "^5.0.0",
    "vue-google-login": "^1.0.3",
    "vue-i18n": "^8.10.0",
    "vue-markdown": "^2.2.4",
    "vue-masonry": "^0.11.7",
    "vue-masonry-css": "^1.0.3",
    "vue-recaptcha": "^1.1.1",
    "vue2-touch-events": "^1.1.2",
    "vuelidate": "^0.7.4",
    "vuex-persist": "^2.0.0"
  },

[farwish]

Cool, if someone initialize attributes in created lifecycle, we can get the dynamic title from attribute by meta function.

  data () {
    return {
      a: ''
    }
  },
  // The calling chain is App.vue > SomeLayout.vue > IndexPage.vue
  meta () {
    return {
      title: this.a
    }
  },

Some notes:

WARNING

Just make sure not to duplicate content that already exists in 
/src/index.template.html. If you want to use the Meta plugin, the 
recommended way is to remove the same tags from the html template. But on 
use-cases where you know a tag will never change and you always want it 
rendered, then it’s better to have it only on the html template instead.