{"id":14971159,"url":"https://github.com/haplifeman/nuxt-trustbox-module","last_synced_at":"2025-10-26T14:31:09.281Z","repository":{"id":37850248,"uuid":"205230987","full_name":"HapLifeMan/nuxt-trustbox-module","owner":"HapLifeMan","description":"A NuxtJS module thats injects Trustpilot TrustBox code and provide a `\u003ctrustbox /\u003e` component","archived":false,"fork":false,"pushed_at":"2023-03-13T16:10:56.000Z","size":1360,"stargazers_count":7,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T20:22:36.147Z","etag":null,"topics":["nuxt","nuxt-module","nuxtjs","nuxtjs-module","trustboxes","trustpilot"],"latest_commit_sha":null,"homepage":"https://yzm19.sse.codesandbox.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HapLifeMan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-29T18:55:41.000Z","updated_at":"2023-03-14T08:12:34.000Z","dependencies_parsed_at":"2023-01-26T15:01:52.475Z","dependency_job_id":null,"html_url":"https://github.com/HapLifeMan/nuxt-trustbox-module","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HapLifeMan%2Fnuxt-trustbox-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HapLifeMan%2Fnuxt-trustbox-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HapLifeMan%2Fnuxt-trustbox-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HapLifeMan%2Fnuxt-trustbox-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HapLifeMan","download_url":"https://codeload.github.com/HapLifeMan/nuxt-trustbox-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347626,"owners_count":19456967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","nuxtjs","nuxtjs-module","trustboxes","trustpilot"],"created_at":"2024-09-24T13:44:47.775Z","updated_at":"2025-10-26T14:31:08.926Z","avatar_url":"https://github.com/HapLifeMan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TrustBox module for Nuxt\n\n[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-trustbox-module/latest.svg)](https://npmjs.com/package/nuxt-trustbox-module)\n[![npm](https://img.shields.io/npm/dt/nuxt-trustbox-module.svg)](https://npmjs.com/package/nuxt-trustbox-module)\n\n\u003e A NuxtJS module thats injects Trustpilot TrustBox code and provide a `\u003ctrustbox /\u003e` component\n\n**CodeSandbox: [CODE REPRODUCTION](https://codesandbox.io/s/nuxt-trustbox-module-example-yzm19) | [FULL PAGE EXAMPLE](https://yzm19.sse.codesandbox.io/)**\n\n## Why this package/module?\n\nBecause 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).\n\nFirst 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**.\n\nSo 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 `\u003ctrustbox /\u003e` component which calls the initialization function when it's mounted.\n\nAlso, 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.\n\n## Table of Contents\n\n* [Requirements](#requirements)\n* [Installation](#installation)\n* [Getting Started](#getting-started)\n* [i18n Translation](#i18n-translation)\n\n## Requirements\n\n* yarn\n* NuxtJS\n* NodeJS\n\n## Installation\n\n```bash\nyarn add nuxt-trustbox-module\n```\n\n## Getting Started\n\nAdd `nuxt-trustbox-module` to `modules` section of `nuxt.config.js`:\n\n```js\n{\n  modules: [\n\n    // Simple usage\n    'nuxt-trustbox-module',\n\n    // With options\n    ['nuxt-trustbox-module', {\n      businessunitId: 'TRUSTPILOT_BUSINESS_ID',\n      businessunitName: 'TRUSTPILOT_BUSINESS_NAME',\n    }],\n\n ]\n}\n```\n\nHere's how to use it:\n\n```vue\n\u003c!-- Wrapping with \u003cclient-only\u003e (or \u003cno-ssr\u003e) to prevent mismatching content between server and client --\u003e\n\u003cclient-only\u003e\n\n    \u003ctrustbox\n        template-id=\"my_trustbox_template_id\"\n        style-height=\"150px\"\n        style-width=\"400px\" /\u003e\n\n\u003c/client-only\u003e\n```\n\n## i18n Translation\n\nIt's very simple to automatically translate the TrustBox if you are using `nuxt-i18n`:\n\n\u003e The `key` attribute is very important to refresh the component when the locale is switched.\n\n```vue\n\u003c!-- Wrapping with \u003cclient-only\u003e (or \u003cno-ssr\u003e) to prevent mismatching content between server and client --\u003e\n\u003cclient-only\u003e\n\n    \u003ctrustbox\n      template-id=\"my_trustbox_template_id\"\n      :locale=\"$i18n.locales.find(l =\u003e l.code === $i18n.locale).iso\"\n      :key=\"$i18n.locale\" /\u003e\n\n\u003c/client-only\u003e\n```\n\n## Module options\n\nList of possible options in the module which can be passed through the module options or by props:\n\n\u003e Note that the options passed through `nuxt.config.js` are `camelCase` while options passed through `props` are `kebab-case`. \n\n| Option              | Default  | Required | Description                                                                                                       |\n|---------------------|----------|----------|-------------------------------------------------------------------------------------------------------------------|\n| businessunitId      | `''`     | true     | Your Trustpilot Business ID, you can find it [here](https://businessapp.b2b.trustpilot.com/#/trustbox/library).   |\n| businessunitName    | `''`     | true     | Your Trustpilot Business Name/URL, it's what comes after `https://trustpilot.com/review/businessunitName`.        |\n| templateId          | `''`     | true     | Template ID of the TrustBox.                                                                                      |\n| styleHeight         | `auto`   | false    | Height of the TrustBox.                                                                                           |\n| styleWidth          | `100%`   | false    | Width of the TrustBox.                                                                                            |\n| locale              | `en-US`  | false    | Locale to display on the TrustBox into a valid ISO format supported by Trustpilot.                                |\n| theme               | `light`  | false    | Theme of the TrustBox (can be `light` or `dark`).                                                                 |\n| tags                | `''`     | false    | Template ID of the TrustBox.                                                                                      |\n| schemaType          | `''`     | false    | Enabled SEO Rich Snippets if configured to `organization`.                                                        |\n| stars               | `''`     | false    | Specify stars to display on some widgets (example: `3,4,5`).                                                      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaplifeman%2Fnuxt-trustbox-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaplifeman%2Fnuxt-trustbox-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaplifeman%2Fnuxt-trustbox-module/lists"}