Vue Cli 3 add Iubenda Cookie Banner

When you use Server Side Rendering (SSR) in your Vue project with webpack or some other tool you might see your code doubled down. As this can be caused by adding external Javascript Sources to your Headers here´s a little Workaround.

By using this plugin (https://github.com/chrisvfritz/prerender-spa-plugin) you can add your script after rendering:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const PuppeteerRenderer = PrerenderSPAPlugin.PuppeteerRenderer
const iubenda = '<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script><script type="text/javascript">var _iub = _iub || [];_iub.csConfiguration = {"consentOnContinuedBrowsing":false,"whitelabel":false,"lang":"it","siteId":<your_id>,"floatingPreferencesButtonColor":"#010101","floatingPreferencesButtonCaptionColor":"#ffffff","logLevel":"noLog","askConsentAtCookiePolicyUpdate":true,"countryDetection":true,"gdprAppliesGlobally":false,"cookiePolicyId":<your_id>, "banner":{ "customizeButtonDisplay":true,"customizeButtonColor":"#ffffff","customizeButtonCaptionColor":"#333333","rejectButtonColor":"#0073CE","rejectButtonCaptionColor":"white","position":"float-bottom-center","textColor":"white","backgroundColor":"#ff0132","acceptButtonDisplay":true,"acceptButtonColor":"#222222","acceptButtonCaptionColor":"white" }};</script>'

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'Title'
    }
  },
  pwa: {
    name: 'Cool App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    iconPaths: {
		favicon32: 'icons/android/icon_36.png',
		favicon16: 'icons/android/icon_36.png',
		appleTouchIcon: 'icons/ios/icon_152.png'
	}
  },
  configureWebpack:  {
    plugins: process.env.NODE_ENV === 'production' ? [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        postProcess (context) {
          const bodyEnd = context.html.indexOf('</body>')
          context.html = context.html.substr(0, bodyEnd) + iubenda + context.html.substr(bodyEnd)

          return context
        },
        routes: [ '/'],
        renderer: new PuppeteerRenderer({
          renderAfterTime: 4000
        })
      })
    ] : []
  }
}

Photo by Pankaj Patel on Unsplash