Nuxt.js script does not get added to head

Question

I attempted to add the Google Identity services script to nuxt.config.ts, which should expose window.google.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    /* snip /*
    head: {
        script: [
            { src: "https://accounts.google.com/gsi/client" },
        ],
    },
});

However, when I try to use it inside of a component, google is undefined.

<script setup lang="ts">
/* snip */

onMounted(() => {
    // google is not defined
    google.accounts.id.initialize({
        client_id: "id.apps.googleusercontent.com",
        callback: signInNew,
    });

    google.accounts.id.renderButton(document.getElementById("signIn")!, {
        type: "standard",
    });
    google.accounts.id.prompt();
});
</script>

Upon further inspection, I found that the script is not added to the head at all. How can I fix this?

did you put it in side the nuxt.config file? app : { head : script : [ { src .. — Ricky-U
– Ricky-U, Commented Oct 5, 2022 at 0:51

henrykohl · Accepted Answer · 2022-11-22 08:19:44Z

1

You may try the following way.

export default defineNuxtConfig({
    app: {
      head: {
          script: [
              { src: "https://accounts.google.com/gsi/client" },
          ],
      },
    }
});

answered Nov 22, 2022 at 8:19

henrykohl

365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vixson Over a year ago

Thank @henrykohl adding the head to app instead of directly to the root of the config worked for Nuxt3

Collectives™ on Stack Overflow

Nuxt.js script does not get added to head

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related