Nuxt.js 2에서 Youtube 플레이어 포함

조사하면

htps : // 기주 b. 코 m / 안테 리오 ゃ 에이라 / ゔ 에-

htps : // 기주 b. 코 m / 카오 룬 343 / ゔ 에요 츠베 엠 베 d

kaorun343/vue-youtube-embed가 Nuxt2의 Universal 모드에서 움직이지 않았습니다.

두 가지가 나왔습니다. kaorun343/vue-youtube-embed 쪽이 자주 사용되고 있는 것 같습니다만, Nuxt.js 의 spaモード 그렇다고 동작해 universalモード 그렇다고 에러가 발생해 움직이지 않았습니다.

Unexpected token export

render function or template not defined in component: anonymous

같은 오류입니다.

Using vue-youtube-embed in Nuxt.js 에 있는 방법이나 render function or template not defined in component: anonymous , Import vue plugin correctly (unexpected token import) 등을 보면서 시도했지만

nteriovieira / vue-youtube에서 작동했습니다.

에러 조사가 지쳤기 때문에 다른 쪽이 만들고 있는 이쪽에서 시험하면 잘 움직였으므로 이쪽을 사용해 갑니다.

readme에 쓰고 있는 내용으로 그대로 동작합니다.

htps : // 기주 b. 코 m / 안테 리오 ゃ 에이라 / ゔ 에-

설치

npm install vue-youtube

pages/index.vue를 완전히

index.vue

<template>
  <section class="container">
    <div>
      <h1 class="title">
        youtubeのテスト
      </h1>
      <youtube
        ref="youtube" 
        :video-id="videoId"
        :player-vars="{autoplay:1}"
        @playing="playing"
        @paused="paused"
        @ended="ended"
      />
    </div>
  </section>
</template>

<script>
import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

export default {
  components: { 
  },
   data () {
    return {
      videoId: 'oy-HyrxsPJE',
    }
  },

  methods: {
    playVideo() {
      this.player.playVideo()
    },
    //再生スタートした際に発火
    playing() {
      console.log('\o/ we are watching!!!')
    },
    //一時停止した際に発火
    paused() {
      console.log('paused')
    },
    //再生終了した際に発火
    ended() {
      console.log('ended')
    }
  }
}
</script>

<style>

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

이런 느낌으로 움직입니다 재생, 일시 정지, 정지 등의 이벤트도 잡고 하고 싶은 것을 할 수 있었으므로 이쪽이 좋을 것 같다.