QNoSsr
This component makes sense only if you are creating a SSR website/app.
It avoids rendering its content on the server and leaves that for client only. Useful when you got code that is not isomorphic and can only run on the client side, in a browser.
Alternatively, you can also use it to render content only on server-side and it automatically removes it if it ends up running on a client browser.
Installation
Edit /quasar.conf.js
:framework: {
components: ['QNoSsr']
}
Examples
Basic:<q-no-ssr>
<div>This won't be rendered on server</div>
</q-no-ssr>
Multiple client nodes:<q-no-ssr>
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
Multiple client nodes with tag prop:<q-no-ssr tag="blockquote">
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
Placeholder property:<q-no-ssr placeholder="Rendered on server">
<div>This won't be rendered on server</div>
</q-no-ssr>
Placeholder slot:<q-no-ssr>
<div>This won't be rendered on server</div>
<div slot="placeholder">Rendered on server</div>
</q-no-ssr>
Multiple placeholder slot:<q-no-ssr>
<div>This won't be rendered on server</div>
<div slot="placeholder">Rendered on server (1/2)</div>
<div slot="placeholder">Rendered on server (2/2)</div>
</q-no-ssr>
Only placeholder slot:<q-no-ssr>
<div slot="placeholder">Rendered on server</div>
</q-no-ssr>
Vue Properties
Vue Property | Type | Description |
---|---|---|
tag | String | HTML tag to use to render the component. Default: ‘div’ |
placeholder | String | String to display on server, before the client takeover. |