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'
}
]
})