Add support for Nuxt

[Rednas83]

Describe the Bug

During import of vue-bpmn the application crashes. Is the package also compatible with nuxt?

Environment

• Node v14.17.5
• Windows 10
• nuxt v2.15.8 (latest version)
• bpmn-js
  -> Tried v8.72 (latest version)
  -> And v3.2.3 (example version)

[nikku]

Please share a CodeSandbox that reproduces the issue reliably.

[Rednas83]

Hereby
https://codesandbox.io/s/kind-danilo-8f79r?file=/pages/index.vue

I commented out the script in index.vue to avoid the crashing.

[nikku]

Thanks for the sandbox. I can reproduce your issue.

Not sure what is going on there specifically but I assume it is due to the fact that vue-bpmn does not support server-side rendering, a thing that nuxt claims it does.

Due to the nature of the underlying library we won't support that any time soon, too.

How do you design nuxt components to work gracefully, client-side only?

[Rednas83]

For some reason nuxt tries to run some of the script in the server.
You can avoid this by:

• lazy load your client component const form = () => import('...')
• move your client code into the mounted() hook
• wrap your client code inside an if(process.client) statement

Usually this requires only very small changes to make it suitable for server side rendering.

See also https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/ for more information.

[nikku]

Happy to accept a PR to get this thing nuxt ready. Why not.

[Rednas83]

I don't think I will have time to create a PR for this any time soon.

• If anyone is interested feel free to work on it✌
• Also because of the underlying libraries (125 repositories in bpmn-io) as mentioned by @nikku I am not to exited to get started. Perhaps something for the team?

[nikku]

Thanks for your feedback. Will move this one to the backlog.

[nikku]

Also adding good first issue to this one. Lazy loading the client-side only part should be something that is absolutely doable.