Vue Filepond renders late

17 views Asked by At

I have a Nuxt 3 project with Vuetify and I installed vue-filepond as a plugin:

// ~/plugins/filepond.ts
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"
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size"

export default defineNuxtPlugin((app) => {
    const FilePond = vueFilePond(
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginFileValidateSize
    )

    app.vueApp.component('FilePond', FilePond)
})

but the problem is that it renders later than the vuetify components I use in the same page. Here's how I use the FilePond component on a page:

<v-container style="min-height: calc(100vh - 56px);">
        <v-row>
            <v-col>
                <v-no-ssr>
                    <FilePond
                        ref="pond"
                        name="image"
                        label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
                        :server="serverConfig"
                        accepted-file-types="image/jpeg, image/png, image/webp, image/bmp, image/tiff, image/heic"
                        :file-validate-type-detect-type="validateType"
                        v-bind:files="images"
                        maxFileSize="50000000"
                        :credits="null"
                    />
                </v-no-ssr>
            </v-col>
        </v-row>
    </v-container>

Is there a way to make it load alongside with vuetify components or at least make it load faster?

// nuxt.config.ts
import vuetify, {transformAssetUrls} from 'vite-plugin-vuetify'

export default defineNuxtConfig({
    app: {
        head: {
            link: [
                {
                    rel: "stylesheet",
                    href: "https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&display=swap"
                },
                {
                    rel: "preconnect",
                    href: "https://fonts.googleapis.com"
                },
                {
                    rel: "preconnect",
                    href: "https://fonts.googleapis.com",
                    crossorigin: "crossorigin"
                }
            ]
        }
    },
    devtools: {
        enabled: true
    },
    build: {
        transpile: ['vuetify'],
    },
    modules: [
        (_options, nuxt) => {
            nuxt.hooks.hook('vite:extendConfig', (config) => {
                config.plugins.push(vuetify({autoImport: true}))
            })
        }
    ],
    vite: {
        vue: {
            template: {
                transformAssetUrls,
            },
        },
    },
    plugins: [
        {
            src: '~/plugins/filepond.ts',
            mode: 'client'
        }
    ]
})
0

There are 0 answers