Step 1: Open the Layout File for Custom Head Code

To add custom head code in Nuxt.js, you first need to open the layout file where you want to include the custom head configuration. This file is typically located in the layouts directory of your Nuxt project.

1. Navigate to the layouts directory in your Nuxt project.
2. Open the default.vue file (or any other layout file you wish to modify).

Your file structure should look something like this:

‍

project-root/
├── layouts/
│   ├── default.vue
│   └── another-layout.vue

In the default.vue file, you can now add your custom head code.

Note:

When adding the following code to the default.vue file, make sure to adjust the placeholder values such as YOUR_API_KEY, YOUR_WEBSITES_ORIGINAL_LANGUAGE, and LANGUAGES_TO_TRANSLATE_TO to match your specific requirements:

<template>
  <div>
    <!-- Your existing template code -->
  </div>
</template>

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/weploy-translate/dist/weploy-translate.css'
        }
      ],
      script: [
        {
          src: 'https://unpkg.com/weploy-translate/dist/weploy-translate.js',
          'data-globalseo-key': 'YOUR_API_KEY',
          'data-use-browser-language': 'true',
          'data-original-language': 'YOUR_WEBSITES_ORIGINAL_LANGUAGE',
          'data-allowed-languages': 'LANGUAGES_TO_TRANSLATE_TO',
          'data-exclude-classes': ''
        }
      ]
    }
  }
}
</script>