@livestorm/ui-vue 2.0.1 → 2.0.2

package/README.md

@@ -103,23 +103,35 @@ registerComponents(app, 'Ls')    // optional custom prefix: LsButton, LsTag, ...
 
 ### App setup
 
-Beyond the Tailwind CSS setup above, one runtime plugin must be registered when you create the app. `@livestorm/ui-vue/responsive` installs the `$responsive` global that layout components (`UiPage`, the toast layout) read; without it those components won't render correctly.
+No runtime plugin is required: beyond the Tailwind CSS setup above, create the app and use components.
 
 ```ts
 import { createApp } from 'vue'
-import Responsive from '@livestorm/ui-vue/responsive'
 import { registerComponents } from '@livestorm/ui-vue/components-vite'
 import '@livestorm/ui-vue/style'
 import App from './App.vue'
 
 const app = createApp(App)
 
-app.use(Responsive)        // provides $responsive (required by UiPage, toasts)
 registerComponents(app)    // optional: register all Ui* components globally
 
 app.mount('#app')
 ```
 
+Layout components (`UiPage`, the toast layout) read the viewport from a shared responsive singleton that initializes itself on first use. Installing the `@livestorm/ui-vue/responsive` plugin is optional: do it only to customize the breakpoint flags (`mobile`, `tablet`, ...) or to expose `$responsive` to your own templates.
+
+Server-side rendering works out of the box: pages render with a desktop layout on the server, then adapt to the real screen size as soon as they load in the browser. No configuration and no hydration warnings.
+
+```ts
+import Responsive from '@livestorm/ui-vue/responsive'
+
+app.use(Responsive, {
+  computed: {
+    mobile: state => state.width < 900, // override the built-in flag
+  },
+})
+```
+
 The overlay components (dialogs, dropdowns, menus, popovers, tooltips) render through client-only teleports; under SSR they hydrate on the client with no extra setup.
 
 ### Storybook