I can't get snipcart to work with nuxt. "Tag #snipcart not found on the page"

Support
#1

Hello! New here.

I’m struggling making snipcart to work with nuxt. I get the error:

log

But the div is indeed on the page:

691×501 23.5 KB

The api key is the one for testing.

I used this tutorial Building a Strapi E-Commerce with Nuxt.js [Tutorial] - Snipcart as reference, but with snipcart v3. The hidden div is on the default layout, and the scripts are in the nuxt.config. It is local development.

Any idea what I could be missing? Thanks ahead!

#2

@rafael-lua

The api key seems to be added dynamically via javascript. This means the snipcart script might run before the api key was set. Setting the api key like so will fix your issue:

<template>
  <div>
    <nuxt />
    <div
      hidden
      id="snipcart"
      data-api-key="YOUR_API_KEY"
    ></div>
  </div>
</template>
#3

Hi! The tutorial use this same snipped that you shared, which is the one I used as well:

template
template1210×461 27.8 KB

But doesn’t seem to work.

I will try the https://snipcart.nuxtjs.org/ plugin and see how it goes.

EDIT: The plugin worked fine. Weird why didn’t work directly though.