Skip to content

Not working with Nuxt 3  #3

Open
@mrniamster

Description

@mrniamster

Describe the bug
I loved your plugin, the problem is it doesn't work with Nuxt 3 .

To Reproduce
I tried the following, still adding the button or triggering via code doesn't show the modal.

  1. Loading inside setup
if (process.client) {
  const { spotlight } = await import('https://cdn.jsdelivr.net/gh/cttricks/spotlight.js/dist/spotlight.min.js');
  const Spotlight = await spotlight();
  window.Spotlight = Spotlight;
}
  1. Loading from nuxt.config.ts
      "script": [
        { src: "https://cdn.jsdelivr.net/gh/cttricks/spotlight.js/dist/spotlight.min.js", type: "module", "data-lights-on": "true" ,tagPosition:"bodyClose" },
      ]
      
  1. Loading as plugin
export default defineNuxtPlugin(() => {
  if (process.client) {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/gh/cttricks/spotlight.js/dist/spotlight.min.js';
    script.type = 'module';
    script.setAttribute('lights-on', '');
    document.head.appendChild(script);
  }
});

Expected behavior
Doing a Spotlight.start() or Button with type below should work

<button type="spotlight-button:start">Start Demo Tour</button>

Screenshots
If applicable, add screenshots to help explain your problem.
image

Additional context

  • After doing window.Spotlight = Spotlight; , the Spotlight function do loads, but nothing happens on Spotlight.start()
    image
    image

  • Spotlight.updateSpots(); gives a length error (Looks like the steps are not getting loaded?)
    image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions