Merge branch 'main' of github.com:nuxt/nuxt3 into main

packages/nuxt3/src/app/composables/asyncData.ts

@@ -1,25 +1,22 @@
-import { Ref, toRef, onMounted, watch, getCurrentInstance, onUnmounted } from 'vue'
+import { Ref, ref, toRef, onMounted, watch, getCurrentInstance, onUnmounted } from 'vue'
 import { Nuxt, useNuxt } from 'nuxt/app'
-import { $fetch } from 'ohmyfetch'
 import { useData } from './data'
 
-export type HTTPRequest = string | { method: string, url: string }
+export type AsyncDataFn<T> = (ctx?: Nuxt) => Promise<T>
-export type FetchRequest<T> = HTTPRequest | ((ctx: Nuxt) => HTTPRequest | Promise<T>)
 
-export interface FetchOptions {
+export interface AsyncDataOptions {
   server?: boolean
   defer?: boolean
-  fetcher?: Function
-  key?: string
 }
 
-export interface FetchObj<T> {
+export interface AsyncDataObj<T> {
   data: Ref<T>
-  fetch: Function
+  pending: Ref<boolean>
+  refresh: Function
   error?: any
 }
 
-export function useFetch (defaults?: FetchOptions) {
+export function useAsyncData (defaults?: AsyncDataOptions) {
   const nuxt = useNuxt()
   const vm = getCurrentInstance()
 
@@ -40,31 +37,32 @@ export function useFetch (defaults?: FetchOptions) {
     })
   }
 
-  return async function fetch<T = any> (request: FetchRequest<T>, options?: FetchOptions): Promise<FetchObj<T>> {
+  return async function asyncData<T = any> (handler: AsyncDataFn<T>, options?: AsyncDataOptions): Promise<AsyncDataObj<T>> {
+    if (typeof handler !== 'function') {
+      throw new TypeError('asyncData handler must be a function')
+    }
     options = {
       server: true,
       defer: false,
-      fetcher: globalThis.$fetch || $fetch,
       ...defaults,
       ...options
     }
 
     const key = String(dataRef++)
+    const pending = ref(true)
 
     const fetch = async () => {
-      const _request = typeof request === 'function'
+      pending.value = true
-        ? request(nuxt)
+      const _handler = handler(nuxt)
-        : request
 
-      if (_request instanceof Promise) {
+      if (_handler instanceof Promise) {
         // Let user resolve if request is promise
-        data[key] = await _request
+        // TODO: handle error
-      } else if (_request && (typeof _request === 'string' || _request.url)) {
+        data[key] = await _handler
-        // Make HTTP request when request is string (url) or { url, ...opts }
+        pending.value = false
-        data[key] = await options.fetcher(_request)
       } else {
         // Invalid request
-        throw new Error('Invalid fetch request: ' + _request)
+        throw new TypeError('Invalid asyncData handler: ' + _handler)
       }
     }
 
@@ -73,6 +71,9 @@ export function useFetch (defaults?: FetchOptions) {
     // Client side
     if (process.client) {
       // 1. Hydration (server: true): no fetch
+      if (nuxt.isHydrating && options.server) {
+        pending.value = false
+      }
       // 2. Initial load (server: false): fetch on mounted
       if (nuxt.isHydrating && !options.server) {
         // Fetch on mounted (initial load or deferred fetch)
@@ -86,10 +87,8 @@ export function useFetch (defaults?: FetchOptions) {
           await fetch()
         }
       }
-      // Watch request
+      // Watch handler
-      if (typeof request === 'function') {
+      watch(handler.bind(null, nuxt), fetch)
-        watch(request, fetch)
-      }
     }
 
     // Server side
@@ -99,7 +98,8 @@ export function useFetch (defaults?: FetchOptions) {
 
     return {
       data: toRef<any, string>(data, key),
-      fetch
+      pending,
+      refresh: fetch
     }
   }
 }

packages/nuxt3/src/app/composables/index.ts

@@ -1,3 +1,3 @@
-export { useFetch } from './fetch'
+export { useAsyncData } from './asyncData'
 export { useData } from './data'
 export { useHydration } from './hydrate'

packages/nuxt3/src/app/nuxt/index.ts

@@ -51,11 +51,13 @@ export function createNuxt (options: CreateOptions) {
 
   nuxt.provide = (name: string, value: any) => {
     const $name = '$' + name
-    defineGetter(nuxt.app, $name, value)
+    defineGetter(nuxt, $name, value)
     defineGetter(nuxt.app.config.globalProperties, $name, value)
   }
 
-  nuxt.provide('nuxt', nuxt)
+  // Inject $nuxt
+  defineGetter(nuxt.app, '$nuxt', nuxt)
+  defineGetter(nuxt.app.config.globalProperties, '$nuxt', nuxt)
 
   // Expose nuxt to the renderContext
   if (nuxt.ssrContext) {

packages/nuxt3/src/app/pages/404.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <!-- TODO: Move this page to @nuxt/nice -->
+    404 | Page Not Found
+  </div>
+</template>

packages/nuxt3/src/app/plugins/router/index.ts

@@ -13,11 +13,6 @@ import routes from '~build/routes'
 export default <Plugin> function router (nuxt) {
   const { app } = nuxt
 
-  // TODO: move this outside this plugin
-  if (!routes.length) {
-    return
-  }
-
   app.component('NuxtPage', NuxtPage)
   app.component('NuxtLink', RouterLink)
 

packages/nuxt3/src/builder/app.ts

@@ -43,6 +43,16 @@ export async function createApp (
   if (app.pages) {
     app.routes.push(...(await resolvePagesRoutes(builder, app)))
   }
+  // Add 404 page is not added
+  const page404 = app.routes.find(route => route.name === '404')
+  if (!page404) {
+    app.routes.push({
+      name: '404',
+      path: '/:catchAll(.*)*',
+      file: resolve(nuxt.options.appDir, 'pages/404.vue'),
+      children: []
+    })
+  }
   // TODO: Hook to extend routes
   app.templates.routes = serializeRoutes(app.routes)
 
@@ -69,7 +79,7 @@ function formatRoute (route: NuxtRoute) {
     name: route.name,
     path: route.path,
     children: route.children.map(formatRoute),
-    // TODO: avoid exposing to prod
+    // TODO: avoid exposing to prod, using process.env.NODE_ENV ?
     __file: route.file,
     component: `{() => import('${route.file}' /* webpackChunkName: '${route.name}' */)}`
   }

packages/nuxt3/src/config/options.ts

@@ -299,7 +299,7 @@ function normalizeConfig (_options: CliConfiguration) {
 
   // Append ignorePrefix glob to ignore
   if (typeof options.ignorePrefix === 'string') {
-    options.ignore.push(`**/${options.ignorePrefix}*.*`)
+    options.ignore.push(`${options.ignorePrefix}*`)
   }
 
   // Compression middleware legacy