Example implementation with Material Web 1

[MarcoTroost]

Hi Guys,

Thank you for your great work on this plugin. It's even referenced from the official Material Web repository !

I do not seem to get my Nuxt3 application to work though.

Whenever i prefix my material web button (e.g. <acme-md-filled-button>), i get an error 500:

nuxt.config.ts

export default defineNuxtConfig({
  ssr: true,
  debug: true,
  modules: [
    ["nuxt-ssr-lit", { litElementPrefix: ["acme-"] }],
  ],
...
});

Vue component:

<template>
  <div>
    <acme-md-filled-button>Test</acme-md-filled-button>
  </div>
</template>

<script setup lang="ts">
import '@material/web/button/filled-button.js'
</script>

Can anybody tell me what i am doing wrong?

An example nuxt3 + Material Web setup would be very helpfull.

kind regards, Marco

[prashantpalikhe]

@MarcoTroost Can you please check if your issue is related to this?

[MarcoTroost]

Hi @prashantpalikhe,

Thank you for the quick reply.

moduleSideEffects unfortunaltely doesn't seem to do anything for my app. After some experimenting i've found out that adding the prefix acme- causes trouble.

["nuxt-ssr-lit", { litElementPrefix: ["md-"] }] in combination with <md-filled-button> (works).

["nuxt-ssr-lit", { litElementPrefix: ["acme-"] }] in combination with <acme-md-filled-button> (doesn't work).

The good news is that Material Web 1.0 components seem to work out of the box utilizing the nuxt-ssr-lit module.

A slight annoyance is that lit is loaded twice (which is not recommended), which results in a warning in the console:

and

If you've got a solution for this matter, it would be greatly appreciated.

kind regards, Marco

[prashantpalikhe]

@MarcoTroost The Lit loaded twice is only on dev. On prod. it should be good.

But regarding the acme- issue, can you create a Stackblitz repro for it?

If I look into your code, it doesn't seem like such a component exist. So I'd expect it not to work. But I may be missing something.