---
title: "Create a player for Nuxt.js"
slug: "vpe-example-nuxt"
updated: 2026-09-17T09:22:43Z
published: 2026-09-17T09:22:43Z
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.

# Create a player for Nuxt.js

Available in Classic and VPC

Applying a player for Nuxt.js describes the example for applying and setting a player with Video Player Enhancement Web SDK JS.

              Note

              

To implement the Nuxt.js example, the following environment is required:

- Nuxt.js version: 2.15.8
- Vue.js version: 2.6.14

## Load an external script globally

You can apply a player by globally loading an external script The following is how to load an external script globally:

1. Add a script in the `nuxt.config.js` file using the `head`property.

```
export default {
// ....
     head: {
         title: 'nuxt2-demo-app',
         // ...
         script: [ // Add script
             {
                 type: "text/javascript",
                 defer: true,
                 hid: "stripe",
                 src: "https://player.vpe.naverncp.com/ncplayer.js?access_key=VPE SDK Access Key"
             }
         ]
     },
}
```
2. Call the `DemoPlayer` subcomponent from the `pages/index.vue` page component.

```
<template>
     <div>
         Demo Player Page
         <DemoPlayer />
     </div>
</template>
```
3. Write it with the following code, creating `components/DemoPlayer.vue` file in the component directory:

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

<style scoped>
</style>
```

## Load an external script from certain page

You can load a script in the page component with Nuxt and `vue-meta`. It is similar to how to load an external script globally from Nuxt.js. The following is how to load an external script from a certain page:

1. Write a page component.

```
<template>
     <div>
         Demo Player Page
         <DemoPlayer v-if="scriptLoaded"/>
     </div>
</template>
```
  - <example> `page/index.vue` file
2. Write a subcomponent.

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

<style scoped>
</style>
```

              Caution

              

If you render the `&lt;DemoPlayer&gt;` component directly, it runs before LifeCycle which calls to load the external script, which can cause errors. To prevent these errors, you should handle two conditions related to an external script which are before loading and available after loading.
  - <example> `components/DemoPlayer.vue` file

When using Nuxt in SSR mode If you move past first request(SSR) about a page to the page that an external page has loaded, `mounted` life cycle hook can also run before loading the script. Therefore, in the code above, define url and access_key in `data()`, and apply them by adding them to the `head()` feature. If you rely on an external script API such as `stripe`, you can use the callback function property to change `scriptLoaded` arbitrary variables to `true` and manipulate them to be rendered on the view screen like `&lt;DemoPlayer v-if=&quot;scriptLoaded&quot;&gt;`.

:::