0

I am coding a blog using Nuxt.js and ButterCMS API for backend and for display posts.
I am loading some JavaScript code for display my posts correctly, that is working very well.
The problem is that when I navigate via the menu (so via NuxtLink), the script of each page is not loaded. When I refresh the page, everything is working correctly. I don't want to make a script that refresh automatically the page when clicking on an item of the menu because it will remove Nuxt transition between pages.
I already seen several posts with the same problem as mind on GitHub and Stack Overflow, but without solution that was working for me.
Here is my code that is directly in script tag in a Vue page :

import { butter } from "~/plugins/buttercms";

butter.page.retrieve("*", "simple-page").then(() => {
  const createScript1 = document.createElement("script");
  createScript1.src = "../../script/post-informations.js";
  document.head.appendChild(createScript1);
});

const createScript2 = document.createElement("script");
createScript2.src = "https://sibforms.com/forms/end-form/build/main.js";
document.head.appendChild(createScript2);
MH info
  • 52
  • 8
  • Why are you not importing the JS script for the first one with `import` directly? I'm not sure of the benefit of creating that with a script. Then, what is the second URL? Doesn't it have an NPM package? Also, what is your butter plugin doing exactly? Are you sure this one is triggered properly? We need more context here. Otherwise, I have also answered how to load 3rd party scripts if you want to check on my profile. – kissu Oct 01 '22 at 10:26
  • I just followed the docs of ButterCMS. I’ve also installed the package, like they said to do. The plugin getting every post informations and display it on my pages. But my plugin I always loaded, it is for the other scripts that there is a problem. – MH info Oct 01 '22 at 10:30
  • And I didn’t imported directly the first script because it have to be imported after that the ButterCMS API is loaded – MH info Oct 01 '22 at 12:27
  • Which docs, do you have a link? Importing from a CDN will be slower and more risky than using an NPM package. If there is an issue with the other ones but I'm not sure what it is supposed to do, I'm not sure how we can help you here. If you need to import it after the API is loaded, you can use a dynamic import rather than doing that kind of stuff. – kissu Oct 01 '22 at 15:49
  • Here is the link of the docs : https://buttercms.com/docs/api-client/nuxtjs/ . What is dynamic import? – MH info Oct 01 '22 at 16:08
  • Mainly this: https://stackoverflow.com/a/67825061/8816585 – kissu Oct 02 '22 at 03:16
  • Sorry, but it didn't change anything... – MH info Oct 02 '22 at 08:59

0 Answers0