@livestorm/ui-vue 2.0.0 → 2.0.2

package/README.md

@@ -103,34 +103,36 @@ registerComponents(app, 'Ls')    // optional custom prefix: LsButton, LsTag, ...
 
 ### App setup
 
-Beyond the Tailwind CSS setup above, two runtime plugins 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.
-- **`floating-vue`** backs the tooltips on `UiButton`, `UiLabel`, `UiFieldWrapper` and `UiInputCheckbox` (the `v-tooltip` directive). Install it alongside the library and import its stylesheet:
-
-  ```bash
-  pnpm add floating-vue
-  ```
+No runtime plugin is required: beyond the Tailwind CSS setup above, create the app and use components.
 
 ```ts
 import { createApp } from 'vue'
-import FloatingVue from 'floating-vue'
-import 'floating-vue/dist/style.css'
-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)
-app.use(FloatingVue)       // enables v-tooltip on UiButton, UiLabel, UiFieldWrapper, UiInputCheckbox
 registerComponents(app)    // optional: register all Ui* components globally
 
 app.mount('#app')
 ```
 
-The overlay components (dialogs, dropdowns, menus, popovers) render through client-only teleports; under SSR they hydrate on the client with no extra setup.
+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