pqina / vue-filepond

🔌 A handy FilePond adapter component for Vue
https://pqina.nl/filepond
MIT License
1.93k stars 128 forks source link

[Bug] NUXT 3 - plugin is not a function #266

Open capoia opened 1 year ago

capoia commented 1 year ago

Is there an existing issue for this?

Have you updated Vue FilePond, FilePond, and all plugins?

Describe the bug

I'm trying to use setoptions to make my own upload method as I did in nuxt2, but it's returning the error "plugin is not a function", as you can see in the reproduction.

Reproduction

https://stackblitz.com/edit/github-8xxhrp?file=app.vue

Environment

- Device: Macbook air m1
- OS: MACOS Ventura
- Broser: Arc
- Vue version: 3.0
- Nuxt version: 3.0
okoliken commented 1 year ago

I have this issue also it's resolved, I used your code snippet on https://stackblitz.com/edit/github-8xxhrp?file=app.vue and it worked for me

Bsaavedra69 commented 1 year ago

I had the same problem and I created a plugin on Nuxt with the following code:

import vueFilePond from "vue-filepond";
import "filepond/dist/filepond.min.css";

import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('file-pond', FilePond);
});

This code works for me (don't forget to install the plugins filepond-plugin-file-validate-type and filepond-plugin-image-preview).

AnalyzePlatypus commented 1 year ago

This worked for me (Vue 3.2.247, VueFilepond 7.0.3):

<template>      
  <Filepond />
</template>

<script setup>
  import { ref } from 'vue';

  import createVueFilePond from "vue-filepond";
  import "filepond/dist/filepond.min.css";

  const Filepond = createVueFilePond();
</script>