kdu-client-only

Install

1yarn add kdu-client-only

Usage

1<template>
2  <div id="app">
3    <h1>My Website</h1>
4    <client-only>
5      <!-- this component will only be rendered on client-side -->
6      <comments />
7    </client-only>
8  </div>
9</template>
10
11<script>
12  import ClientOnly from 'kdu-client-only'
13
14  export default {
15    components: {
16      ClientOnly
17    }
18  }
19</script>

Placeholder

Use a slot or text as placeholder until <client-only /> is mounted on client-side.

eg, show a loading indicator.

1<template>
2  <div id="app">
3    <h1>My Website</h1>
4    <!-- use slot -->
5    <client-only>
6      <comments />
7      <comments-placeholder slot="placeholder" />
8    </client-only>
9    <!-- or use text -->
10    <client-only placeholder="Loading...">
11      <comments />
12    </client-only>
13  </div>
14</template>
15
16<script>
17  import ClientOnly from 'kdu-client-only'
18
19  export default {
20    components: {
21      ClientOnly
22    }
23  }
24</script>

By default the placeholder will be wrapped in a div tag, however you can use placeholderTag prop to customize it:

1<client-only placeholder="loading" placeholder-tag="span">
2  <comments />
3</client-only>

And you get:

1<span class="client-only-placeholder">
2  loading
3</span>

If prop placeholder is an empty string (or null) and no placeholder slot is found, then <client-only> will render the Kdu placeholder element <!----> instead of rendering the placholder-tag during SSR render.

Development

1yarn install
2
3# Run example
4yarn example