New Patch, Merge?

    vue-client-only
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    vue-client-only

    NPM version NPM downloads CircleCI donate

    Install

    yarn add vue-client-only

    This project is previously known as vue-no-ssr, switch to 1.x branch for the old docs.

    Usage

    <template>
      <div id="app">
        <h1>My Website</h1>
        <client-only>
          <!-- this component will only be rendered on client-side -->
          <comments />
        </client-only>
      </div>
    </template>
    
    <script>
      import ClientOnly from 'vue-client-only'
    
      export default {
        components: {
          ClientOnly
        }
      }
    </script>

    Placeholder

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

    eg, show a loading indicator.

    <template>
      <div id="app">
        <h1>My Website</h1>
        <!-- use slot -->
        <client-only>
          <comments />
          <comments-placeholder slot="placeholder" />
        </client-only>
        <!-- or use text -->
        <client-only placeholder="Loading...">
          <comments />
        </client-only>
      </div>
    </template>
    
    <script>
      import ClientOnly from 'vue-client-only'
    
      export default {
        components: {
          ClientOnly
        }
      }
    </script>

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

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

    And you get:

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

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

    Development

    yarn install
    
    # Run example
    yarn example

    Contributing

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Author

    vue-client-only © egoist, Released under the MIT License.
    Authored and maintained by egoist with help from contributors (list).

    egoist.moe · GitHub @egoist · Twitter @_egoistlily

    Keywords

    none

    Install

    npm i vue-client-only

    DownloadsWeekly Downloads

    390,831

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    9.07 kB

    Total Files

    8

    Last publish

    Collaborators

    • egoist