Nuxt SocialSplash module

Generate OG images for your webpages through SocialSplash

Table of Contents

• Nuxt SocialSplash module
  • Table of Contents
  • Install
  • Getting Started
  • Usage
  • Module options
  • License

Install

$ npm install --save nuxt-socialsplash-module
// or
$ yarn add nuxt-socialsplash-module

Getting Started

Add nuxt-socialsplash-module to modules section of nuxt.config.js.

{
  modules: [
    'nuxt-socialsplash-module',
  ]
}

Usage

To generate an image, you can use the generate method by passing the theme to use and it's parameters. To know what parameters to use, please refer to the theme documentation in www.socialsplash.xyz.

this.$socialsplash.generate('enterprise-website', {
  title: 'Increase your social media reach with SocialSplash',
  subtitle: 'Visit website',
  website: 'www.socialsplash.xyz',
  logo_url: 'https://socialsplash.s3.fr-par.scw.cloud/static/logos/socialsplash.png',
  background: '#2b6cb0'
})

Per example, in your head hook you could do:

head () {
  const image = this.$socialsplash.generate('enterprise-website', {
    title: 'Increase your social media reach with SocialSplash',
    subtitle: 'Visit website',
    website: 'www.socialsplash.xyz',
    logo_url: 'https://socialsplash.s3.fr-par.scw.cloud/static/logos/socialsplash.png',
    background: '#2b6cb0'
  })

  return [
    { hid: 'og:image', name: 'og:image', content: image },
    { hid: 'og:image:width', name: 'og:image:width', content: '1200' },
    { hid: 'og:image:height', name: 'og:image:height', content: '628' },
    { hid: 'twitter:image', name: 'twitter:image', content: image },
    { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
  ]
}

Module options

List of possible options in the module:

Option	Default	Required	Description
domain	https://images.socialsplash.xyz	false	Use a different domain if needed as base. This should not be the case most of the time.

License

MIT License