SSR Support?

[jdkcoder]

I love the syntax of Minze but when I try to integrate Minze with my Nuxt 3 (SSR) project, I got this error HTMLElement is not defined

my-test.ts

import { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
    html = () => 'Hello Minze!'
}
if (!customElements.get("my-test")) MyElement.define();

nuxt.config.ts

export default defineNuxtConfig({
...
  vite: {
    plugins: [svgLoader()],
    esbuild: {
      keepNames: true
    }
  },
 ...
})

app.vue

<my-test></my-test>

[sergejcodes]

At the moment native web components don't play too well with SSR. You'll have to check if it's running on the client first.

Your my-test.ts file should look something like the following code snippet. There is no need for a conditional to check if the element is defined, as Minze does this under the hood when you call .define().

if (process.client) {
  const { MinzeElement } = await import('minze')
  
  class MyTest extends MinzeElement {
    html = () => 'Hello Minze!'
  }

  MyTest.define()
}

You must also add the following setting to your Nuxt config to indicate custom web components to Vue. (Vue docs)

export default defineNuxtConfig({
...
  vue: { compilerOptions: { isCustomElement: (tag) => tag.includes('my-') } }
...
})

Here's a working StackBlitz example