Skip to content

Commit

Permalink
docs: update nuxt ssr docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dobromir-hristov committed Nov 29, 2020
1 parent 0917cac commit d92f9ce
Showing 1 changed file with 6 additions and 8 deletions.
14 changes: 6 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,24 @@ Just include the script from the CDN and you are good to go.
## Usage with Nuxt.js

As we know Nuxt.js allows the really cool advantage of Server Side Rendering, but this means there is no `window` variable.
To fix this, we need to tell Nuxt.js to skip rendering our component on the server and render it just on the Browser
To fix this, we need to tell Nuxt.js to skip rendering our component on the server and render it just on the Browser.

We need to create a file inside the `plugins` directory called `vimeo-player.js` or what ever you see fit.

```js
// plugins/vimeo-player.js
import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'

Vue.use(vueVimeoPlayer)

```

Now we need to tell Nuxt to load our plugin inside `nuxt.config.js`

```js
// ....
plugins: [
{ src: `~plugins/vimeo-player`, ssr: false }
{ src: `~plugins/vimeo-player` }
],
build: {
vendor: [
Expand All @@ -79,14 +79,12 @@ build: {
// ....
```

### Using the <no-ssr></no-ssr> component

Another option is to use the [no-ssr](https://nuxtjs.org/api/components-no-ssr/) component to wrap the vue-vimeo component in the template.
Now we have to use the [client-only](https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component) component to wrap the vue-vimeo component in the template.

```html
<no-ssr>
<client-only>
<vimeo-player ref="player" :video-id="videoID"/>
</no-ssr>
</client-only>
```

## Props
Expand Down

0 comments on commit d92f9ce

Please sign in to comment.