use of window libs or localStorage

[calebeaires]

Sometimes we need to call first libs that make use of window context. I tried to use vitedge with it but had no success since I couldn't separate the code from the render server of the client.

[frandiox]

@calebeaires Hi! If you have access to the code, you can do:

if (!import.meta.env.SSR) {
  window.anything

  myFunctionThatCallsWindow()
}

If it's a component that checks window during rendering, there's a ClientOnly component wrapper to make it run only in the browser:

import { ClientOnly } from 'vitedge'

...
<ClientOnly>
 <MyComponentThatCallsWindow />
</ClientOnly>

If it's a library that calls window on import, you can use dynamic imports like this:

let library
if (!import.meta.env.SSR) {
  lib = await import('my-lib')
}

If dynamic imports are an issue for any reason, add vite-plugin-iso-import and use normal imports:

import lib from 'my-lib?client'

if (!import.meta.env.SSR) {
  // use lib
}

It's also possible to have 2 different entry points in Vitedge, one for server and one for client, if you need that. Keep the entry point for the client in your index.html (src="./src/entry-client.js" or similar), and run the CLI with ssr flag like this: vitedge dev --ssr ./src/entry-server.js. You'll need to import Vitedge in your 2 entry points from vitedge/vue/entry-client and vitedge/vue/entry-server instead of just vitedge.

Hope that helps!

[calebeaires]

Thanks. It helps to deliver.

[frandiox]

I've added a section about this in the docs: https://vitedge.js.org/conditional-rendering.html