Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how can i use single component? (nuxt) #61

Open
MirzaeiDev opened this issue Jul 19, 2020 · 3 comments
Open

how can i use single component? (nuxt) #61

MirzaeiDev opened this issue Jul 19, 2020 · 3 comments

Comments

@MirzaeiDev
Copy link

MirzaeiDev commented Jul 19, 2020

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 ????????????????????????????

@MirzaeiDev MirzaeiDev changed the title how can i use single component? how can i use single component? (nuxt) Jul 19, 2020
@Ricro
Copy link

Ricro commented Sep 30, 2020

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
Copy link

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
Copy link

yajinn commented Sep 16, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants