vue-pdfを使ってNuxt.jsでPDFスライドを表示させる

$ yarn create nuxt-app sample-vue-pdf
create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in sample-vue-pdf
? Project name: sample-vue-pdf
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Bootstrap Vue
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

$ cd sample-vue-pdf
$ yarn dev

$ yarn add vue-pdf

$ touch components/DisplayPdf.vue

<template>
  <div>
    <pdf src="/slide.pdf"></pdf>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// @ts-ignore
import pdf from 'vue-pdf'

export default Vue.extend({
  components: {
    pdf,
  },
})
</script>

<template>
  <div class="container">
    <div>
      <h1 class="title">sample-vue-pdf</h1>
      <DisplayPdf />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({})
</script>

Unexpected token '<'

$ touch plugins/vue-pdf.js

import Vue from 'vue'
import vuePdf from 'vue-pdf'

Vue.component('vue-pdf', vuePdf)

plugins: [
  { src: '~/plugins/vue-pdf.js', mode: 'client' },
],

<template>
  <div>
    <client-only>
      <vue-pdf src="/slide.pdf" />
    </client-only>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({})
</script>

<template>
  <div>
    <client-only>
      <button @click="prevPage">戻る</button>
      <button @click="nextPage">次へ</button>
       / 
      <vue-pdf
        :src="pdfUrl"
        :page="currentPageNum"
        @num-pages="totalPageNum = $event"
      />
    </client-only>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data: () => ({
    pdfUrl: '/slide.pdf',
    currentPageNum: 1,
    totalPageNum: 0,
  }),
  methods: {
    prevPage() {
      if (this.currentPageNum <= 1) {
        return
      }
      this.currentPageNum = this.currentPageNum - 1
    },
    nextPage() {
      if (this.currentPageNum >= this.totalPageNum) {
        return
      }
      this.currentPageNum = this.currentPageNum + 1
    },
  },
})
</script>