Optimize for Search Engines

npm i vue-head

// ~/src/main/.js

import Vue from 'vue'
import App from './App'
import PrismicVue from '@prismicio/vue'

// Import the plugin
import VueHead from 'vue-head'

// Register the plugin
Vue.use(VueHead, {
  separator: '-',
  complement: 'My Site',
})

Vue.use(PrismicVue, {
  endpoint: 'https://your-repo-name.cdn.prismic.io/api/v2',
})

new Vue({
  render: (h) => h(App),
}).$mount('#app')

<template>
  <div id="app">
    My Website
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      doc: null,
    }
  },
  methods: {
    async getContent() {
      // Query your content from Prismic
      this.doc = await this.$prismic.client.getByUID('post', 'my-great-post')
      // Trigger an event to update the head after API response
      this.$emit('updateHead')
    },
  },
  created() {
    this.getContent()
  },
  // Format your head tags
  head: {
    title: function() {
      if (this.doc) {
        return {
          inner: this.doc.data.seo_title,
        }
      }
    },
    meta: function() {
      if (this.doc) {
        return [
          {
            name: 'description',
            content: this.doc.data.seo_description,
          },
        ]
      }
    },
  },
}
</script>

<template>
  <div>
    <picture>
      <source
        media="(max-width: 400px)"
        :srcset="image.small.url"
      />
      <source
        media="(max-width: 800px)"
        :srcset="image.medium.url"
      />
      <img 
        :src="image.url"
        :alt="image.alt"
      />
    </picture>
  </div>
</template>

<script>
export default {
  props: {
    image: Object,
  },
}
</script>