Using filepond in nuxt ssr fails

Am trying to use filepond with nuxt but am stuck on an error vueFilePond is not defined

      <script>
        import * as FilePond from 'filepond'
        if(process.browser){
        const vueFilePond = require('filepond');
        require('filepond/dist/filepond.min.css');
        require('filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css');
        const FilePondPluginFileValidateType = require('filepond-plugin-file-validate-type');
        const FilePondPluginImagePreview = require('filepond-plugin-image-preview');
        const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
    }

    export default{
        layout: 'backend/websitesettingslayout',
        middleware: ['authenticated'],
        data: () => ({
            details_form: {
                company_name: '',
                logo:''
            },
            myFiles: ['cat.jpeg']
        }),
        mounted(){
            console.log("middleware is ", this.middleware);
        },
        methods: {
            handleFilePondInit() {
                console.log('FilePond has initialized');

                // FilePond instance methods are available on `this.$refs.pond`
            }
        },
        components:{
            FilePond: vueFilePond.default(FilePondPluginImagePreview)
        }
    }
</script>

The above throws an error vueFilePond is not defined

I have also tried importing it the normal way like

    import * as FilePond from 'filepond'
     components:{
       FilePond
     }

but it give me an error of window is not defined which points to the filepond node_modules folder

How do i make this to work with nuxtjs ssr

[digitalit]

Please share the complete Nuxt.js set up.

[Geowan]

I figured my mistake i added this as a plugin and now it works