From b04e212ebc9f57bfc609b02e798215704020fa36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Tue, 2 Feb 2021 17:42:48 +0100 Subject: [PATCH 1/3] chore: router improvements (#139) --- packages/nuxt3/src/app/pages/404.vue | 6 ++++++ packages/nuxt3/src/app/plugins/router/index.ts | 5 ----- packages/nuxt3/src/builder/app.ts | 12 +++++++++++- packages/nuxt3/src/config/options.ts | 2 +- 4 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 packages/nuxt3/src/app/pages/404.vue diff --git a/packages/nuxt3/src/app/pages/404.vue b/packages/nuxt3/src/app/pages/404.vue new file mode 100644 index 0000000000..da12ddee66 --- /dev/null +++ b/packages/nuxt3/src/app/pages/404.vue @@ -0,0 +1,6 @@ + diff --git a/packages/nuxt3/src/app/plugins/router/index.ts b/packages/nuxt3/src/app/plugins/router/index.ts index 0815b3c2ca..81809a660f 100644 --- a/packages/nuxt3/src/app/plugins/router/index.ts +++ b/packages/nuxt3/src/app/plugins/router/index.ts @@ -13,11 +13,6 @@ import routes from '~build/routes' export default function router (nuxt) { const { app } = nuxt - // TODO: move this outside this plugin - if (!routes.length) { - return - } - app.component('NuxtPage', NuxtPage) app.component('NuxtLink', RouterLink) diff --git a/packages/nuxt3/src/builder/app.ts b/packages/nuxt3/src/builder/app.ts index 3ffd7b3981..91e2612d9a 100644 --- a/packages/nuxt3/src/builder/app.ts +++ b/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}' */)}` } diff --git a/packages/nuxt3/src/config/options.ts b/packages/nuxt3/src/config/options.ts index 76906dfc89..f83586d6e7 100644 --- a/packages/nuxt3/src/config/options.ts +++ b/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 From a8707469f875f9426ef41d8162e6b5acda7a3fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Wed, 3 Feb 2021 19:14:30 +0100 Subject: [PATCH 2/3] feat: useAsyncData (#142) * feat: useAsyncData Resolves #141 * chore: improvements * chore: fix lint --- .../composables/{fetch.ts => asyncData.ts} | 52 +++++++++---------- packages/nuxt3/src/app/composables/index.ts | 2 +- packages/nuxt3/src/app/nuxt/index.ts | 6 ++- 3 files changed, 31 insertions(+), 29 deletions(-) rename packages/nuxt3/src/app/composables/{fetch.ts => asyncData.ts} (58%) diff --git a/packages/nuxt3/src/app/composables/fetch.ts b/packages/nuxt3/src/app/composables/asyncData.ts similarity index 58% rename from packages/nuxt3/src/app/composables/fetch.ts rename to packages/nuxt3/src/app/composables/asyncData.ts index e537763f52..7bcb2ac61f 100644 --- a/packages/nuxt3/src/app/composables/fetch.ts +++ b/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 FetchRequest = HTTPRequest | ((ctx: Nuxt) => HTTPRequest | Promise) +export type AsyncDataFn = (ctx?: Nuxt) => Promise -export interface FetchOptions { +export interface AsyncDataOptions { server?: boolean defer?: boolean - fetcher?: Function - key?: string } -export interface FetchObj { +export interface AsyncDataObj { data: Ref - fetch: Function + pending: Ref + 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 (request: FetchRequest, options?: FetchOptions): Promise> { + return async function asyncData (handler: AsyncDataFn, options?: AsyncDataOptions): Promise> { + 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' - ? request(nuxt) - : request + pending.value = true + const _handler = handler(nuxt) - if (_request instanceof Promise) { + if (_handler instanceof Promise) { // Let user resolve if request is promise - data[key] = await _request - } else if (_request && (typeof _request === 'string' || _request.url)) { - // Make HTTP request when request is string (url) or { url, ...opts } - data[key] = await options.fetcher(_request) + // TODO: handle error + data[key] = await _handler + pending.value = false } 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 - if (typeof request === 'function') { - watch(request, fetch) - } + // Watch handler + watch(handler.bind(null, nuxt), fetch) } // Server side @@ -99,7 +98,8 @@ export function useFetch (defaults?: FetchOptions) { return { data: toRef(data, key), - fetch + pending, + refresh: fetch } } } diff --git a/packages/nuxt3/src/app/composables/index.ts b/packages/nuxt3/src/app/composables/index.ts index dcb7ab89f3..3e5bf34e6c 100644 --- a/packages/nuxt3/src/app/composables/index.ts +++ b/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' diff --git a/packages/nuxt3/src/app/nuxt/index.ts b/packages/nuxt3/src/app/nuxt/index.ts index 7a36f3ab46..c83440dca3 100644 --- a/packages/nuxt3/src/app/nuxt/index.ts +++ b/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) { From abb21f30cacb232f717c9cd20e6c2aac295cf5a2 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Fri, 5 Feb 2021 22:09:16 +0000 Subject: [PATCH 3/3] fix: allow resolving relative `package.json` in vite mode closes #146 --- packages/nuxt3/src/builder/vite/vite.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuxt3/src/builder/vite/vite.ts b/packages/nuxt3/src/builder/vite/vite.ts index 5df495c0f8..9fd8c1ab4c 100644 --- a/packages/nuxt3/src/builder/vite/vite.ts +++ b/packages/nuxt3/src/builder/vite/vite.ts @@ -34,7 +34,7 @@ export async function bundle (nuxt: Nuxt) { } await mkdirp(nuxt.options.buildDir) - const { dependencies = {}, devDependencies = {} } = createRequire(nuxt.options.rootDir)('package.json') + const { dependencies = {}, devDependencies = {} } = createRequire(nuxt.options.rootDir)('./package.json') await writeFile(resolve(nuxt.options.buildDir, 'package.json'), JSON.stringify({ private: true, description: 'auto generated',