Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dev
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Nuxt SocialSplash module

npm (scoped with tag) npm js-standard-style CircleCI

Generate OG images for your webpages through SocialSplash

Table of Contents

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

About

Generate OG images on the fly for your website through SocialSplash

Topics

Resources

License

Releases

No releases published

Packages

No packages published