fix: improve types and use relative imports for composables (#532)

src/runtime/asyncData.ts

@@ -1,20 +1,20 @@
 import { onBeforeMount, onServerPrefetch, onUnmounted, ref, getCurrentInstance, watch } from 'vue'
 import type { Ref, WatchSource } from 'vue'
-import { NuxtApp, useNuxtApp } from '#app'
+import { NuxtAppCompat, useNuxtApp } from './app'
 
 export type _Transform<Input = any, Output = any> = (input: Input) => Output
 
 export type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? Pick<T, K[number]> : T
 export type KeysOf<T> = Array<keyof T extends string ? keyof T : string>
 export type KeyOfRes<Transform extends _Transform> = KeysOf<ReturnType<Transform>>
 
-type MultiWatchSources = (WatchSource<unknown> | object)[];
+type MultiWatchSources = (WatchSource<unknown> | object)[]
 
 export interface AsyncDataOptions<
   DataT,
   Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>,
   PickKeys extends KeyOfRes<_Transform> = KeyOfRes<Transform>
-  > {
+> {
   server?: boolean
   lazy?: boolean
   default?: () => DataT
@@ -46,7 +46,7 @@ export function useAsyncData<
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   key: string,
-  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  handler: (ctx?: NuxtAppCompat) => Promise<DataT>,
   options: AsyncDataOptions<DataT, Transform, PickKeys> = {}
 ): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE> {
   // Validate arguments
@@ -178,7 +178,7 @@ export function useLazyAsyncData<
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   key: string,
-  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  handler: (ctx?: NuxtAppCompat) => Promise<DataT>,
   options: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'> = {}
 ): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE> {
   return useAsyncData(key, handler, { ...options, lazy: true })

src/runtime/cookie.ts

@@ -3,14 +3,14 @@ import { parse, serialize, CookieParseOptions, CookieSerializeOptions } from 'co
 import { appendHeader } from 'h3'
 import type { CompatibilityEvent } from 'h3'
 import destr from 'destr'
+import { useNuxtApp } from './app'
 import { useRequestEvent } from './ssr'
-import { useNuxtApp } from '#app'
 
 type _CookieOptions = Omit<CookieSerializeOptions & CookieParseOptions, 'decode' | 'encode'>
 
-export interface CookieOptions<T=any> extends _CookieOptions {
+export interface CookieOptions<T = any> extends _CookieOptions {
   decode?(value: string): T
-  encode?(value: T): string;
+  encode?(value: T): string
   default?: () => T
 }
 
@@ -22,7 +22,7 @@ const CookieDefaults: CookieOptions<any> = {
   encode: val => encodeURIComponent(typeof val === 'string' ? val : JSON.stringify(val))
 }
 
-export function useCookie <T=string> (name: string, _opts?: CookieOptions<T>): CookieRef<T> {
+export function useCookie<T = string> (name: string, _opts?: CookieOptions<T>): CookieRef<T> {
   const opts = { ...CookieDefaults, ..._opts }
   const cookies = readRawCookies(opts)
 

src/runtime/head/composables.ts

@@ -2,7 +2,7 @@ import { isFunction } from '@vue/shared'
 import { computed } from 'vue'
 import type { ComputedGetter } from '@vue/reactivity'
 import type { MetaObject } from '@nuxt/schema'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '../app'
 
 /**
  * You can pass in a meta object, which has keys corresponding to meta tags:

src/runtime/head/vueuse-head.plugin.ts

@@ -1,8 +1,8 @@
 import { createHead, renderHeadToString } from '@vueuse/head'
 import { computed, ref, watchEffect, onBeforeUnmount, getCurrentInstance, ComputedGetter } from 'vue'
 import { defu } from 'defu'
-import type { MetaObject } from '..'
-import { defineNuxtPlugin } from '#app'
+import type { MetaObject } from '@nuxt/schema'
+import { defineNuxtPlugin } from '../app'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const head = createHead()
@@ -25,7 +25,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     const headObj = computed(() => {
       const overrides: MetaObject = { meta: [] }
-      if (titleTemplate.value && 'title' in meta.value) {
+      if (titleTemplate.value && meta.value.title) {
         overrides.title = typeof titleTemplate.value === 'function' ? titleTemplate.value(meta.value.title) : titleTemplate.value.replace(/%s/g, meta.value.title)
       }
       if (meta.value.charset) {
@@ -48,12 +48,12 @@ export default defineNuxtPlugin((nuxtApp) => {
     if (!vm) { return }
 
     onBeforeUnmount(() => {
-      head.removeHeadObjs(headObj)
+      head.removeHeadObjs(headObj as any)
       head.updateDOM()
     })
   }
 
-  if (process.server) {
+  if (process.server && nuxtApp.ssrContext) {
     nuxtApp.ssrContext.renderMeta = () => renderHeadToString(head)
   }
 })

src/runtime/ssr.ts

@@ -1,17 +1,16 @@
 /* eslint-disable no-redeclare */
 import type { CompatibilityEvent } from 'h3'
-import { useNuxtApp } from '#app'
-import { NuxtApp } from '#app/nuxt'
+import { NuxtAppCompat, useNuxtApp } from './app'
 
-export function useRequestHeaders<K extends string = string> (include: K[]): Record<K, string>;
-export function useRequestHeaders (): Readonly<Record<string, string>>;
+export function useRequestHeaders<K extends string = string> (include: K[]): Record<K, string>
+export function useRequestHeaders (): Readonly<Record<string, string>>
 export function useRequestHeaders (include?) {
   if (process.client) { return {} }
   const headers: Record<string, string> = useNuxtApp().ssrContext?.event.req.headers ?? {}
   if (!include) { return headers }
   return Object.fromEntries(include.filter(key => headers[key]).map(key => [key, headers[key]]))
 }
 
-export function useRequestEvent (nuxtApp: NuxtApp = useNuxtApp()): CompatibilityEvent {
+export function useRequestEvent (nuxtApp: NuxtAppCompat = useNuxtApp()): CompatibilityEvent {
   return nuxtApp.ssrContext?.event as CompatibilityEvent
 }