vue-fn-ssr

vue-fn-ssr

Vue function to discover if you are in a server or browser

Install

npm i vue-fn-ssr --save

Usage

<template>
  <div>
    <ul>
      <li>Browser {{isBrowser ? '👍' : '👎' }}<li>
      <li>Server  {{isServer ? '👍' : '👎' }}</li>
    </ul>
    <code>
      {{ssr}}
    </code>
  </div>
</template>

<script>
import useSSR from 'vue-fn-ssr'

export default {
  setup(props) {
    const ssr = useSSR()
    
    console.log('IS BROWSER: ', isBrowser ? '👍' : '👎')
    console.log('IS SERVER: ', isServer ? '👍' : '👎')
    
    return {
      isBrowser: ssr.isBrowser,
      isServer: ssr.isServer
      ssr
    }
  }
}
</script>

Features

  • Server Side Rendering check
  • TypeScript support
  • Zero dependencies

Options

const {
  isBrowser,
  isServer,
  canUseWorkers,
  canUseEventListeners,
  canUseViewport,
} = useSSR()

Thanks

🙏 Heavily inspired by use-ssr