gk-shi / v3-waterfall

a waterfall plugin for Vue 3. 一个 vue 3 的自适应瀑布流组件。

Home Page:https://gk-shi.github.io/v3-waterfall/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to import in nuxt3?

jenqz opened this issue · comments

I have wrote a v3-waterfall.client.ts like below:

import V3waterfall from 'v3-waterfall'
import 'v3-waterfall/dist/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  // nuxtApp.vueApp.component('v3-waterfall', v3Waterfall)
  nuxtApp.vueApp.use(V3waterfall)
//   nuxtApp.vueApp.provide('v3-waterfall', V3waterfall)
})

but report error

[Vue warn]: Failed to resolve component: v3-waterfall
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I have try to import other plugins for Vue3 in this way(like element-plus,vue-cal), the warning is reported too. I find element-plus provide a module named @element-plus/nuxt to help it in Nuxt3, but i am not good at nuxt3 yet...╮(╯▽╰)╭ the issue won't be closed , I will continue to try to resolve it.

It looks like I've found a solution for it. Where you use the plugin, using a <client-only> tag wrap it, like:

<div>
  <client-only>
    <v3-waterfall>
      // ... write your slot content here
    </v3-waterfall>
  </client-only>
</div>

then the warning in terminal will be disappeared.
the offical document url is here:

Maybe I should write an English readme.md~