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 PropertyTypeDescription
tagStringHTML tag to use to render the component. Default: ‘div’
placeholderStringString to display on server, before the client takeover.
Jumbotron Timeline
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub