Integration with Nuxt 3 / client-side navigation error

[konradsienkowski]

Hi,

I'm working on integrating codapi with our website built on Nuxt 3. I've created a [custom plugin] file (https://nuxt.com/docs/guide/directory-structure/plugins) to import snippet.js into the app and defined codapi-* tags as custom elements in configuration file:

  vue: {  
    compilerOptions: {
      isCustomElement: (tag) => {
        return tag.startsWith('codapi-')
      }
    },
  },

This works fine on the initial load (when entering page with codapi snippets directly). However, using client-side navigation with transitions (e.g. starting from the homepage and navigating to the page with snippets within the app) leads to an error in the console:
Uncaught TypeError: this.toolbar.addActions is not a function pointing to that line the render function:

this.toolbar.addActions(L ? L.split(" ") : null),

Do you have any idea how to solve that problem? Thanks!

[nalgeon]

Unfortunately, I have absolutely no idea. But if you prepare an archive with a sample project to reproduce the problem, I can take a look at it.

[konradsienkowski]

@nalgeon I created a minimal reproduction bundle: https://github.com/konradsienkowski/codapi-navigation-bug

An error displayed in the console is different there (previously I copied its content from a staging app that uses minified files):

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children

Behavior is however still the same: If you open the app and navigate to "Article", the snippet script crashes and doesn't work properly. But if you refresh the same page or navigate to /article directly (not using the link), it works okay.

My guess is that the snippet.js executes before the DOM is ready. It'd be great if there were methods/functions available to run it manually, for example with lifecycle hooks. Prism.js, the library we're using for code highlighting offers such an option and it's pretty helpful while using Vue/Nuxt: https://prismjs.com/docs/Prism.html#.manual

[nalgeon]

Please try using version 0.4.3. It fixed the problem for me.

[konradsienkowski]

It works without errors, both in local & staging environments. Thanks!