Self in not defined in Nuxt.js

[Beisenbayev]

Self in not defined in Nuxt.js

[Beisenbayev]

Solution:

1. You have to create a vue-pdf-embed.js file inside the plugins folder in your project.
   plugins:
   |-vue-pdf-embed.js

2. In this file import Vue and vue-pdf-embed (The problem was because of this step. Make sure about your version of nuxt. If you are using Nuxt3 (vue3) - then import from vue-pdf-embed)

vue-pdf-embed.js:

    import Vue from 'vue'
    import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
    Vue.use(VuePdfEmbed)
    Vue.component('vue-pdf-embed', VuePdfEmbed)

3. In nuxt.config.js file you have a plugins array. Add this line to an array: (read more)
   { src: '~/plugins/vue-pdf-embed.js', ssr: false, mode: 'client' }

[abdmdjr]

In Nuxt 3, create a file in /plugins and name it vue-pdf-embed.client.ts with this code ->

import VuePdfEmbed from "vue-pdf-embed";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("vue-pdf-embed", VuePdfEmbed);
});

In your page/component, use it like that :
<vue-pdf-embed :source="post.file" />

[zguig52]

Done :)! I did not found this topic waiting for an answer

this worked for me:

// plugins/vue-pdf-embed.client.ts

export default defineNuxtPlugin( nuxtApp => {
    const vuePdfEmbed = defineAsyncComponent(() => import('vue-pdf-embed'))
    nuxtApp.vueApp.component("vue-pdf-embed", vuePdfEmbed)
})

[hrynko]

Hi, can you please check if you can solve the problem as in #12?

[Beisenbayev]

Hi, can you please check if you can solve the problem as in #12?

Hi, the author of this issue left a comment about solving the problem, but I don't understand what exactly needs to be done?
#12 (comment)

[getshaun24]

Solution:

1. You have to create a vue-pdf-embed.js file inside the plugins folder in your project.
   plugins:
   |-vue-pdf-embed.js
2. In this file import Vue and vue-pdf-embed (The problem was because of this step. Make sure about your version of nuxt. If you are using Nuxt3 (vue3) - then import from vue-pdf-embed)

vue-pdf-embed.js:

    import Vue from 'vue'
    import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
    Vue.use(VuePdfEmbed)
    Vue.component('vue-pdf-embed', VuePdfEmbed)

3. In nuxt.config.js file you have a plugins array. Add this line to an array: (read more)
   { src: '~/plugins/vue-pdf-embed.js', ssr: false, mode: 'client' }

Thank you for the solution but I am still getting the Self Not Defined issue.

This is my vue-pdf-embed.js file

import Vue from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'
Vue.use(VuePdfEmbed)
Vue.component('vue-pdf-embed', VuePdfEmbed)

and this is in my vue file

import VuePdfEmbed from 'vue-pdf-embed'
export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      source1: "../../public/xxx.pdf",
    }
  },
}

Additionally, just installing this plugin is breaking all the js on my whole site.

Please can somebody help?!

Thank You :)

[th4it4y4]

I got this problem too in NuxtJs 2.
So I add " { src: '~/plugins/vue-pdf-embed.js', ssr: false, mode: 'client' } " in my nuxt config and import lib in script but it have error "Plugin not found" plz help

[honghuynhit]

Solution:

1. You have to create a vue-pdf-embed.js file inside the plugins folder in your project.
   plugins:
   |-vue-pdf-embed.js
2. In this file import Vue and vue-pdf-embed (The problem was because of this step. Make sure about your version of nuxt. If you are using Nuxt3 (vue3) - then import from vue-pdf-embed)

vue-pdf-embed.js:

    import Vue from 'vue'
    import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
    Vue.use(VuePdfEmbed)
    Vue.component('vue-pdf-embed', VuePdfEmbed)

3. In nuxt.config.js file you have a plugins array. Add this line to an array: (read more)
   { src: '~/plugins/vue-pdf-embed.js', ssr: false, mode: 'client' }

Very detail. Big thanks

[terajoellang]

I got this problem too in NuxtJs 2. So I add " { src: '~/plugins/vue-pdf-embed.js', ssr: false, mode: 'client' } " in my nuxt config and import lib in script but it have error "Plugin not found" plz help

Same issue here, did you find a solution?

[zguig52]

Quick and easy steps for Nuxt3 integration as a plugin:

1. Create a folder plugins

2. Create a file named VuePdfEmbed.client.js inside the folder with following content:

import VuePdfEmbed from 'vue-pdf-embed'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VuePdfEmbed)
  nuxtApp.vueApp.component('VuePdfEmbed', VuePdfEmbed);
})

3. Use it in your app like this:

      <ClientOnly>
        <VuePdfEmbed :source="pdfURL" />
      </ClientOnly>

[hrynko]

HI @zguig52,

Could you duplicate your answer to #114?