CODEWITHSUNDEEP
vue.jsvuejs2nuxt.js
JT2809
JT2809

Reputation: 380

NuxtJS/VueJS: How to know if page was rendered on client-side only?

Currently I create a html5 video player component for an universal nuxtjs/vuejs app. There is an autoplay attribute for the video tag to start videos after navigate to them. Usually browsers don't do that directly after page load, it's prohibited. I need a variable in my component to know if autoplay will be possible to style elements based on this information. In other words: The variable should be true if the current page was only rendered on client-side, but false if it was rendered on server-side first.

It's not possible to work with "window.history.length" because the autoplay will also not be possible after refresh, although this would not have an effect on the history length.

Also it's not possible to set a variable in the "created" method since it will be called on server- and client-side too.

Upvotes: 7

Views: 29115

Answers (2)

JT2809
JT2809

Reputation: 380

One possible solution would be to get the length of the Vue router entries. This seems currently not to be possible without manually tracking. So I ended with this code in my layout component:

watch: {
  $route () {
    Vue.prototype.$navigated = true
  }
}

The value of $navigated is undefined or true and so I know in the layout children components if video autoplay is possible or not.

Upvotes: 2

Denis Tsoi
Denis Tsoi

Reputation: 10414

In nuxt - there is the <client-only> component that renders components only on the client side

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

In nuxt, there are is asyncData which is run beforeCreate(), i.e. you can retrieve data from the server side in asyncData before the component is mounted.

nuxt-life-cycle

Alternatively, you can check on the created() for the process, e.g.

created() {
  if (process.client) {
    // handle client side
  }
}

edit

https://stackoverflow.com/a/53058870/2312051

Audio.play() returns a Promise which is resolved when playback has been successfully started. Failure to begin playback for any reason, such as permission issues, result in the promise being rejected.

const playedPromise = video.play();
if (playedPromise) {
  playedPromise.catch((e) => {
    if (e.name === 'NotAllowedError' ||
        e.name === 'NotSupportedError') {
        //console.log(e.name);
    }
  });
}

In your case, looks like your browser/os does not allow automatic playing of audio. The user agent (browser) or operating system doesn't allow playback of media in the current context or situation. This may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button. Here is the reference.

Upvotes: 13

Related Questions