Add explanation to readme

[MickL]

Hello! Could you add a little explanation to the readme how this module works in particular? Here is what I found out by trail and error:

• Initially the server needs to renders "something". It seems like nuxt-viewport is trying to find the matching viewport by the request header user-agent because it doesnt know the window width yet?
• It then returns either viewport 'mobile', 'tablet' or 'desktop' OR the breakpoint, depending if I have defaultBreakpoints in my nuxt.config ?
• The server also seems to cache the result even when no cookie is set? This confused me because I always got the same result when trying different viewports/agents. (Can this be disabled, especially for dev?)
• The client now tries to figure out the actual viewport by window width? So the client might change from 'desktop' or 'lg' to 'md'
• It sets a cookie for subsequent requests
• Server returns 'md' again

Maybe you could add this flow to the top of the readme?

I also wonder how it works with the queries, e.g. isLessOrEquals(): Initially I wanted to use the same values as Tailwind, e.g. 'md'. But the server returns 'desktop' on Chrome if I remove defaultBreakpoints from my nuxt.config. But if I add them:

defaultBreakpoints: {
      mobile: 'xs',
      tablet: 'md',
      desktop: 'lg',
    },

The server now returns 'lg'. Might this be a bug or is this intentially?

Should I rather use viewport.isGreaterOrEquals('lg') or viewport.isGreaterOrEquals('desktop')?

[mvrlin]

Hi, please take a closer look at the README https://github.com/mvrlin/nuxt-viewport?tab=readme-ov-file#configuration

First, the server tries to read the value from the cookie. If it is valid, it renders the site with this breakpoint. If there is no value or it is invalid, the server attempts to determine the value using the User Agent. If this also fails, the value from fallbackBreakpoint is used.

About defaultBreakpoints

Pay close attention: the key corresponds to the value from "Detectable devices." There might be some confusion due to the same keys being used in breakpoints, but try to keep this distinction in mind:

• breakpoints is an independent setting that indicates the current screen size. The key can be any value you choose, and the value represents the screen size.
• defaultBreakpoints is a fallback setting used when there is no valid cookie value, but the device type can be determined via the User Agent. In this case, the key can be one of the following: bot, desktop, mobile, tablet, or tv. Device type detection is handled using Bowser.

{
  "bot": "key from breakpoints",
  "desktop": "key from breakpoints"
  // etc...
}

I hope that makes more sense 😀

[MickL]

Thanks for the info! May you want to update the readme for everyone, as I suggested, to describe more of the flow with the ssr/browser detection/client actual viewport/cookie? Maybe also a flow chart would help :)

[mvrlin]

@MickL Sure, I'll look into it as soon as I get some free time.