Nuxt•9mo ago

What is the recommended route to using a 3rd-party composable that relies on the window object?

I'm playing with vue-plaid-link and ran into issues until I dug into the source and saw this line:

const next = createPlaid(
    {
        ...options.value,
        onLoad: () => {
            iframeLoaded.value = true
            options.value.onLoad && options.value.onLoad()
        },
    },
    window.Plaid.create
)

const next = createPlaid(
    {
        ...options.value,
        onLoad: () => {
            iframeLoaded.value = true
            options.value.onLoad && options.value.onLoad()
        },
    },
    window.Plaid.create
)

Specifically, the window.Plaid.create. I was able to get this to working by disabling ssr in my nuxt config, but this is not ideal. I'd prefer to continue using ssr, while also being able to use this library. What is the current recommended way of handling this? Is it plugins? Checking against the window object before using the composable?

GitHub

GitHub - jclaessens97/vue-plaid-link: Vue component for Plaid Link

Vue component for Plaid Link. Contribute to jclaessens97/vue-plaid-link development by creating an account on GitHub.

2 Replies

Eric•9mo ago

At first look, it seems like you dont need to render PLaid on the server. You could justuse ssr and wait for you app to be loaded in the browser to load PLaid. The latest version that came out a few days ago lets you create server and client pages. you just have to name the page file 'page.client.vue" or "page.server.vue"

Cody BontecouOP•9mo ago

Hey @Eric, you're right, it's purely client-side. Moving it to a .client.vue file and swapping ssr back to true does the trick.. kind of. I had to pull the libraries code down and put it into my codebase to work instead of being able to rely on the package from npm. Not sure where the disconnect is happening.

Gaming

Programming

What is the recommended route to using a 3rd-party composable that relies on the window object?