how can i use single component? (nuxt)

[MirzaeiDev]

Guys, we all know that using global is a very wrong thing and makes the project heavy.

So now what can I do to not be global? I found my answer on this site.

I use a single component on my project but I have an error. pls, help me with this error. so I use this for my code.

<template> ----------- <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" /> ----------- </template> <script> import { ProductZoomer } from "vue-product-zoomer"; export default { components: { ProductZoomer }, } </script>

if we run project

$ npm run dev

we can see error

[ Vue warn ]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Well look at this interesting point if I come to pick up the brackets`

<template> ----------- <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" /> ----------- </template> <script> import ProductZoomer from "vue-product-zoomer"; export default { components: { ProductZoomer }, } </script> now we see this error.

[Vue warn]: Failed to mount component: template or render function not defined.

and if I refresh my page can see this error

ReferenseError Window is not defined

pleas help meeeeeeeeeeeeee. what can I do ????????????????????????????

[Ricro]

Try to import vue-product-zoomer as a Nuxt plugin.

Create the file ~/plugins/vue-product-zoomer.js :

import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'

Vue.use(ProductZoomer)

And then bind it in nuxt.config.js :

export default {
  // ...

  plugins: [
    '~/plugins/axios.js',
    '~/plugins/vue-product-zoomer.js'
  ],

 // ...
}

Finally, use the component wherever you want in a .vue template

<product-zoomer
  :base-images="images"
  :base-zoomer-options="zoomerOptions"
/>

[stevenferrer]

I tried importing it as a nuxt plugin.

// ~/plugins/product-zoomer.js

import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'

Vue.use(ProductZoomer)

// nuxt.config.js
...
  plugins: [
    ...
    { src: '~/plugins/product-zoomer.js', mode: 'client' },
  ]
...

// Using it as:
<template>
  <client-only>
    <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" />
  </client-only>
</template>

The issue is it doesn't work on initial load of the page.

[yajinn]

This module only run the detail page. That's why I loaded this module dynamically on the detail page.

// ~/plugins/product-zoomer.js
import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'
Vue.use(ProductZoomer)

// Trigger for mounted
 data() {
    return {
      isMounted: false,
    }
  }

// Dynamic load when mounted
async mounted() {
          await Promise.all([import('@/plugins/vue-product-zoomer.js')])
    this.isMounted = true
  }

<section v-if="isMounted" class="detail-gallery">
    <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" />
 </section>```

It worked like this but sometimes can't get the width value