diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index af5ac6aca..a67d7c451 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -388,7 +388,21 @@ export type InternalActiveVisit = ActiveVisit & {
 export type VisitId = unknown
 export type Component = unknown
 
-export type InertiaAppResponse = Promise<{ head: string[]; body: string } | void>
+export interface InertiaAppProgressOptions {
+  delay?: number
+  color?: string
+  includeCSS?: boolean
+  showSpinner?: boolean
+}
+
+export type InertiaAppSSRContent = { head: string[]; body: string }
+export type InertiaAppResponse = Promise<InertiaAppSSRContent | void>
+
+export type CreateInertiaAppOptions = {
+  id?: string
+  progress?: InertiaAppProgressOptions | false
+  resolve: PageResolver
+}
 
 export type HeadManagerTitleCallback = (title: string) => string
 export type HeadManagerOnUpdateCallback = (elements: string[]) => void
@@ -601,7 +615,7 @@ export interface InfiniteScrollRef {
 }
 
 export interface InfiniteScrollComponentBaseProps {
-  data?: string
+  data: string
   buffer?: number
   as?: string
   manual?: boolean
diff --git a/packages/react/src/App.ts b/packages/react/src/App.ts
index fcf14ab80..f228503ab 100755
--- a/packages/react/src/App.ts
+++ b/packages/react/src/App.ts
@@ -1,26 +1,35 @@
-import { createHeadManager, PageHandler, router } from '@inertiajs/core'
-import { createElement, useEffect, useMemo, useState } from 'react'
+import { createHeadManager, Page, PageHandler, PageProps, router } from '@inertiajs/core'
+import { ComponentType, createElement, ReactNode, useEffect, useMemo, useState } from 'react'
 import HeadContext from './HeadContext'
 import PageContext from './PageContext'
+import { AppComponent, AppOptions, RenderChildrenOptions } from './createInertiaApp'
+
+type ReactPageHandler = (options: { component: ReactNode; page: Page; preserveState: boolean }) => Promise<void>
+
+type CurrentPage = {
+  component: ReactNode
+  page: Page
+  key: number | null
+}
 
 let currentIsInitialPage = true
 let routerIsInitialized = false
-let swapComponent: PageHandler = async () => {
+let swapComponent: ReactPageHandler = 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({
+function App<SharedProps extends PageProps = PageProps>({
   children,
   initialPage,
   initialComponent,
   resolveComponent,
   titleCallback,
   onHeadUpdate,
-}) {
-  const [current, setCurrent] = useState({
+}: AppOptions<SharedProps>): ReturnType<AppComponent<SharedProps>> {
+  const [current, setCurrent] = useState<CurrentPage>({
     component: initialComponent || null,
     page: initialPage,
     key: null,
@@ -38,7 +47,7 @@ export default function App({
     router.init({
       initialPage,
       resolveComponent,
-      swapComponent: async (args) => swapComponent(args),
+      swapComponent: ((...args: Parameters<ReactPageHandler>) => swapComponent(...args)) as PageHandler,
     })
 
     routerIsInitialized = true
@@ -67,13 +76,13 @@ export default function App({
     return createElement(
       HeadContext.Provider,
       { value: headManager },
-      createElement(PageContext.Provider, { value: current.page }, null),
+      createElement(PageContext.Provider, { value: current.page }),
     )
   }
 
   const renderChildren =
     children ||
-    (({ Component, props, key }) => {
+    (({ Component, props, key }: RenderChildrenOptions<SharedProps>) => {
       const child = createElement(Component, { key, ...props })
 
       if (typeof Component.layout === 'function') {
@@ -81,10 +90,12 @@ export default function App({
       }
 
       if (Array.isArray(Component.layout)) {
-        return Component.layout
-          .concat(child)
+        return [...Component.layout]
           .reverse()
-          .reduce((children, Layout) => createElement(Layout, { children, ...props }))
+          .reduce(
+            (children: ReactNode, Layout: ComponentType): ReactNode => createElement(Layout, { children, ...props }),
+            child,
+          )
       }
 
       return child
@@ -97,12 +108,14 @@ export default function App({
       PageContext.Provider,
       { value: current.page },
       renderChildren({
-        Component: current.component,
+        Component: current.component as unknown as ComponentType,
         key: current.key,
-        props: current.page.props,
-      }),
+        props: current.page.props as Page<SharedProps>['props'],
+      }) as ReactNode,
     ),
   )
 }
 
 App.displayName = 'Inertia'
+
+export default App
diff --git a/packages/react/src/Head.ts b/packages/react/src/Head.ts
index ca679ae8e..a2f3e03a1 100644
--- a/packages/react/src/Head.ts
+++ b/packages/react/src/Head.ts
@@ -2,28 +2,29 @@ import { escape } from 'lodash-es'
 import React, { FunctionComponent, useContext, useEffect, useMemo } from 'react'
 import HeadContext from './HeadContext'
 
+type HeadElement = React.ReactElement<React.HTMLAttributes<HTMLElement> & { 'head-key'?: string; inertia?: string }>
+type InertiaHead = FunctionComponent<InertiaHeadProps>
 type InertiaHeadProps = {
   title?: string
-  children?: React.ReactNode
+  children?: HeadElement[]
 }
 
-type InertiaHead = FunctionComponent<InertiaHeadProps>
-
 const Head: InertiaHead = function ({ children, title }) {
-  const headManager = useContext(HeadContext)
+  const headManager = useContext(HeadContext)!
   const provider = useMemo(() => headManager.createProvider(), [headManager])
   const isServer = typeof window === 'undefined'
 
   useEffect(() => {
     provider.reconnect()
-    provider.update(renderNodes(children))
+    provider.update(renderNodes(children || []))
     return () => {
       provider.disconnect()
     }
   }, [provider, children, title])
 
-  function isUnaryTag(node) {
+  function isUnaryTag(node: HeadElement): boolean {
     return (
+      typeof node.type === 'string' &&
       [
         'area',
         'base',
@@ -44,12 +45,15 @@ const Head: InertiaHead = function ({ children, title }) {
     )
   }
 
-  function renderTagStart(node) {
-    const attrs = Object.keys(node.props).reduce((carry, name) => {
+  function renderTagStart(node: HeadElement): string {
+    const props = node.props as Record<string, unknown>
+    const attrs = Object.keys(props).reduce((carry, name) => {
       if (['head-key', 'children', 'dangerouslySetInnerHTML'].includes(name)) {
         return carry
       }
-      const value = String(node.props[name])
+
+      const value = String(props[name])
+
       if (value === '') {
         return carry + ` ${name}`
       } else {
@@ -59,48 +63,62 @@ const Head: InertiaHead = function ({ children, title }) {
     return `<${node.type}${attrs}>`
   }
 
-  function renderTagChildren(node) {
-    return typeof node.props.children === 'string'
-      ? node.props.children
-      : node.props.children.reduce((html, child) => html + renderTag(child), '')
+  function renderTagChildren(node: HeadElement): string {
+    const { children } = node.props
+
+    if (typeof children === 'string') {
+      return children
+    }
+
+    if (Array.isArray(children)) {
+      return children.reduce((html: string, child: HeadElement) => html + renderTag(child), '')
+    }
+
+    return ''
   }
 
-  function renderTag(node) {
+  function renderTag(node: HeadElement): string {
     let html = renderTagStart(node)
+
     if (node.props.children) {
       html += renderTagChildren(node)
     }
+
     if (node.props.dangerouslySetInnerHTML) {
       html += node.props.dangerouslySetInnerHTML.__html
     }
+
     if (!isUnaryTag(node)) {
       html += `</${node.type}>`
     }
+
     return html
   }
 
-  function ensureNodeHasInertiaProp(node) {
+  function ensureNodeHasInertiaProp(node: HeadElement): HeadElement {
     return React.cloneElement(node, {
       inertia: node.props['head-key'] !== undefined ? node.props['head-key'] : '',
     })
   }
 
-  function renderNode(node) {
+  function renderNode(node: HeadElement): string {
     return renderTag(ensureNodeHasInertiaProp(node))
   }
 
-  function renderNodes(nodes) {
+  function renderNodes(nodes: HeadElement[]): Array<string> {
     const computed = React.Children.toArray(nodes)
       .filter((node) => node)
-      .map((node) => renderNode(node))
+      .map((node) => renderNode(node as HeadElement))
+
     if (title && !computed.find((tag) => tag.startsWith('<title'))) {
       computed.push(`<title inertia>${title}</title>`)
     }
+
     return computed
   }
 
   if (isServer) {
-    provider.update(renderNodes(children))
+    provider.update(renderNodes(children || []))
   }
 
   return null
diff --git a/packages/react/src/createInertiaApp.ts b/packages/react/src/createInertiaApp.ts
index 7bfaedd6c..4739dfe21 100644
--- a/packages/react/src/createInertiaApp.ts
+++ b/packages/react/src/createInertiaApp.ts
@@ -1,9 +1,10 @@
 import {
+  CreateInertiaAppOptions,
   HeadManagerOnUpdateCallback,
   HeadManagerTitleCallback,
+  InertiaAppResponse,
   Page,
   PageProps,
-  PageResolver,
   router,
   setupProgress,
 } from '@inertiajs/core'
@@ -11,63 +12,58 @@ import { ComponentType, FunctionComponent, Key, ReactElement, ReactNode, createE
 import { renderToString } from 'react-dom/server'
 import App from './App'
 
-type ReactInstance = ReactElement
-type ReactComponent = ReactNode
+type ReactPageResolver = (name: string) => Promise<ReactNode>
 
-type AppType<SharedProps extends PageProps = PageProps> = FunctionComponent<
-  {
-    children?: (props: { Component: ComponentType; key: Key; props: Page<SharedProps>['props'] }) => ReactNode
-  } & SetupOptions<unknown, SharedProps>['props']
->
+type SetupProps<SharedProps extends PageProps> = {
+  initialPage: Page<SharedProps>
+  initialComponent: ReactNode
+  resolveComponent: ReactPageResolver
+  titleCallback?: HeadManagerTitleCallback
+  onHeadUpdate?: HeadManagerOnUpdateCallback
+}
 
-export type SetupOptions<ElementType, SharedProps extends PageProps> = {
-  el: ElementType
-  App: AppType
-  props: {
-    initialPage: Page<SharedProps>
-    initialComponent: ReactComponent
-    resolveComponent: PageResolver
-    titleCallback?: HeadManagerTitleCallback
-    onHeadUpdate?: HeadManagerOnUpdateCallback
-  }
+export type InertiaComponentType = ComponentType & {
+  layout?: ((page: ReactNode) => ReactNode) | ComponentType[]
 }
 
-type BaseInertiaAppOptions = {
-  title?: HeadManagerTitleCallback
-  resolve: PageResolver
+export type RenderChildrenOptions<SharedProps extends PageProps> = {
+  Component: InertiaComponentType
+  key: Key | null
+  props: Page<SharedProps>['props']
 }
 
-type CreateInertiaAppSetupReturnType = ReactInstance | void
-type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOptions & {
-  id?: string
-  page?: Page | string
+export type AppOptions<SharedProps extends PageProps = PageProps> = SetupProps<SharedProps> & {
+  children?: (props: RenderChildrenOptions<SharedProps>) => ReactNode
+}
+
+export type AppComponent<SharedProps extends PageProps = PageProps> = FunctionComponent<AppOptions<SharedProps>>
+
+type SetupOptions<ElementType, SharedProps extends PageProps> = {
+  el: ElementType
+  App: AppComponent<SharedProps>
+  props: Omit<AppOptions<SharedProps>, 'children'>
+}
+
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptions & {
+  title?: HeadManagerTitleCallback
+  page?: Page<SharedProps>
   render?: undefined
-  progress?:
-    | false
-    | {
-        delay?: number
-        color?: string
-        includeCSS?: boolean
-        showSpinner?: boolean
-      }
-  setup(options: SetupOptions<HTMLElement, SharedProps>): CreateInertiaAppSetupReturnType
+  setup(options: 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> = CreateInertiaAppOptions & {
+  title?: HeadManagerTitleCallback
+  page: Page<SharedProps>
   render: typeof renderToString
-  progress?: undefined
-  setup(options: SetupOptions<null, SharedProps>): ReactInstance
+  setup(options: SetupOptions<null, SharedProps>): ReactElement
 }
 
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForCSR<SharedProps>,
-): Promise<CreateInertiaAppSetupReturnType>
+): InertiaAppResponse
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
   options: InertiaAppOptionsForSSR<SharedProps>,
-): Promise<CreateInertiaAppSSRContent>
+): InertiaAppResponse
 export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
@@ -76,32 +72,45 @@ 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 resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
+  const initialPage = page || (JSON.parse(el?.dataset.page ?? '{}') as Page<SharedProps>)
+  const resolveComponent: ReactPageResolver = (name) =>
+    Promise.resolve(resolve(name)).then((module) => {
+      const m = module as { default?: ReactNode }
+      return m.default || (module as ReactNode)
+    })
 
-  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 +118,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
     setupProgress(progress)
   }
 
-  if (isServer) {
+  if (isServer && reactApp && render) {
     const body = await render(
       createElement(
         'div',
@@ -117,7 +126,6 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
           id,
           'data-page': JSON.stringify(initialPage),
         },
-        // @ts-expect-error
         reactApp,
       ),
     )
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..4f38dc58e 100644
--- a/packages/svelte/src/components/App.svelte
+++ b/packages/svelte/src/components/App.svelte
@@ -1,17 +1,6 @@
-<script context="module" lang="ts">
-  import type { ComponentResolver, ResolvedComponent } from '../types'
-  import { type Page } from '@inertiajs/core'
-
-  export interface InertiaAppProps {
-    initialComponent: ResolvedComponent
-    initialPage: Page
-    resolveComponent: ComponentResolver
-  }
-</script>
-
 <script lang="ts">
-  import type { LayoutType, LayoutResolver } from '../types'
-  import { router, type PageProps } from '@inertiajs/core'
+  import type { LayoutType, LayoutResolver, InertiaAppProps, ResolvedComponent } from '../types'
+  import { router, type Page, type PageProps } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
   import { setPage } from '../page'
 
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
index 2afc9fb8c..d64415b7e 100644
--- a/packages/svelte/src/components/Form.svelte
+++ b/packages/svelte/src/components/Form.svelte
@@ -65,7 +65,7 @@
   }
 
   export function submit() {
-    const [url, _data] = mergeDataIntoQueryString(_method, _action, getData(), queryStringArrayFormat)
+    const [url, _data] = mergeDataIntoQueryString(_method, _action!, getData(), queryStringArrayFormat)
 
     const maybeReset = (resetOption: boolean | string[] | undefined) => {
       if (!resetOption) {
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
index 1b9ac02c0..b36afeff5 100644
--- a/packages/svelte/src/createInertiaApp.ts
+++ b/packages/svelte/src/createInertiaApp.ts
@@ -1,66 +1,92 @@
-import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
+import {
+  router,
+  setupProgress,
+  type CreateInertiaAppOptions,
+  type InertiaAppResponse,
+  type Page,
+  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'
+import App from './components/App.svelte'
+import type { ComponentResolver, InertiaAppProps } from './types'
 
 type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
-type AppComponent = ComponentType<App> & { render: (props: InertiaAppProps) => SvelteRenderResult }
+type AppComponent<SharedProps extends PageProps = PageProps> = ComponentType<App> & {
+  render: (props: InertiaAppProps<SharedProps>) => SvelteRenderResult
+}
+
+type SetupOptions<ElementType, SharedProps extends PageProps> = {
+  el: ElementType
+  App: AppComponent<SharedProps>
+  props: InertiaAppProps<SharedProps>
+}
 
-interface CreateInertiaAppProps {
-  id?: string
+interface InertiaAppOptionsForCSR<SharedProps extends PageProps = PageProps> extends CreateInertiaAppOptions {
+  page?: Page<SharedProps>
   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
+  setup: (options: SetupOptions<HTMLElement, SharedProps>) => void
 }
 
-export default async function createInertiaApp({
+interface InertiaAppOptionsForSSR<SharedProps extends PageProps = PageProps> extends CreateInertiaAppOptions {
+  page: Page<SharedProps>
+  resolve: ComponentResolver
+  setup: (options: SetupOptions<null, SharedProps>) => SvelteRenderResult
+}
+
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: InertiaAppOptionsForCSR<SharedProps>,
+): InertiaAppResponse
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: InertiaAppOptionsForSSR<SharedProps>,
+): InertiaAppResponse
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
+  page,
   resolve,
   setup,
   progress = {},
-  page,
-}: CreateInertiaAppProps): InertiaAppResponse {
+}: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<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<SharedProps> = 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(() => {}),
-  ])
+  ]).then(([initialComponent]) => {
+    const props = { initialPage, initialComponent, resolveComponent }
 
-  const props: InertiaAppProps = { initialPage, initialComponent, resolveComponent }
+    if (isServer) {
+      const ssrSetup = setup as (options: SetupOptions<null, SharedProps>) => SvelteRenderResult
 
-  const svelteApp = setup({
-    el,
-    App: App as unknown as AppComponent,
-    props,
+      return ssrSetup({
+        el: null,
+        App: App as AppComponent<SharedProps>,
+        props,
+      })
+    }
+
+    const csrSetup = setup as (options: SetupOptions<HTMLElement, SharedProps>) => void
+
+    return csrSetup({
+      el: el!,
+      App: App as AppComponent<SharedProps>,
+      props,
+    })
   })
 
-  if (isServer) {
-    const { html, head, css } = svelteApp as SvelteRenderResult
+  if (!isServer && progress) {
+    setupProgress(progress)
+  }
+
+  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>`,
       head: [head, css ? `<style data-vite-css>${css.code}</style>` : ''],
     }
   }
-
-  if (progress) {
-    setupProgress(progress)
-  }
 }
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index 6367e9c7e..3984b9ada 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -1,8 +1,7 @@
+import type { Page, PageProps } from '@inertiajs/core'
 import type { ComponentType } from 'svelte'
 import type { RenderFunction, RenderProps } from './components/Render.svelte'
 
-export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
-
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps
 
 export type LayoutType = LayoutResolver | ComponentType | ComponentType[]
@@ -11,3 +10,11 @@ export type ResolvedComponent = {
   default: ComponentType
   layout?: LayoutType
 }
+
+export type ComponentResolver = (name: string) => ResolvedComponent | Promise<ResolvedComponent>
+
+export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+  initialComponent: ResolvedComponent
+  initialPage: Page<SharedProps>
+  resolveComponent: ComponentResolver
+}
diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.ts
index eba526757..eeee5e9db 100644
--- a/packages/svelte/src/useForm.ts
+++ b/packages/svelte/src/useForm.ts
@@ -75,7 +75,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   let defaults = cloneDeep(data)
   let cancelToken: CancelToken | null = null
   let recentlySuccessfulTimeoutId: ReturnType<typeof setTimeout> | null = null
-  let transform = (data: TForm) => data as object
+  let transform: TransformCallback<TForm> = (data) => data
   // Track if defaults was called manually during onSuccess to avoid
   // overriding user's custom defaults with automatic behavior.
   let defaultsCalledInOnSuccess = false
diff --git a/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte b/packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte
index 9eb793715..3c43040ef 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 type="text" bind:value={$form.name} name="name" />
     </div>
     <div>
-      <label>Email:</label>
-      <input type="email" bind:value={$form.email} />
+      <label for="email">Email:</label>
+      <input type="email" bind:value={$form.email} name="email" />
     </div>
   </form>
 </div>
diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts
index c08483f43..5eed723bc 100755
--- a/packages/vue3/src/app.ts
+++ b/packages/vue3/src/app.ts
@@ -1,8 +1,10 @@
 import {
   createHeadManager,
+  HeadManager,
   HeadManagerOnUpdateCallback,
   HeadManagerTitleCallback,
   Page,
+  PageHandler,
   PageProps,
   router,
   SharedPageProps,
@@ -19,12 +21,21 @@ import {
   ref,
   shallowRef,
 } from 'vue'
+import { SetupProps } from './createInertiaApp'
 import remember from './remember'
-import { VuePageHandlerArgs } from './types'
 import useForm from './useForm'
 
-export interface InertiaAppProps {
-  initialPage: Page
+type LayoutFunction = (h: typeof import('vue').h, page: ReturnType<typeof h>) => ReturnType<typeof h>
+
+type ComponentWithLayout = DefineComponent & {
+  layout?: DefineComponent | DefineComponent[] | LayoutFunction
+  inheritAttrs?: boolean
+}
+
+type VuePageHandler = (options: { component: DefineComponent; page: Page; preserveState: boolean }) => Promise<void>
+
+export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+  initialPage: Page<SharedProps>
   initialComponent?: object
   resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
   titleCallback?: HeadManagerTitleCallback
@@ -33,13 +44,13 @@ export interface InertiaAppProps {
 
 export type InertiaApp = DefineComponent<InertiaAppProps>
 
-const component = ref(null)
-const page = ref<Page<any>>(null)
-const layout = shallowRef(null)
-const key = ref(null)
-let headManager = null
+const component = ref<ComponentWithLayout | null>(null)
+const page = ref<Page>()
+const layout = shallowRef<ComponentWithLayout | ComponentWithLayout[] | null>(null)
+const key = ref<number | undefined>(undefined)
+let headManager: HeadManager
 
-const App: InertiaApp = defineComponent({
+const App = defineComponent({
   name: 'Inertia',
   props: {
     initialPage: {
@@ -57,7 +68,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,23 +76,23 @@ const App: InertiaApp = defineComponent({
       default: () => () => {},
     },
   },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
+  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }: SetupProps) {
     component.value = initialComponent ? markRaw(initialComponent) : null
     page.value = initialPage
-    key.value = null
+    key.value = undefined
 
     const isServer = typeof window === 'undefined'
-    headManager = createHeadManager(isServer, titleCallback, onHeadUpdate)
+    headManager = createHeadManager(isServer, titleCallback || ((title) => title), onHeadUpdate || (() => {}))
 
     if (!isServer) {
       router.init({
         initialPage,
         resolveComponent,
-        swapComponent: async (args: VuePageHandlerArgs) => {
-          component.value = markRaw(args.component)
-          page.value = args.page
-          key.value = args.preserveState ? key.value : Date.now()
-        },
+        swapComponent: (async (options: Parameters<VuePageHandler>[0]) => {
+          component.value = markRaw(options.component)
+          page.value = options.page
+          key.value = options.preserveState ? key.value : Date.now()
+        }) as PageHandler,
       })
 
       router.on('navigate', () => headManager.forceUpdate())
@@ -92,7 +103,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,
         })
 
@@ -103,23 +114,24 @@ const App: InertiaApp = defineComponent({
 
         if (component.value.layout) {
           if (typeof component.value.layout === 'function') {
-            return component.value.layout(h, child)
+            const layoutFunc = component.value.layout as LayoutFunction
+            return layoutFunc(h, child)
           }
 
-          return (Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout])
-            .concat(child)
-            .reverse()
-            .reduce((child, layout) => {
-              layout.inheritAttrs = !!layout.inheritAttrs
-              return h(layout, { ...page.value.props }, () => child)
-            })
+          const layouts = Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout]
+
+          return layouts.reverse().reduce((children, layout) => {
+            layout.inheritAttrs = !!layout.inheritAttrs
+            return h(layout, { ...page.value!.props }, () => children)
+          }, child)
         }
 
         return child
       }
     }
   },
-})
+}) as InertiaApp
+
 export default App
 
 export const plugin: Plugin = {
diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts
index cac03d660..163e8300d 100644
--- a/packages/vue3/src/createInertiaApp.ts
+++ b/packages/vue3/src/createInertiaApp.ts
@@ -1,25 +1,56 @@
-import { HeadManagerTitleCallback, Page, router, setupProgress } from '@inertiajs/core'
+import {
+  CreateInertiaAppOptions,
+  HeadManagerOnUpdateCallback,
+  HeadManagerTitleCallback,
+  InertiaAppResponse,
+  Page,
+  PageProps,
+  router,
+  setupProgress,
+} from '@inertiajs/core'
 import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
-interface CreateInertiaAppProps {
-  id?: string
+type VuePageResolver = (name: string) => DefineComponent | Promise<DefineComponent>
+
+export type SetupProps<SharedProps extends PageProps = PageProps> = {
+  initialPage: Page<SharedProps>
+  initialComponent: DefineComponent
+  resolveComponent: VuePageResolver
+  titleCallback?: HeadManagerTitleCallback
+  onHeadUpdate?: HeadManagerOnUpdateCallback
+}
+
+type SetupOptions<ElementType, SharedProps extends PageProps> = {
+  el: ElementType
+  App: InertiaApp
+  props: InertiaAppProps<SharedProps>
+  plugin: Plugin
+}
+
+type CreateInertiaAppOptionsForCSR<SharedProps extends PageProps = PageProps> = CreateInertiaAppOptions & {
+  resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
+  setup: (options: { el: HTMLElement; App: InertiaApp; props: InertiaAppProps<SharedProps>; plugin: Plugin }) => void
+  title?: HeadManagerTitleCallback
+  page?: Page<SharedProps>
+  render?: (app: VueApp) => Promise<string>
+}
+
+type CreateInertiaAppOptionsForSSR<SharedProps extends PageProps = PageProps> = CreateInertiaAppOptions & {
   resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
-  setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
+  setup: (options: { el: null; App: InertiaApp; props: InertiaAppProps<SharedProps>; plugin: Plugin }) => VueApp
   title?: HeadManagerTitleCallback
-  progress?:
-    | false
-    | {
-        delay?: number
-        color?: string
-        includeCSS?: boolean
-        showSpinner?: boolean
-      }
-  page?: Page
+  page?: Page<SharedProps>
   render?: (app: VueApp) => Promise<string>
 }
 
-export default async function createInertiaApp({
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: CreateInertiaAppOptionsForCSR<SharedProps>,
+): InertiaAppResponse
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
+  options: CreateInertiaAppOptionsForSSR<SharedProps>,
+): InertiaAppResponse
+export default async function createInertiaApp<SharedProps extends PageProps = PageProps>({
   id = 'app',
   resolve,
   setup,
@@ -27,28 +58,47 @@ export default async function createInertiaApp({
   progress = {},
   page,
   render,
-}: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
+}: CreateInertiaAppOptionsForCSR<SharedProps> | CreateInertiaAppOptionsForSSR<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 ?? '{}') as Page<SharedProps>)
+
+  const resolveComponent = (name: string) =>
+    Promise.resolve(resolve(name)).then((module) => {
+      const typedModule = module as DefineComponent | { default: DefineComponent }
+      return 'default' in typedModule ? typedModule.default : typedModule
+    })
 
-  let head = []
+  let head: string[] = []
 
   const vueApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),
   ]).then(([initialComponent]) => {
-    return setup({
-      el,
+    const props: SetupProps<SharedProps> = {
+      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!,
       App,
-      props: {
-        initialPage,
-        initialComponent,
-        resolveComponent,
-        titleCallback: title,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
-      },
+      props,
       plugin,
     })
   })
@@ -57,7 +107,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/head.ts b/packages/vue3/src/head.ts
index 11bda879d..4570a7796 100644
--- a/packages/vue3/src/head.ts
+++ b/packages/vue3/src/head.ts
@@ -1,5 +1,5 @@
 import { escape } from 'lodash-es'
-import { defineComponent, DefineComponent } from 'vue'
+import { defineComponent, DefineComponent, VNode } from 'vue'
 
 export type InertiaHead = DefineComponent<{
   title?: string
@@ -21,8 +21,9 @@ const Head: InertiaHead = defineComponent({
     this.provider.disconnect()
   },
   methods: {
-    isUnaryTag(node) {
+    isUnaryTag(node: VNode): boolean {
       return (
+        typeof node.type === 'string' &&
         [
           'area',
           'base',
@@ -42,11 +43,12 @@ const Head: InertiaHead = defineComponent({
         ].indexOf(node.type) > -1
       )
     },
-    renderTagStart(node) {
+    renderTagStart(node: VNode): string {
       node.props = node.props || {}
       node.props.inertia = node.props['head-key'] !== undefined ? node.props['head-key'] : ''
       const attrs = Object.keys(node.props).reduce((carry, name) => {
-        const value = String(node.props[name])
+        const value = String(node.props![name])
+
         if (['key', 'head-key'].includes(name)) {
           return carry
         } else if (value === '') {
@@ -55,52 +57,65 @@ const Head: InertiaHead = defineComponent({
           return carry + ` ${name}="${escape(value)}"`
         }
       }, '')
-      return `<${node.type}${attrs}>`
+      return `<${String(node.type)}${attrs}>`
     },
-    renderTagChildren(node) {
-      return typeof node.children === 'string'
-        ? node.children
-        : node.children.reduce((html, child) => html + this.renderTag(child), '')
+    renderTagChildren(node: VNode): string {
+      const { children } = node
+
+      if (typeof children === 'string') {
+        return children
+      }
+
+      if (Array.isArray(children)) {
+        return children.reduce((html: string, child) => html + this.renderTag(child as VNode), '')
+      }
+
+      return ''
     },
-    isFunctionNode(node) {
+    isFunctionNode(node: VNode): node is VNode & { type: () => VNode } {
       return typeof node.type === 'function'
     },
-    isComponentNode(node) {
+    isComponentNode(node: VNode): boolean {
       return typeof node.type === 'object'
     },
-    isCommentNode(node) {
+    isCommentNode(node: VNode): boolean {
       return /(comment|cmt)/i.test(node.type.toString())
     },
-    isFragmentNode(node) {
+    isFragmentNode(node: VNode): boolean {
       return /(fragment|fgt|symbol\(\))/i.test(node.type.toString())
     },
-    isTextNode(node) {
+    isTextNode(node: VNode): boolean {
       return /(text|txt)/i.test(node.type.toString())
     },
-    renderTag(node) {
+    renderTag(node: VNode): string {
       if (this.isTextNode(node)) {
-        return node.children
+        return node.children as string
       } else if (this.isFragmentNode(node)) {
         return ''
       } else if (this.isCommentNode(node)) {
         return ''
       }
+
       let html = this.renderTagStart(node)
+
       if (node.children) {
         html += this.renderTagChildren(node)
       }
+
       if (!this.isUnaryTag(node)) {
-        html += `</${node.type}>`
+        html += `</${String(node.type)}>`
       }
+
       return html
     },
-    addTitleElement(elements) {
-      if (this.title && !elements.find((tag) => tag.startsWith('<title'))) {
+    addTitleElement(elements: string[]): string[] {
+      if (this.title && !elements.find((tag: string) => tag.startsWith('<title'))) {
         elements.push(`<title inertia>${this.title}</title>`)
       }
+
       return elements
     },
-    renderNodes(nodes) {
+    renderNodes(nodes: VNode[]): string[] {
       return this.addTitleElement(
         nodes
           .flatMap((node) => this.resolveNode(node))
@@ -108,7 +123,7 @@ const Head: InertiaHead = defineComponent({
           .filter((node) => node),
       )
     },
-    resolveNode(node) {
+    resolveNode(node: VNode): VNode | VNode[] {
       if (this.isFunctionNode(node)) {
         return this.resolveNode(node.type())
       } else if (this.isComponentNode(node)) {
@@ -117,7 +132,7 @@ const Head: InertiaHead = defineComponent({
       } else if (this.isTextNode(node) && node.children) {
         return node
       } else if (this.isFragmentNode(node) && node.children) {
-        return node.children.flatMap((child) => this.resolveNode(child))
+        return (node.children as VNode[]).flatMap((child) => this.resolveNode(child))
       } else if (this.isCommentNode(node)) {
         return []
       } else {
diff --git a/packages/vue3/src/link.ts b/packages/vue3/src/link.ts
index dfb09bb95..85e5d9523 100755
--- a/packages/vue3/src/link.ts
+++ b/packages/vue3/src/link.ts
@@ -32,7 +32,7 @@ const Link: InertiaLink = defineComponent({
       default: 'a',
     },
     data: {
-      type: Object,
+      type: Object as PropType<InertiaLinkProps['data']>,
       default: () => ({}),
     },
     href: {
diff --git a/packages/vue3/src/remember.ts b/packages/vue3/src/remember.ts
index 897b8ba6a..49d4d549d 100755
--- a/packages/vue3/src/remember.ts
+++ b/packages/vue3/src/remember.ts
@@ -2,6 +2,12 @@ import { router } from '@inertiajs/core'
 import { cloneDeep } from 'lodash-es'
 import { ComponentOptions } from 'vue'
 
+type RememberedData = Record<string, any>
+type RememberConfig = {
+  data: string[]
+  key?: string | (() => string)
+}
+
 const remember: ComponentOptions = {
   created() {
     if (!this.$options.remember) {
@@ -20,18 +26,17 @@ const remember: ComponentOptions = {
       this.$options.remember = { data: [this.$options.remember.data] }
     }
 
-    const rememberKey =
-      this.$options.remember.key instanceof Function
-        ? this.$options.remember.key.call(this)
-        : this.$options.remember.key
+    const rememberConfig = this.$options.remember as RememberConfig
+
+    const rememberKey = rememberConfig.key instanceof Function ? rememberConfig.key.call(this) : rememberConfig.key
 
-    const restored = router.restore(rememberKey)
+    const restored = router.restore(rememberKey) as RememberedData | undefined
 
-    const rememberable = this.$options.remember.data.filter((key) => {
+    const rememberable = rememberConfig.data.filter((key: string) => {
       return !(this[key] !== null && typeof this[key] === 'object' && this[key].__rememberable === false)
     })
 
-    const hasCallbacks = (key) => {
+    const hasCallbacks = (key: string): boolean => {
       return (
         this[key] !== null &&
         typeof this[key] === 'object' &&
@@ -40,7 +45,7 @@ const remember: ComponentOptions = {
       )
     }
 
-    rememberable.forEach((key) => {
+    rememberable.forEach((key: string) => {
       if (this[key] !== undefined && restored !== undefined && restored[key] !== undefined) {
         hasCallbacks(key) ? this[key].__restore(restored[key]) : (this[key] = restored[key])
       }
@@ -50,7 +55,7 @@ const remember: ComponentOptions = {
         () => {
           router.remember(
             rememberable.reduce(
-              (data, key) => ({
+              (data: RememberedData, key: string) => ({
                 ...data,
                 [key]: cloneDeep(hasCallbacks(key) ? this[key].__remember() : this[key]),
               }),
diff --git a/packages/vue3/src/types.ts b/packages/vue3/src/types.ts
index 2295b1e83..6e2217b60 100644
--- a/packages/vue3/src/types.ts
+++ b/packages/vue3/src/types.ts
@@ -1,9 +1,9 @@
 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>
+  component: DefineComponent
 }
 
 declare module '@inertiajs/core' {
diff --git a/packages/vue3/src/useRemember.ts b/packages/vue3/src/useRemember.ts
index 93b3848cb..a8f21d3c3 100644
--- a/packages/vue3/src/useRemember.ts
+++ b/packages/vue3/src/useRemember.ts
@@ -13,12 +13,12 @@ export default function useRemember<T extends object>(
   const restored = router.restore(key)
   const type = isReactive(data) ? reactive : ref
   const hasCallbacks = typeof data.__remember === 'function' && typeof data.__restore === 'function'
-  const remembered = type(restored === undefined ? data : hasCallbacks ? data.__restore(restored) : restored)
+  const remembered = type(restored === undefined ? data : hasCallbacks ? data.__restore!(restored) : restored)
 
   watch(
     remembered,
     (newValue) => {
-      router.remember(cloneDeep(hasCallbacks ? data.__remember() : newValue), key)
+      router.remember(cloneDeep(hasCallbacks ? data.__remember!() : newValue), key)
     },
     { immediate: true, deep: true },
   )
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
   }
 }