---
title: "Nuxt.js용 플레이어 적용"
slug: "vpe-example-nuxt"
updated: 2026-08-20T09:03:39Z
published: 2026-08-20T09:03:39Z
canonical: "guide-gov.ncloud-docs.com/vpe-example-nuxt"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide-gov.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>

<script>
export default {
     name: 'SamplePage'
}
</script>
```
3. 컴포넌트 디렉터리에서 `components/DemoPlayer.vue` 파일을 생성하여 다음 코드와 같이 작성해 주십시오.

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

<script>
export default {
     name: "DemoPlayer",
     data() {
         return {
             access_key: "VPE SDK ACCESS KEY",
             url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
         };
     },
     created() {
         this.createPlayer('video')
     },
     methods: {
         createPlayer(id) {
             let player = new ncplayer(id), {
                 
                 "playlist": [
                     {
                         file: "https://fsxikvammvwv14470411.cdn.ntruss.com/hls/9N5-iJ4f9tdzE6D708PTmg__/vod/j5IXBfIJ83893893_,1080,720,480,p.mp4.smil/master.m3u8",
                         poster: "https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.png?type=m&w=1024&h=760&ttype=jpg",
                         description: {
                             "title": "LIVE ERROR 테스트 영상",
                             "created_at": "2022.07.13",
                             "profile_name": "네이버클라우드",
                             "profile_image": "https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                         },
                     }
                 ],
                 // options ....
                 
             });
         },
     },
}
</script>
<style scoped>
</style>
```

## 특정 페이지에서 외부 스크립트 로드

Nuxt와 `vue-meta`를 활용해 원하는 페이지 컴포넌트에 스크립트를 로드할 수 있습니다. Nuxt.js에서 전역으로 외부 스크립트를 로드하는 방법과 유사합니다. 특정 페이지에서 외부 스크립트를 로드하는 방법은 다음과 같습니다.

1. 페이지 컴포넌트를 작성해 주십시오.

```
<template>
     <div>
         Demo Player Page
         <DemoPlayer v-if="scriptLoaded"/>
     </div>
</template>

<script>
export default {
     name: 'SamplePage',
     head() {
         return {
             title: "Sample Page",
             script: [
                 {
                     type: "text/javascript",
                     hid: "stripe",
                     src: this.url + this.access_key,
                     defer: true,
                     callback: () => {
                         this.scriptLoaded = true;
                     }
                 }
             ]
         }
     },
     data() {
         return {
             scriptLoaded: false,
             access_key: "VPE SDK Access Key",
             url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
         };
     },
}
</script>
```
  - <예시> `page/index.vue` 파일
2. 하위 컴포넌트를 작성해 주십시오.

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

<script>
export default {
     name: "DemoPlayer",
     data() {
         return {
             access_key: "VPE SDK ACCESS KEY",
             url: "https://player.vpe.naverncp.com/ncplayer.js?access_key=",
         };
     },
     created() {
         this.createPlayer('video')
     },
     methods: {
         createPlayer(id) {
             let player = new ncplayer(id), {
                 
                 "playlist": [
                     {
                         file: "https://fsxikvammvwv14470411.cdn.ntruss.com/hls/9N5-iJ4f9tdzE6D708PTmg__/vod/j5IXBfIJ83893893_,1080,720,480,p.mp4.smil/master.m3u8",
                         poster: "https://wnfosehmzhuc12665447.cdn.ntruss.com/thumb/sample_thumb.png?type=m&w=1024&h=760&ttype=jpg",
                         description: {
                             "title": "LIVE ERROR 테스트 영상",
                             "created_at": "2022.07.13",
                             "profile_name": "네이버클라우드",
                             "profile_image": "https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                         },
                     }
                 ],
                 // options ....
                 
             });
         },
     },
}
</script>
<style scoped>
</style>
```

          주의

          

`&lt;DemoPlayer&gt;` 컴포넌트를 바로 랜더링하면 외부 스크립트 로드를 호출하는 생명 주기(LifeCycle)보다 먼저 실행되어 오류가 발생할 수 있습니다. 이러한 오류 발생을 방지하려면 외부 스크립트와 관련하여 로드되기 전과 로드되어 사용 가능한 두 가지 상태를 처리해야 합니다. SSR 모드에서 Nuxt를 사용할 때 페이지에 대한 첫 요청(SSR)을 지나 외부 스크립트가 로드된 페이지로 이동한 경우 `mounted` 생명 주기 훅(life cycle hook)도 스크립트가 로드되기 전 실행될 수 있습니다. 따라서 위 코드에서는 `data()`에 url과 access_key를 정의하고 `head()` 기능에 추가하여 적용합니다. `stripe`와 같은 외부 스크립트 API에 의존하는 경우에는 콜백 함수 속성을 사용해 `scriptLoaded` 임의 변수를 `true`로 변경하여 view 화면에 랜더링되도록 `&lt;DemoPlayer v-if="scriptLoaded"&gt;`와 같이 적용하여 조작할 수 있습니다.
  - <예시> `components/DemoPlayer.vue` 파일