---
title: "Nuxt.js向けプレイヤー適用"
slug: "vpe-example-nuxt"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-example-nuxt"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt.js向けプレイヤー適用

Classic/VPC環境で利用できます。

Nuxt.js用プレイヤーの適用では、Video Player Enhancement Web SDK JSを活用し、プレイヤーを適用して設定するためのユースケースを紹介します。

              参考

              

Nuxt.jsのユースケースを実行するには以下のような環境が求められます。

- Nuxt.jsバージョン: 2.15.8
- Vue.jsバージョン: 2.6.14

## 全域に外部スクリプトをロード

外部スクリプトを全域にロードする方法を使用してプレイヤーを適用できます。 全域に外部スクリプトをロードする方法は、次の通りです。

1. `nuxt.config.js`ファイルで `head`プロパティ内にスクリプトを追加します。

```
export default {
// ....
     head: {
         title: 'nuxt2-demo-app',
         // ...
         script: [ // スクリプト追加
             {
                 type: "text/javascript",
                 defer: true,
                 hid: "stripe",
                 src: "https://player.vpe.naverncp.com/ncplayer.js?access_key=VPE SDK Access Key"
             }
         ]
     },
}
```
2. `pages/index.vue` ページコンポーネントから `DemoPlayer` サブコンポーネントを呼び出します。

```
<template>
     <div>
         Demo Player Page
         <DemoPlayer />
     </div>
</template>
```
3. コンポーネントディレクトリで `components/DemoPlayer.vue` ファイルを作成し、以下のようにコードを作成します。

```
<template>
     <div id="video"></div>
</template>

<style scoped>
</style>
```

## 特定ページから外部スクリプトをロード

Nuxtと `vue-meta`を活用して希望するページコンポーネントにスクリプトをロードできます。Nuxt.jsから全域に外部スクリプトをロードする方法と似ています。特定ページから外部スクリプトをロードする方法は、次の通りです。

1. ページコンポーネントを作成します。

```
<template>
     <div>
         Demo Player Page
         <DemoPlayer v-if="scriptLoaded"/>
     </div>
</template>
```
  - 例) `page/index.vue` ファイル
2. サブコンポーネントを作成します。

```
<template>
     <div id="video"></div>
</template>

<style scoped>
</style>
```

              注意

              

`&lt;DemoPlayer&gt;` コンポーネントを直接レンダリングすると、外部スクリプトのロードを呼び出すライフサイクル(LifeCycle)より先に実行され、エラーが発生する場合があります。このようなエラーの発生を防ぐには、外部スクリプトに関してロード前とロードして使用できる2つの状態を処理する必要があります。
  - 例) `components/DemoPlayer.vue` ファイル

SSRモードで Nuxtを使用する際にページに対する初回リクエスト(SSR)を経て外部スクリプトがロードされたページに移動した場合、`mounted`ライフサイクルフック(life cycle hook)もスクリプトがロードされる前に実行されることがあります。したがって上記コードでは `data()`に urlと access_keyを定義し、`head()`機能に追加して適用します。 `stripe`のように外部スクリプトの APIに依存する場合はコールバック関数のプロパティを使用し、`scriptLoaded` 任意の変数を `true`に変更して view画面にレンダリングされるように `&lt;DemoPlayer v-if=&quot;scriptLoaded&quot;&gt;`のように適用して操作できます。

:::