fix: add support for SSR in DeviceHelperPlugin

[Bojan Rajh (bojanrajh)]

What?

This PR updates nuxt-app example with MtTabs component which is using DeviceHelper plugin + it activates SSR.

Why?

To allow server-side rendering when DeviceHelper is used.

How?

By checking for the window variable.

Testing?

Locally, with provided nuxt-app example.

Screenshots (optional)

Anything Else?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
meteor-component-library	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 21, 2024 3:07pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
meteor-admin-sdk-docs	⬜️ Ignored (Inspect)	Visit Preview		Aug 21, 2024 3:07pm

[Nils Haberkamp (Haberkamp)]

Please add a changelog

[Nils Haberkamp (Haberkamp)]

Though this is enough to test that the DeviceHelper is SSR compatible, I suggest to make this component do something like switching between content. This way we can be sure that switching views also works when using SSR. Additionally it creates a nicer demo page.

[Bojan Rajh (bojanrajh)]

Ideally, a full integration test would be needed here. But. We did end up with a few composables which I would like to introduce in separate PRs, maybe even a separate package (@shopware-ag/meteor-nuxt):

• useMeteorTabs - framework-agnostic, might as well end up in @shopware-ag/meteor-component-library
• useMeteorToast, useMeteorModal (depends on Nuxt's useState)
• useMeteorForm - provides a layer between joi (and compatible) and shopware/meteor validation format, along with a few nuxt-based form components based on meteor components
• useColorMode - composable for managing system/light/dark modes based on meteor dark theme implementation (html attr).

Therefore, I would like to keep those PRs small and update the implementation (for example in the mt-toast.stories.ts and nuxt-app demo) along the way.