diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts
index b017ce3d1..3424b5ada 100644
--- a/packages/core/src/page.ts
+++ b/packages/core/src/page.ts
@@ -7,7 +7,7 @@ import { hrefToUrl, isSameUrlWithoutHash } from './url'
 
 class CurrentPage {
   protected page!: Page
-  protected swapComponent!: PageHandler
+  protected swapComponent!: PageHandler<any>
   protected resolveComponent!: PageResolver
   protected componentId = {}
   protected listeners: {
@@ -18,7 +18,11 @@ class CurrentPage {
   protected cleared = false
   protected pendingDeferredProps: Pick<Page, 'deferredProps' | 'url' | 'component'> | null = null
 
-  public init({ initialPage, swapComponent, resolveComponent }: RouterInitParams) {
+  public init<ComponentType = Component>({
+    initialPage,
+    swapComponent,
+    resolveComponent,
+  }: RouterInitParams<ComponentType>) {
     this.page = initialPage
     this.swapComponent = swapComponent
     this.resolveComponent = resolveComponent
diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
index 9ede2173f..86751701b 100644
--- a/packages/core/src/router.ts
+++ b/packages/core/src/router.ts
@@ -48,7 +48,11 @@ export class Router {
     interruptible: false,
   })
 
-  public init({ initialPage, resolveComponent, swapComponent }: RouterInitParams): void {
+  public init<ComponentType = Component>({
+    initialPage,
+    resolveComponent,
+    swapComponent,
+  }: RouterInitParams<ComponentType>): void {
     currentPage.init({
       initialPage,
       resolveComponent,
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 156527921..ac03978f3 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -162,12 +162,12 @@ export interface ClientSideVisitOptions<TProps = Page['props']> {
 
 export type PageResolver = (name: string) => Component
 
-export type PageHandler = ({
+export type PageHandler<ComponentType = Component> = ({
   component,
   page,
   preserveState,
 }: {
-  component: Component
+  component: ComponentType
   page: Page
   preserveState: boolean
 }) => Promise<unknown>
@@ -363,10 +363,10 @@ export type PollOptions = {
 
 export type VisitHelperOptions<T extends RequestPayload = RequestPayload> = Omit<VisitOptions<T>, 'method' | 'data'>
 
-export type RouterInitParams = {
+export type RouterInitParams<ComponentType = Component> = {
   initialPage: Page
   resolveComponent: PageResolver
-  swapComponent: PageHandler
+  swapComponent: PageHandler<ComponentType>
 }
 
 export type PendingVisitOptions = {
@@ -388,7 +388,45 @@ export type InternalActiveVisit = ActiveVisit & {
 export type VisitId = unknown
 export type Component = unknown
 
-export type InertiaAppResponse = Promise<{ head: string[]; body: string } | void>
+interface CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn> {
+  resolve: TComponentResolver
+  setup: (options: TSetupOptions) => TSetupReturn
+  title?: HeadManagerTitleCallback
+}
+
+export interface CreateInertiaAppOptionsForCSR<
+  SharedProps extends PageProps,
+  TComponentResolver,
+  TSetupOptions,
+  TSetupReturn,
+> extends CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn> {
+  id?: string
+  page?: Page<SharedProps>
+  progress?:
+    | false
+    | {
+        delay?: number
+        color?: string
+        includeCSS?: boolean
+        showSpinner?: boolean
+      }
+  render?: undefined
+}
+
+export interface CreateInertiaAppOptionsForSSR<
+  SharedProps extends PageProps,
+  TComponentResolver,
+  TSetupOptions,
+  TSetupReturn,
+> extends CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn> {
+  id?: undefined
+  page: Page<SharedProps>
+  progress?: undefined
+  render: unknown
+}
+
+export type InertiaAppSSRResponse = { head: string[]; body: string }
+export type InertiaAppResponse = Promise<InertiaAppSSRResponse | void>
 
 export type HeadManagerTitleCallback = (title: string) => string
 export type HeadManagerOnUpdateCallback = (elements: string[]) => void
diff --git a/packages/react/src/App.ts b/packages/react/src/App.ts
index fcf14ab80..2c165503f 100755
--- a/packages/react/src/App.ts
+++ b/packages/react/src/App.ts
@@ -1,26 +1,52 @@
-import { createHeadManager, PageHandler, router } from '@inertiajs/core'
-import { createElement, useEffect, useMemo, useState } from 'react'
+import {
+  createHeadManager,
+  HeadManagerOnUpdateCallback,
+  HeadManagerTitleCallback,
+  Page,
+  PageHandler,
+  PageProps,
+  router,
+} from '@inertiajs/core'
+import { createElement, FunctionComponent, ReactNode, useEffect, useMemo, useState } from 'react'
 import HeadContext from './HeadContext'
 import PageContext from './PageContext'
+import { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
 
 let currentIsInitialPage = true
 let routerIsInitialized = false
-let swapComponent: PageHandler = async () => {
+let swapComponent: PageHandler<ReactComponent> = async () => {
   // Dummy function so we can init the router outside of the useEffect hook. This is
   // needed so `router.reload()` works right away (on mount) in any of the user's
   // components. We swap in the real function in the useEffect hook below.
   currentIsInitialPage = false
 }
 
-export default function App({
+type CurrentPage = {
+  component: ReactComponent | null
+  page: Page
+  key: number | null
+}
+
+export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+  children?: (options: { component: ReactComponent; props: PageProps; key: number | null }) => ReactNode
+  initialPage: Page<SharedProps>
+  initialComponent?: ReactComponent
+  resolveComponent?: (name: string) => ReactComponent | Promise<ReactComponent>
+  titleCallback?: HeadManagerTitleCallback
+  onHeadUpdate?: HeadManagerOnUpdateCallback
+}
+
+export type InertiaApp = FunctionComponent<InertiaAppProps>
+
+export default function App<SharedProps extends PageProps = PageProps>({
   children,
   initialPage,
   initialComponent,
   resolveComponent,
   titleCallback,
   onHeadUpdate,
-}) {
-  const [current, setCurrent] = useState({
+}: InertiaAppProps<SharedProps>) {
+  const [current, setCurrent] = useState<CurrentPage>({
     component: initialComponent || null,
     page: initialPage,
     key: null,
@@ -35,9 +61,9 @@ export default function App({
   }, [])
 
   if (!routerIsInitialized) {
-    router.init({
+    router.init<ReactComponent>({
       initialPage,
-      resolveComponent,
+      resolveComponent: resolveComponent!,
       swapComponent: async (args) => swapComponent(args),
     })
 
@@ -45,7 +71,7 @@ export default function App({
   }
 
   useEffect(() => {
-    swapComponent = async ({ component, page, preserveState }) => {
+    swapComponent = async ({ component, page, preserveState }: ReactPageHandlerArgs) => {
       if (currentIsInitialPage) {
         // We block setting the current page on the initial page to
         // prevent the initial page from being re-rendered again.
@@ -73,18 +99,18 @@ export default function App({
 
   const renderChildren =
     children ||
-    (({ Component, props, key }) => {
-      const child = createElement(Component, { key, ...props })
+    (({ component, props, key }) => {
+      const child = createElement(component, { key, ...props })
 
-      if (typeof Component.layout === 'function') {
-        return Component.layout(child)
+      if (typeof component.layout === 'function') {
+        return (component.layout as LayoutFunction)(child)
       }
 
-      if (Array.isArray(Component.layout)) {
-        return Component.layout
+      if (Array.isArray(component.layout)) {
+        return (component.layout as any)
           .concat(child)
           .reverse()
-          .reduce((children, Layout) => createElement(Layout, { children, ...props }))
+          .reduce((children: any, Layout: any) => createElement(Layout, { children, ...props }))
       }
 
       return child
@@ -97,7 +123,7 @@ export default function App({
       PageContext.Provider,
       { value: current.page },
       renderChildren({
-        Component: current.component,
+        component: current.component,
         key: current.key,
         props: current.page.props,
       }),
diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts
index 7bfaedd6c..d74f7b925 100644
--- a/packages/react/src/createInertiaApp.ts
+++ b/packages/react/src/createInertiaApp.ts
@@ -1,73 +1,50 @@
 import {
-  HeadManagerOnUpdateCallback,
-  HeadManagerTitleCallback,
-  Page,
+  CreateInertiaAppOptionsForCSR,
+  CreateInertiaAppOptionsForSSR,
+  InertiaAppResponse,
+  InertiaAppSSRResponse,
   PageProps,
-  PageResolver,
   router,
   setupProgress,
 } from '@inertiajs/core'
-import { ComponentType, FunctionComponent, Key, ReactElement, ReactNode, createElement } from 'react'
+import { ReactElement, createElement } from 'react'
 import { renderToString } from 'react-dom/server'
-import App from './App'
-
-type ReactInstance = ReactElement
-type ReactComponent = ReactNode
-
-type AppType<SharedProps extends PageProps = PageProps> = FunctionComponent<
-  {
-    children?: (props: { Component: ComponentType; key: Key; props: Page<SharedProps>['props'] }) => ReactNode
-  } & SetupOptions<unknown, SharedProps>['props']
->
+import App, { InertiaAppProps, type InertiaApp } from './App'
+import { ReactComponent } from './types'
 
 export type SetupOptions<ElementType, SharedProps extends PageProps> = {
   el: ElementType
-  App: AppType
-  props: {
-    initialPage: Page<SharedProps>
-    initialComponent: ReactComponent
-    resolveComponent: PageResolver
-    titleCallback?: HeadManagerTitleCallback
-    onHeadUpdate?: HeadManagerOnUpdateCallback
-  }
+  App: InertiaApp
+  props: InertiaAppProps<SharedProps>
 }
 
-type BaseInertiaAppOptions = {
-  title?: HeadManagerTitleCallback
-  resolve: PageResolver
-}
+// The 'unknown' type is necessary for backwards compatibility...
+type ComponentResolver = (
+  name: string,
+) => ReactComponent | Promise<ReactComponent> | { default: ReactComponent } | unknown
 
-type CreateInertiaAppSetupReturnType = ReactInstance | void
-type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
-  id?: string
-  page?: Page | string
-  render?: undefined
-  progress?:
-    | false
-    | {
-        delay?: number
-        color?: string
-        includeCSS?: boolean
-        showSpinner?: boolean
-      }
-  setup(options: SetupOptions<HTMLElement, SharedProps>): CreateInertiaAppSetupReturnType
-}
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<
+  SharedProps,
+  ComponentResolver,
+  SetupOptions<HTMLElement, SharedProps>,
+  void
+>
 
-type CreateInertiaAppSSRContent = { head: string[]; body: string }
-type InertiaAppOptionsForSSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
-  id?: undefined
-  page: Page | string
+type InertiaAppOptionsForSSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForSSR<
+  SharedProps,
+  ComponentResolver,
+  SetupOptions<null, SharedProps>,
+  ReactElement
+> & {
   render: typeof renderToString
-  progress?: undefined
-  setup(options: SetupOptions<null, SharedProps>): ReactInstance
 }
 
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForCSR<SharedProps>,
-): Promise<CreateInertiaAppSetupReturnType>
+): Promise<void>
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForSSR<SharedProps>,
-): Promise<CreateInertiaAppSSRContent>
+): Promise<InertiaAppSSRResponse>
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
@@ -76,32 +53,42 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   progress = {},
   page,
   render,
-}: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<SharedProps>): Promise<
-  CreateInertiaAppSetupReturnType | CreateInertiaAppSSRContent
-> {
+}: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<SharedProps>): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
-  // @ts-expect-error
+  const initialPage = page || JSON.parse(el?.dataset.page || '{}')
+  // @ts-expect-error - This can be improved once we remove the 'unknown' type from the resolver...
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 
-  let head = []
+  let head: string[] = []
 
   const reactApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
-    return setup({
-      // @ts-expect-error
-      el,
+    const props = {
+      initialPage,
+      initialComponent,
+      resolveComponent,
+      titleCallback: title,
+    }
+
+    if (isServer) {
+      const ssrSetup = setup as (options: SetupOptions<null, SharedProps>) => ReactElement
+
+      return ssrSetup({
+        el: null,
+        App,
+        props: { ...props, onHeadUpdate: (elements: string[]) => (head = elements) },
+      })
+    }
+
+    const csrSetup = setup as (options: SetupOptions<HTMLElement, SharedProps>) => void
+
+    return csrSetup({
+      el: el as HTMLElement,
       App,
-      props: {
-        initialPage,
-        initialComponent,
-        resolveComponent,
-        titleCallback: title,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
-      },
+      props,
     })
   })
 
@@ -109,7 +96,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     setupProgress(progress)
   }
 
-  if (isServer) {
+  if (isServer && render) {
     const body = await render(
       createElement(
         'div',
@@ -117,8 +104,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
           id,
           'data-page': JSON.stringify(initialPage),
         },
-        // @ts-expect-error
-        reactApp,
+        reactApp as ReactElement,
       ),
     )
 
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
new file mode 100644
index 000000000..5e25dd573
--- /dev/null
+++ b/packages/react/src/types.ts
@@ -0,0 +1,11 @@
+import { PageHandler } from '@inertiajs/core'
+import { ComponentType, ReactNode } from 'react'
+
+export type LayoutFunction = (page: ReactNode) => ReactNode
+export type LayoutComponent = ComponentType<{ children: ReactNode }>
+
+export type ReactComponent = ComponentType<any> & {
+  layout?: LayoutComponent | LayoutComponent[] | LayoutFunction
+}
+
+export type ReactPageHandlerArgs = Parameters<PageHandler<ComponentType>>[0]
diff --git a/packages/react/test-app/app.tsx b/packages/react/test-app/app.tsx
index c174b809e..bed4cf79b 100644
--- a/packages/react/test-app/app.tsx
+++ b/packages/react/test-app/app.tsx
@@ -5,6 +5,7 @@ createInertiaApp({
   page: window.initialPage,
   resolve: async (name) => {
     const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
+    // const typedPages = import.meta.glob<ComponentType>('./Pages/**/*.tsx', { eager: true })
 
     if (name === 'DeferredProps/InstantReload') {
       // Add small delay to ensure the component is loaded after the initial page load
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 934e86187..7f8afa41a 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -22,7 +22,7 @@
     "noUnusedParameters": true,
     "preserveConstEnums": true,
     "removeComments": true,
-    "typeRoots": ["./node_modules/@types"]
-    // "strict": true
+    "typeRoots": ["./node_modules/@types"],
+    "strict": true
   }
 }
diff --git a/packages/svelte/src/components/App.svelte b/packages/svelte/src/components/App.svelte
index df454db00..24ad23044 100644
--- a/packages/svelte/src/components/App.svelte
+++ b/packages/svelte/src/components/App.svelte
@@ -1,17 +1,17 @@
 <script context="module" lang="ts">
   import type { ComponentResolver, ResolvedComponent } from '../types'
-  import { type Page } from '@inertiajs/core'
+  import { type Page, type PageProps } from '@inertiajs/core'
 
-  export interface InertiaAppProps {
+  export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
     initialComponent: ResolvedComponent
-    initialPage: Page
+    initialPage: Page<SharedProps>
     resolveComponent: ComponentResolver
   }
 </script>
 
 <script lang="ts">
   import type { LayoutType, LayoutResolver } from '../types'
-  import { router, type PageProps } from '@inertiajs/core'
+  import { router } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
   import { setPage } from '../page'
 
@@ -29,11 +29,11 @@
   const isServer = typeof window === 'undefined'
 
   if (!isServer) {
-    router.init({
+    router.init<ResolvedComponent>({
       initialPage,
       resolveComponent,
       swapComponent: async (args) => {
-        component = args.component as ResolvedComponent
+        component = args.component
         page = args.page
         key = args.preserveState ? key : Date.now()
 
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
index 1b9ac02c0..749844a0d 100644
--- a/packages/svelte/src/createInertiaApp.ts
+++ b/packages/svelte/src/createInertiaApp.ts
@@ -1,58 +1,56 @@
-import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
+import {
+  router,
+  setupProgress,
+  type CreateInertiaAppOptionsForCSR,
+  type InertiaAppResponse,
+  type PageProps,
+} from '@inertiajs/core'
 import { escape } from 'lodash-es'
-import type { ComponentType } from 'svelte'
 import App, { type InertiaAppProps } from './components/App.svelte'
 import type { ComponentResolver } from './types'
 
 type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
-type AppComponent = ComponentType<App> & { render: (props: InertiaAppProps) => SvelteRenderResult }
 
-interface CreateInertiaAppProps {
-  id?: string
-  resolve: ComponentResolver
-  setup: (props: {
-    el: HTMLElement | null
-    App: AppComponent
-    props: InertiaAppProps
-  }) => void | App | SvelteRenderResult
-  progress?:
-    | false
-    | {
-        delay?: number
-        color?: string
-        includeCSS?: boolean
-        showSpinner?: boolean
-      }
-  page?: Page
+type SetupOptions<SharedProps extends PageProps> = {
+  el: HTMLElement | null
+  App: typeof App
+  props: InertiaAppProps<SharedProps>
 }
 
-export default async function createInertiaApp({
+// Svelte doesn't use CreateInertiaAppOptionsForSSR as it doesn't pass a
+// 'render' function, it calls it directly in the setup() method...
+type InertiaAppOptions<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<
+  SharedProps,
+  ComponentResolver,
+  SetupOptions<SharedProps>,
+  SvelteRenderResult | void
+>
+
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
   setup,
   progress = {},
   page,
-}: CreateInertiaAppProps): InertiaAppResponse {
+}: InertiaAppOptions<SharedProps>): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage: Page = page || JSON.parse(el?.dataset.page || '{}')
+  const initialPage = page || JSON.parse(el?.dataset.page || '{}')
   const resolveComponent = (name: string) => Promise.resolve(resolve(name))
 
-  const [initialComponent] = await Promise.all([
+  const svelteApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),
-  ])
-
-  const props: InertiaAppProps = { initialPage, initialComponent, resolveComponent }
-
-  const svelteApp = setup({
-    el,
-    App: App as unknown as AppComponent,
-    props,
+  ]).then(([initialComponent]) => {
+    return setup({
+      el,
+      App,
+      props: { initialPage, initialComponent, resolveComponent },
+    })
   })
 
-  if (isServer) {
-    const { html, head, css } = svelteApp as SvelteRenderResult
+  if (isServer && svelteApp) {
+    const { html, head, css } = svelteApp
 
     return {
       body: `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${html}</div>`,
@@ -60,7 +58,7 @@ export default async function createInertiaApp({
     }
   }
 
-  if (progress) {
+  if (!isServer && progress) {
     setupProgress(progress)
   }
 }
diff --git a/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte b/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
index 9eb793715..5b01cc13e 100644
--- a/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
+++ b/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
@@ -19,12 +19,12 @@
   <h1>Edit User {user.id}</h1>
   <form>
     <div>
-      <label>Name:</label>
-      <input type="text" bind:value={$form.name} />
+      <label for="name">Name:</label>
+      <input id="name" type="text" bind:value={$form.name} />
     </div>
     <div>
-      <label>Email:</label>
-      <input type="email" bind:value={$form.email} />
+      <label for="email">Email:</label>
+      <input id="email" type="email" bind:value={$form.email} />
     </div>
   </form>
 </div>
diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts
index c08483f43..d998cb760 100755
--- a/packages/vue3/src/app.ts
+++ b/packages/vue3/src/app.ts
@@ -1,5 +1,6 @@
 import {
   createHeadManager,
+  HeadManager,
   HeadManagerOnUpdateCallback,
   HeadManagerTitleCallback,
   Page,
@@ -23,9 +24,9 @@ import remember from './remember'
 import { VuePageHandlerArgs } from './types'
 import useForm from './useForm'
 
-export interface InertiaAppProps {
-  initialPage: Page
-  initialComponent?: object
+export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+  initialPage: Page<SharedProps>
+  initialComponent?: DefineComponent
   resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
   titleCallback?: HeadManagerTitleCallback
   onHeadUpdate?: HeadManagerOnUpdateCallback
@@ -33,11 +34,11 @@ export interface InertiaAppProps {
 
 export type InertiaApp = DefineComponent<InertiaAppProps>
 
-const component = ref(null)
-const page = ref<Page<any>>(null)
+const component = ref<DefineComponent | undefined>(undefined)
+const page = ref<Page>()
 const layout = shallowRef(null)
-const key = ref(null)
-let headManager = null
+const key = ref<number | undefined>(undefined)
+let headManager: HeadManager
 
 const App: InertiaApp = defineComponent({
   name: 'Inertia',
@@ -47,7 +48,7 @@ const App: InertiaApp = defineComponent({
       required: true,
     },
     initialComponent: {
-      type: Object,
+      type: Object as PropType<DefineComponent>,
       required: false,
     },
     resolveComponent: {
@@ -57,7 +58,7 @@ const App: InertiaApp = defineComponent({
     titleCallback: {
       type: Function as PropType<HeadManagerTitleCallback>,
       required: false,
-      default: (title) => title,
+      default: (title: string) => title,
     },
     onHeadUpdate: {
       type: Function as PropType<HeadManagerOnUpdateCallback>,
@@ -65,22 +66,22 @@ const App: InertiaApp = defineComponent({
       default: () => () => {},
     },
   },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
-    component.value = initialComponent ? markRaw(initialComponent) : null
+  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }: InertiaAppProps) {
+    component.value = initialComponent ? markRaw(initialComponent) : undefined
     page.value = initialPage
-    key.value = null
+    key.value = undefined
 
     const isServer = typeof window === 'undefined'
-    headManager = createHeadManager(isServer, titleCallback, onHeadUpdate)
+    headManager = createHeadManager(isServer, titleCallback || ((title: string) => title), onHeadUpdate || (() => {}))
 
     if (!isServer) {
-      router.init({
+      router.init<DefineComponent>({
         initialPage,
-        resolveComponent,
-        swapComponent: async (args: VuePageHandlerArgs) => {
-          component.value = markRaw(args.component)
-          page.value = args.page
-          key.value = args.preserveState ? key.value : Date.now()
+        resolveComponent: resolveComponent!,
+        swapComponent: async (options: VuePageHandlerArgs) => {
+          component.value = markRaw(options.component)
+          page.value = options.page
+          key.value = options.preserveState ? key.value : Date.now()
         },
       })
 
@@ -92,7 +93,7 @@ const App: InertiaApp = defineComponent({
         component.value.inheritAttrs = !!component.value.inheritAttrs
 
         const child = h(component.value, {
-          ...page.value.props,
+          ...page.value!.props,
           key: key.value,
         })
 
@@ -111,7 +112,7 @@ const App: InertiaApp = defineComponent({
             .reverse()
             .reduce((child, layout) => {
               layout.inheritAttrs = !!layout.inheritAttrs
-              return h(layout, { ...page.value.props }, () => child)
+              return h(layout, { ...page.value!.props }, () => child)
             })
         }
 
diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts
index cac03d660..8d46cb2d6 100644
--- a/packages/vue3/src/createInertiaApp.ts
+++ b/packages/vue3/src/createInertiaApp.ts
@@ -1,25 +1,48 @@
-import { HeadManagerTitleCallback, Page, router, setupProgress } from '@inertiajs/core'
-import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
+import {
+  CreateInertiaAppOptionsForCSR,
+  CreateInertiaAppOptionsForSSR,
+  InertiaAppResponse,
+  InertiaAppSSRResponse,
+  PageProps,
+  router,
+  setupProgress,
+} from '@inertiajs/core'
+import { createSSRApp, DefineComponent, h, Plugin, App as VueApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
-interface CreateInertiaAppProps {
-  id?: string
-  resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
-  setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
-  title?: HeadManagerTitleCallback
-  progress?:
-    | false
-    | {
-        delay?: number
-        color?: string
-        includeCSS?: boolean
-        showSpinner?: boolean
-      }
-  page?: Page
-  render?: (app: VueApp) => Promise<string>
+type ComponentResolver = (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
+
+type SetupOptions<ElementType, SharedProps extends PageProps> = {
+  el: ElementType
+  App: InertiaApp
+  props: InertiaAppProps<SharedProps>
+  plugin: Plugin
+}
+
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<
+  SharedProps,
+  ComponentResolver,
+  SetupOptions<HTMLElement, SharedProps>,
+  void
+>
+
+type InertiaAppOptionsForSSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForSSR<
+  SharedProps,
+  ComponentResolver,
+  SetupOptions<null, SharedProps>,
+  VueApp
+> & {
+  render: typeof renderToString
 }
 
-export default async function createInertiaApp({
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: InertiaAppOptionsForCSR<SharedProps>,
+): Promise<void>
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: InertiaAppOptionsForSSR<SharedProps>,
+): Promise<InertiaAppSSRResponse>
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
   setup,
@@ -27,28 +50,42 @@ export default async function createInertiaApp({
   progress = {},
   page,
   render,
-}: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
+}: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<SharedProps>): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
-  const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
+  const initialPage = page || JSON.parse(el?.dataset.page || '{}')
+  const resolveComponent = (name: string) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 
-  let head = []
+  let head: string[] = []
 
   const vueApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
-    return setup({
-      el,
+    const props = {
+      initialPage,
+      initialComponent,
+      resolveComponent,
+      titleCallback: title,
+    }
+
+    if (isServer) {
+      const ssrSetup = setup as (options: SetupOptions<null, SharedProps>) => VueApp
+
+      return ssrSetup({
+        el: null,
+        App,
+        props: { ...props, onHeadUpdate: (elements: string[]) => (head = elements) },
+        plugin,
+      })
+    }
+
+    const csrSetup = setup as (options: SetupOptions<HTMLElement, SharedProps>) => void
+
+    return csrSetup({
+      el: el as HTMLElement,
       App,
-      props: {
-        initialPage,
-        initialComponent,
-        resolveComponent,
-        titleCallback: title,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
-      },
+      props,
       plugin,
     })
   })
@@ -57,7 +94,7 @@ export default async function createInertiaApp({
     setupProgress(progress)
   }
 
-  if (isServer) {
+  if (isServer && render) {
     const body = await render(
       createSSRApp({
         render: () =>
diff --git a/packages/vue3/src/types.ts b/packages/vue3/src/types.ts
index 2295b1e83..a9aafd0c1 100644
--- a/packages/vue3/src/types.ts
+++ b/packages/vue3/src/types.ts
@@ -1,10 +1,8 @@
 import { createHeadManager, Page, PageHandler, PageProps, router, SharedPageProps } from '@inertiajs/core'
-import { ComponentPublicInstance } from 'vue'
+import { DefineComponent } from 'vue'
 import useForm from './useForm'
 
-export type VuePageHandlerArgs = Parameters<PageHandler>[0] & {
-  component: ComponentPublicInstance | Promise<ComponentPublicInstance>
-}
+export type VuePageHandlerArgs = Parameters<PageHandler<DefineComponent>>[0]
 
 declare module '@inertiajs/core' {
   export interface Router {
diff --git a/packages/vue3/tsconfig.json b/packages/vue3/tsconfig.json
index d86fc0009..43177a488 100644
--- a/packages/vue3/tsconfig.json
+++ b/packages/vue3/tsconfig.json
@@ -23,7 +23,7 @@
     "noUnusedParameters": true,
     "preserveConstEnums": true,
     "removeComments": true,
-    "typeRoots": ["./node_modules/@types"]
-    // "strict": true
+    "typeRoots": ["./node_modules/@types"],
+    "strict": true
   }
 }
diff --git a/playgrounds/vue3/resources/js/app.ts b/playgrounds/vue3/resources/js/app.ts
index e560b88b3..5242c7b87 100644
--- a/playgrounds/vue3/resources/js/app.ts
+++ b/playgrounds/vue3/resources/js/app.ts
@@ -4,10 +4,9 @@ import { createSSRApp, h, type DefineComponent } from 'vue'
 createInertiaApp({
   title: (title) => `${title} - Vue 3 Playground`,
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.vue')
-    // const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-    // @ts-ignore
-    return pages[`./Pages/${name}.vue`]() as DefineComponent
+    const pages = import.meta.glob<DefineComponent>('./Pages/**/*.vue')
+
+    return pages[`./Pages/${name}.vue`]()
   },
   setup({ el, App, props, plugin }) {
     createSSRApp({ render: () => h(App, props) })
diff --git a/playgrounds/vue3/resources/js/ssr.ts b/playgrounds/vue3/resources/js/ssr.ts
index d525f32de..62826d7fa 100644
--- a/playgrounds/vue3/resources/js/ssr.ts
+++ b/playgrounds/vue3/resources/js/ssr.ts
@@ -1,7 +1,7 @@
 import { createInertiaApp } from '@inertiajs/vue3'
 import createServer from '@inertiajs/vue3/server'
-import { renderToString } from '@vue/server-renderer'
 import { createSSRApp, h, type DefineComponent } from 'vue'
+import { renderToString } from 'vue/server-renderer'
 
 createServer((page) =>
   createInertiaApp({