Advanced SSR

<script setup>
import { onMounted, ref } from 'vue'

const windowWidth = ref(0)

onMounted(() => {
  // Safe - runs only in browser
  windowWidth.value = window.innerWidth
})
</script>

<script setup>
// WRONG - runs during SSR where window doesn't exist
const width = window.innerWidth
</script>

<template>
  <ClientOnly>
    <BrowserOnlyComponent />
  </ClientOnly>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(async () => {
  const lib = await import('browser-only-library')
  lib.doSomething()
})
</script>

if (!import.meta.env.SSR) {
  const lib = await import('browser-only-library')
  lib.doSomething()
}

// .vitepress/theme/index.ts
export default {
  async enhanceApp({ app }) {
    if (!import.meta.env.SSR) {
      const plugin = await import('browser-plugin')
      app.use(plugin.default)
    }
  }
}

<script setup>
import { defineClientComponent } from 'vitepress'

const BrowserComponent = defineClientComponent(() => {
  return import('browser-only-component')
})
</script>

<template>
  <BrowserComponent />
</template>

<script setup>
import { ref, h } from 'vue'
import { defineClientComponent } from 'vitepress'

const componentRef = ref(null)

const BrowserComponent = defineClientComponent(
  () => import('browser-only-component'),
  // Props passed to h()
  [
    { ref: componentRef, someProp: 'value' },
    {
      default: () => 'Default slot content',
      header: () => h('div', 'Header slot')
    }
  ],
  // Callback after component loads
  () => {
    console.log('Component loaded', componentRef.value)
  }
)
</script>

<ClientOnly>
  <Teleport to="body">
    <div class="modal">Modal content</div>
  </Teleport>
</ClientOnly>

// .vitepress/config.ts
export default {
  async postRender(context) {
    // Inject teleport content into final HTML
  }
}

// BAD
const width = window.innerWidth

// GOOD
let width: number
onMounted(() => {
  width = window.innerWidth
})

// BAD
const el = document.querySelector('#app')

// GOOD
onMounted(() => {
  const el = document.querySelector('#app')
})

<!-- BAD - different on server vs client -->
<div>{{ typeof window !== 'undefined' ? 'client' : 'server' }}</div>

<!-- GOOD - consistent -->
<ClientOnly>
  <div>Client only content</div>
</ClientOnly>

// In Vue component
import.meta.env.SSR  // true on server, false on client

// In VitePress
import { inBrowser } from 'vitepress'
if (inBrowser) {
  // Client-only code
}