A NuxtJS module thats injects Trustpilot TrustBox code and provide a <trustbox /> component

CodeSandbox: CODE REPRODUCTION | FULL PAGE EXAMPLE

Because I use Nuxt for a lot of my projects and the classic TrustBox installation (injection of the script into the head.scripts of the nuxt.config.js configuration file doesn't work).

First I tried to create a plugin that injects the Trustpilot's script, the widget were displayed but only on the first load (SSR). When I switched between pages, if the widget was into the page, it wasn't displayed anymore because there's an initialize function into the script executed on its load.

So I had to re-execute this initialization function when a new trustbox-widget is added to the DOM and after the script was loaded 1 or more pages before. Then I decided to create the <trustbox /> component which calls the initialization function when it's mounted.

Also, as the businessunitId and businessunitName should always be the same on your site, if you want to display multiple TrustBoxes without specifying these attributes each time, I added a config file.

• Requirements
• Installation
• Getting Started
• i18n Translation

• yarn
• NuxtJS
• NodeJS

yarn add nuxt-trustbox-module

Add nuxt-trustbox-module to modules section of nuxt.config.js:

{
  modules: [

    // Simple usage
    'nuxt-trustbox-module',

    // With options
    ['nuxt-trustbox-module', {
      businessunitId: 'TRUSTPILOT_BUSINESS_ID',
      businessunitName: 'TRUSTPILOT_BUSINESS_NAME',
    }],

 ]
}

Here's how to use it:

<!-- Wrapping with <client-only> (or <no-ssr>) to prevent mismatching content between server and client -->
<client-only>

    <trustbox
        template-id="my_trustbox_template_id"
        style-height="150px"
        style-width="400px" />

</client-only>

It's very simple to automatically translate the TrustBox if you are using nuxt-i18n:

The key attribute is very important to refresh the component when the locale is switched.

<!-- Wrapping with <client-only> (or <no-ssr>) to prevent mismatching content between server and client -->
<client-only>

    <trustbox
      template-id="my_trustbox_template_id"
      :locale="$i18n.locales.find(l => l.code === $i18n.locale).iso"
      :key="$i18n.locale" />

</client-only>

List of possible options in the module which can be passed through the module options or by props:

Note that the options passed through nuxt.config.js are camelCase while options passed through props are kebab-case.