Nuxt3 - Tag #snipcart not found on the page

Support
#1

I have made an app in Nuxt 3 with contentful and now want to integrate snipcart.
The @nuxtjs/snipcart module is not supported by nuxt 3 so I am using the methods listed in this blogpost for snipcart integration.

I have added the below in nuxt.config.ts
meta: { link: [ { rel: 'preconnect', href: "https://app.snipcart.com" }, { rel: 'preconnect', href: "https://cdn.snipcart.com" }, { rel: 'stylesheet', href: "https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css"}, ], script: [ { src: 'https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js', async: true } ], }, publicRuntimeConfig: { API_URL: process.env.API_URL },

and this in my /layouts/default.vue file (key removed for post)
<div id="snipcart" data-api-key=<my_key> hidden></div>

I originally tried this with my test key but thought that might be part of the issue so I’m now using a live public key and its still not working.

When I run the project on my local host I get the below in the console.
If I inspect the page, I can see a div with the id snipcart in the tree.

image
image1413×369 45.8 KB

What’s going on here? Where should the #snipcart div be if not in the default layout?

Thanks in advance for any help

#2

I have since solved this by installing the snipcart npm package and removing the below from nuxt.config.ts

script: [ { src: ‘https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js’, async: true } ]

#3

I’m having the same problem currently. Could you specify which snipcart npm package you used please ? Thank you

#4

Hey there is a module for snipcart available for nuxt. you can find it here: Snipcart Module · Nuxt

i just integrated a custom version of this, so if you have questions, let me know

1 Like
#5

Thank you very much for your answer, I have indeed tried this package but I’m kind of new with nuxt (I’m just using it since some weeks) and I’m not sure I understand how to implement @nuxtjs/snipcart inside a nuxt project (maybe I’m missing some additional docs or simple examples repos).

I’m trying for now just to build a simple e-commerce with a hardcoded list of products that injects into the html product’s attribute via vue/nuxt. (My final goal is to pull the products list from a CMS to allow adding products via a nice UI/human interface at the end)

I did managed to do it with Vue alone at the very beginning, but the test mode payment wouldn’t work because snipcart couldn’t find the attributes in the html when it was going to check the given url of the project. I found out it was because of the dynamic loading and hydration of Vue (the html is empty without those phases). So I decided to pack it with nuxt because it allows static rendering and makes things easier for my case.

Not sure if I’m not mistaking though.

#6

Yes nuxt will make this a little easier for you since the server response is the html right away. In my case there were some hickups to make sure the domain is listed in your backend, the site you are developing on is accessible to snipcart (open the port if your working with github codespaces) for example. Another option you have with nuxt is to provide the product data over an api endpoint and output all your products with id, price and url and you should be good to go. in your html you basically just put the api endpoint as your url.

1 Like
#7

Alright, so at least I’m on a good path.
Oh, you just mentioned an important point on the url. Let me try this way to see where I get. Thank you for your answer !

1 Like
#8

Let me know if this fixed your issue! :grinning:

1 Like
#9

Hi there @wttdev, thank you for caring mate !
I finally managed to validate a transaction test last night, and was really happy.
The problem I had was with nuxt 3 static pre-rendering engine, I was surprised to discover that it’s not so easy to generate static routes which has dynamic parameters in their url.
I listed the routes manually and then it worked perfectly.
I also found a work around with a nitro hook (in nuxt3) which allow to fetch products from a url and dynamically list all the routes used and generate them.
As mentioned here :

I’m going to apply this trick and all should be fine.

Many thanks for your help ! :handshake: :partying_face:

#10

Update :
I was completely, totally, fully wrong about nuxt3 not easily rendering static files from routes with dynamic parameters.

Looking closely, Nuxt3 has a very nice built-in function for this. I just had to wrap the $fetch call inside the useAsyncData function

<script setup>
const config = useRuntimeConfig()
import { useStore } from 'vuex'

const store = useStore()

const { data: prods } = await useAsyncData(
   'prods', 
   // it is possible here to use a secret not available on the client
   () => $fetch( config.secret_api_url  ),
  )
)
const products = await prods.value.data.products

// using vuex but you could use shared state, I just didn't try it yet
store.commit('setStoreProducts', products)
</script>

With useAsyncData(), I don’t need to define routes rendering anymore in nuxt.config.ts

Now nuxt3 automatically crawls dynamic parameters routes and generates all the corresponding html files with the correct mark up content. So snipcart has no trouble finding the required attributes in the mark up.

I didn’t check nuxt lifecycle correctly at the beginning so I had to enter every route to generate manually, but now it works as easily as I would thought.

Awesome !

1 Like