diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md index e9babdb2e83..c997658c299 100644 --- a/docs/content/1.getting-started/5.seo-meta.md +++ b/docs/content/1.getting-started/5.seo-meta.md @@ -31,7 +31,7 @@ export default defineNuxtConfig({ app: { head: { charset: 'utf-16', - viewport: 'width=500, initial-scale=1', + viewport: 'width=500, initial-scale=1', title: 'My App', meta: [ // @@ -72,7 +72,7 @@ useHead({ ## Components -Nuxt provides ``, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template. +Nuxt provides `<Title>`, `<Base>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template. Because these component names match native HTML elements, it is very important that they are capitalized in the template. @@ -134,7 +134,7 @@ It's recommended to use computed getters (`() => {}`) over computed (`computed(( ```vue [useHead] <script setup lang="ts"> const desc = ref('My amazing site.') - + useHead({ meta: [ { name: 'description', content: desc } @@ -186,30 +186,18 @@ You can use the `body: true` option on the `link` and `script` meta tags to appe For example: -::code-group - - ```vue [useHead] - <script setup lang="ts"> - useHead({ - script: [ - { - src: 'https://third-party-script.com', - body: true - } - ] - }) - </script> - ``` - - ```vue [Components] - <template> - <div> - <Script src="https://third-party-script.com" body="true" /> - </div> - </template> - ``` - -:: +```vue +<script setup lang="ts"> +useHead({ + script: [ + { + src: 'https://third-party-script.com', + body: true + } + ] +}) +</script> +``` ## Examples @@ -254,7 +242,7 @@ In the example below, `titleTemplate` is set either as a string with the `%s` pl // as a string, // where `%s` is replaced with the title titleTemplate: '%s - Site Title', - // ... or as a function + // ... or as a function titleTemplate: (productCategory) => { return productCategory ? `${productCategory} - Site Title` @@ -273,17 +261,17 @@ The example below inserts Google Fonts using the `link` property of the `useHead ::code-group ```vue [useHead] - <script setup lang="ts"> + <script setup lang="ts"> useHead({ link: [ - { - rel: 'preconnect', + { + rel: 'preconnect', href: 'https://fonts.googleapis.com' }, - { - rel: 'stylesheet', - href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', - crossorigin: '' + { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', + crossorigin: '' } ] }) diff --git a/docs/content/3.api/4.advanced/2.kit.md b/docs/content/3.api/4.advanced/2.kit.md index 66fbcdeea7b..5e4d79d473b 100644 --- a/docs/content/3.api/4.advanced/2.kit.md +++ b/docs/content/3.api/4.advanced/2.kit.md @@ -40,8 +40,8 @@ description: Nuxt Kit provides composable utilities to help interacting with Nux [source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/imports.ts) - `addImports(imports)` -- `addImportsDir(autoImportDirs)` -- `addImportsSources(autoImportSources)` +- `addImportsDir(importDirs)` +- `addImportsSources(importSources)` ### Components diff --git a/examples/composables/use-head/app.vue b/examples/composables/use-head/app.vue index 3c19f0731ac..335ffbd8f90 100644 --- a/examples/composables/use-head/app.vue +++ b/examples/composables/use-head/app.vue @@ -12,7 +12,6 @@ <Title>Luck number: {{ dynamic }} - diff --git a/packages/kit/src/build.ts b/packages/kit/src/build.ts index b602b8a45d8..aefc7e629a0 100644 --- a/packages/kit/src/build.ts +++ b/packages/kit/src/build.ts @@ -30,13 +30,6 @@ export interface ExtendConfigOptions { } export interface ExtendWebpackConfigOptions extends ExtendConfigOptions { - /** - * Install plugin on modern build - * - * @default true - * @deprecated Nuxt 2 only - */ - modern?: boolean } export interface ExtendViteConfigOptions extends ExtendConfigOptions {} @@ -73,13 +66,6 @@ export function extendWebpackConfig ( fn(config) } } - // Nuxt 2 backwards compatibility - if (options.modern !== false) { - const config = configs.find(i => i.name === 'modern') - if (config) { - fn(config) - } - } }) } diff --git a/packages/kit/src/components.ts b/packages/kit/src/components.ts index 81181fda4ed..8bd96e41014 100644 --- a/packages/kit/src/components.ts +++ b/packages/kit/src/components.ts @@ -1,6 +1,5 @@ import { pascalCase, kebabCase } from 'scule' import type { ComponentsDir, Component } from '@nuxt/schema' -import { genDynamicImport } from 'knitwork' import { useNuxt } from './context' import { assertNuxtCompatibility } from './compatibility' @@ -40,14 +39,7 @@ export async function addComponent (opts: AddComponentOptions) { prefetch: false, preload: false, mode: 'all', - - // Nuxt 2 support shortPath: opts.filePath, - async: false, - level: 0, - asyncImport: `${genDynamicImport(opts.filePath)}.then(r => r['${opts.export || 'default'}'])`, - import: `require(${JSON.stringify(opts.filePath)})['${opts.export || 'default'}']`, - ...opts } diff --git a/packages/kit/src/imports.ts b/packages/kit/src/imports.ts index d8ce03ef87f..cd532351cfa 100644 --- a/packages/kit/src/imports.ts +++ b/packages/kit/src/imports.ts @@ -6,40 +6,26 @@ import { assertNuxtCompatibility } from './compatibility' export function addImports (imports: Import | Import[]) { assertNuxtCompatibility({ bridge: true }) - // TODO: Use imports:* when widely adopted - useNuxt().hook('autoImports:extend', (_imports) => { + useNuxt().hook('imports:extend', (_imports) => { _imports.push(...(Array.isArray(imports) ? imports : [imports])) - }, { allowDeprecated: true }) + }) } -/** - * @deprecated Please use `addImports` instead with nuxt>=3.0.0-rc.9 - */ -export const addAutoImport = addImports - export function addImportsDir (dirs: string | string[]) { assertNuxtCompatibility({ bridge: true }) - // TODO: Use imports:* when widely adopted - useNuxt().hook('autoImports:dirs', (_dirs: string[]) => { + useNuxt().hook('imports:dirs', (_dirs: string[]) => { for (const dir of (Array.isArray(dirs) ? dirs : [dirs])) { _dirs.push(dir) } - }, { allowDeprecated: true }) + }) } - -/** - * @deprecated Please use `addImportsDir` instead with nuxt>=3.0.0-rc.9 - */ -export const addAutoImportDir = addImportsDir - export function addImportsSources (presets: ImportPresetWithDeprecation | ImportPresetWithDeprecation[]) { assertNuxtCompatibility({ bridge: true }) - // TODO: Use imports:* when widely adopted - useNuxt().hook('autoImports:sources', (_presets: ImportPresetWithDeprecation[]) => { + useNuxt().hook('imports:sources', (_presets: ImportPresetWithDeprecation[]) => { for (const preset of (Array.isArray(presets) ? presets : [presets])) { _presets.push(preset) } - }, { allowDeprecated: true }) + }) } diff --git a/packages/kit/src/internal/cjs.ts b/packages/kit/src/internal/cjs.ts index 8103c5ea37b..fbc724959b8 100644 --- a/packages/kit/src/internal/cjs.ts +++ b/packages/kit/src/internal/cjs.ts @@ -6,10 +6,12 @@ import jiti from 'jiti' // TODO: use create-require for jest environment const _require = jiti(process.cwd(), { interopDefault: true, esmResolve: true }) +/** @deprecated Do not use CJS utils */ export interface ResolveModuleOptions { paths?: string | string[] } +/** @deprecated Do not use CJS utils */ export interface RequireModuleOptions extends ResolveModuleOptions { // TODO: use create-require for jest environment // native?: boolean @@ -20,11 +22,13 @@ export interface RequireModuleOptions extends ResolveModuleOptions { interopDefault?: boolean } +/** @deprecated Do not use CJS utils */ export function isNodeModules (id: string) { // TODO: Follow symlinks return /[/\\]node_modules[/\\]/.test(id) } +/** @deprecated Do not use CJS utils */ export function clearRequireCache (id: string) { if (isNodeModules(id)) { return @@ -48,6 +52,7 @@ export function clearRequireCache (id: string) { delete _require.cache[id] } +/** @deprecated Do not use CJS utils */ export function scanRequireTree (id: string, files = new Set()) { if (isNodeModules(id) || files.has(id)) { return files @@ -69,7 +74,7 @@ export function scanRequireTree (id: string, files = new Set()) { return files } -/** Access the require cache by module id. */ +/** @deprecated Do not use CJS utils */ export function getRequireCacheItem (id: string) { try { return _require.cache[id] @@ -82,7 +87,7 @@ export function requireModulePkg (id: string, opts: RequireModuleOptions = {}) { return requireModule(join(id, 'package.json'), opts) } -/** Resolve the path of a module. */ +/** @deprecated Do not use CJS utils */ export function resolveModule (id: string, opts: ResolveModuleOptions = {}) { return normalize(_require.resolve(id, { paths: ([] as string[]).concat( @@ -96,7 +101,7 @@ export function resolveModule (id: string, opts: ResolveModuleOptions = {}) { })) } -/** Try to resolve the path of a module, but don't emit an error if it can't be found. */ +/** @deprecated Do not use CJS utils */ export function tryResolveModule (path: string, opts: ResolveModuleOptions = {}): string | null { try { return resolveModule(path, opts) @@ -108,7 +113,7 @@ export function tryResolveModule (path: string, opts: ResolveModuleOptions = {}) return null } -/** Require a module and return it. */ +/** @deprecated Do not use CJS utils */ export function requireModule (id: string, opts: RequireModuleOptions = {}) { // Resolve id const resolvedPath = resolveModule(id, opts) @@ -124,6 +129,7 @@ export function requireModule (id: string, opts: RequireModuleOptions = {}) { return requiredModule } +/** @deprecated Do not use CJS utils */ export function importModule (id: string, opts: RequireModuleOptions = {}) { const resolvedPath = resolveModule(id, opts) if (opts.interopDefault !== false) { @@ -132,13 +138,14 @@ export function importModule (id: string, opts: RequireModuleOptions = {}) { return import(pathToFileURL(resolvedPath).href) } +/** @deprecated Do not use CJS utils */ export function tryImportModule (id: string, opts: RequireModuleOptions = {}) { try { return importModule(id, opts).catch(() => undefined) } catch { } } -/** Try to require a module, but don't emit an error if the module can't be required. */ +/** @deprecated Do not use CJS utils */ export function tryRequireModule (id: string, opts: RequireModuleOptions = {}) { try { return requireModule(id, opts) diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 19115415154..cb2414b7a55 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -4,6 +4,7 @@ import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork' import type { NuxtTemplate } from '@nuxt/schema' +/** @deprecated */ export async function compileTemplate (template: NuxtTemplate, ctx: any) { const data = { ...ctx, options: template.options } if (template.src) { diff --git a/packages/kit/src/module/define.ts b/packages/kit/src/module/define.ts index 861f65d1aac..26d46f04e6b 100644 --- a/packages/kit/src/module/define.ts +++ b/packages/kit/src/module/define.ts @@ -13,20 +13,10 @@ import { templateUtils, compileTemplate } from '../internal/template' * any hooks that are provided, and calling an optional setup function for full control. */ export function defineNuxtModule (definition: ModuleDefinition): NuxtModule { - // Legacy format. TODO: Remove in RC - if (typeof definition === 'function') { - // @ts-ignore - definition = definition(useNuxt()) - logger.warn('Module definition as function is deprecated and will be removed in the future versions', definition) - } - // Normalize definition and meta if (!definition.meta) { definition.meta = {} } - if (!definition.meta.configKey) { - // @ts-ignore TODO: Remove non-meta fallbacks in RC - definition.meta.name = definition.meta.name || definition.name - // @ts-ignore - definition.meta.configKey = definition.configKey || definition.meta.name + if (definition.meta.configKey === undefined) { + definition.meta.configKey = definition.meta.name } // Resolves module options from inline options, [configKey] in nuxt.config, defaults and schema diff --git a/packages/kit/src/module/install.ts b/packages/kit/src/module/install.ts index df8d9554269..733bfe8ca66 100644 --- a/packages/kit/src/module/install.ts +++ b/packages/kit/src/module/install.ts @@ -27,14 +27,6 @@ export async function installModule (moduleToInstall: string | NuxtModule, _inli async function normalizeModule (nuxtModule: string | NuxtModule, inlineOptions?: any) { const nuxt = useNuxt() - // Detect if `installModule` used with older signuture (nuxt, nuxtModule) - // TODO: Remove in RC - // @ts-ignore - if (nuxtModule?._version || nuxtModule?.version || nuxtModule?.constructor?.version || '') { - [nuxtModule, inlineOptions] = [inlineOptions, {}] - console.warn(new Error('`installModule` is being called with old signature!')) - } - // Import if input is string if (typeof nuxtModule === 'string') { const _src = resolveModule(resolveAlias(nuxtModule), { paths: nuxt.options.modulesDir }) diff --git a/packages/kit/src/template.ts b/packages/kit/src/template.ts index 01e2f481ac7..cbf0682eab5 100644 --- a/packages/kit/src/template.ts +++ b/packages/kit/src/template.ts @@ -45,7 +45,7 @@ export function normalizeTemplate (template: NuxtTemplate | string): Resolv } if (!template.filename) { const srcPath = parse(template.src) - template.filename = template.fileName || + template.filename = (template as any).fileName || `${basename(srcPath.dir)}.${srcPath.name}.${hash(template.src)}${srcPath.ext}` } } diff --git a/packages/nuxi/src/commands/info.ts b/packages/nuxi/src/commands/info.ts index e613135355f..781f4f9cc19 100644 --- a/packages/nuxi/src/commands/info.ts +++ b/packages/nuxi/src/commands/info.ts @@ -68,7 +68,7 @@ export default defineNuxtCommand({ Builder: builder, UserConfig: Object.keys(nuxtConfig).map(key => '`' + key + '`').join(', '), RuntimeModules: listModules(nuxtConfig.modules), - BuildModules: listModules(nuxtConfig.buildModules) + BuildModules: listModules(nuxtConfig.buildModules || []) } console.log('RootDir:', rootDir) diff --git a/packages/nuxi/src/utils/prepare.ts b/packages/nuxi/src/utils/prepare.ts index a7ce89fa957..e1ba9405d50 100644 --- a/packages/nuxi/src/utils/prepare.ts +++ b/packages/nuxi/src/utils/prepare.ts @@ -63,7 +63,6 @@ export const writeTypes = async (nuxt: Nuxt) => { } const references: TSReference[] = [ - ...nuxt.options.buildModules, ...nuxt.options.modules, ...nuxt.options._modules ] diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts index 96e33d0be58..75d21f30a47 100644 --- a/packages/nuxt/src/app/composables/asyncData.ts +++ b/packages/nuxt/src/app/composables/asyncData.ts @@ -96,11 +96,7 @@ export function useAsyncData< options.server = options.server ?? true options.default = options.default ?? getDefault - // TODO: remove support for `defer` in Nuxt 3 RC - if ((options as any).defer) { - console.warn('[useAsyncData] `defer` has been renamed to `lazy`. Support for `defer` will be removed in RC.') - } - options.lazy = options.lazy ?? (options as any).defer ?? false + options.lazy = options.lazy ?? false options.immediate = options.immediate ?? true // Setup nuxt instance payload diff --git a/packages/nuxt/src/app/composables/error.ts b/packages/nuxt/src/app/composables/error.ts index 8da32879244..ab638dd8660 100644 --- a/packages/nuxt/src/app/composables/error.ts +++ b/packages/nuxt/src/app/composables/error.ts @@ -21,9 +21,6 @@ export const showError = (_err: string | Error | Partial) => { return err } -/** @deprecated Use `throw createError()` or `showError` */ -export const throwError = showError - export const clearError = async (options: { redirect?: string } = {}) => { const nuxtApp = useNuxtApp() const error = useError() diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts index f7410691255..251a09fd596 100644 --- a/packages/nuxt/src/app/composables/index.ts +++ b/packages/nuxt/src/app/composables/index.ts @@ -3,14 +3,14 @@ export { useAsyncData, useLazyAsyncData, refreshNuxtData, clearNuxtData } from ' export type { AsyncDataOptions, AsyncData } from './asyncData' export { useHydration } from './hydrate' export { useState } from './state' -export { clearError, createError, isNuxtError, throwError, showError, useError } from './error' +export { clearError, createError, isNuxtError, showError, useError } from './error' export type { NuxtError } from './error' export { useFetch, useLazyFetch } from './fetch' export type { FetchResult, UseFetchOptions } from './fetch' export { useCookie } from './cookie' export type { CookieOptions, CookieRef } from './cookie' export { useRequestHeaders, useRequestEvent, setResponseStatus } from './ssr' -export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useActiveRoute, useRouter } from './router' +export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from './router' export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router' export { preloadComponents, prefetchComponents, preloadRouteComponents } from './preload' export { isPrerendered, loadPayload, preloadPayload } from './payload' diff --git a/packages/nuxt/src/app/composables/router.ts b/packages/nuxt/src/app/composables/router.ts index b4f3950f74c..e553bb8c792 100644 --- a/packages/nuxt/src/app/composables/router.ts +++ b/packages/nuxt/src/app/composables/router.ts @@ -30,11 +30,6 @@ export const onBeforeRouteUpdate = (guard: NavigationGuard) => { onUnmounted(unsubscribe) } -/** @deprecated Use `useRoute` instead. */ -export const useActiveRoute = (): RouteLocationNormalizedLoaded => { - return useNuxtApp()._route -} - export interface RouteMiddleware { (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType } diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts index 6f4b9419d73..5f078f502b1 100644 --- a/packages/nuxt/src/components/module.ts +++ b/packages/nuxt/src/components/module.ts @@ -78,8 +78,6 @@ export default defineNuxtModule({ const transpile = typeof dirOptions.transpile === 'boolean' ? dirOptions.transpile : 'auto' const extensions = (dirOptions.extensions || nuxt.options.extensions).map(e => e.replace(/^\./g, '')) - dirOptions.level = Number(dirOptions.level || 0) - const present = isDirectory(dirPath) if (!present && !DEFAULT_COMPONENTS_DIRS_RE.test(dirOptions.path)) { // eslint-disable-next-line no-console diff --git a/packages/nuxt/src/core/modules.ts b/packages/nuxt/src/core/modules.ts index 5041095d4a2..6df928fc7d0 100644 --- a/packages/nuxt/src/core/modules.ts +++ b/packages/nuxt/src/core/modules.ts @@ -9,7 +9,6 @@ export const addModuleTranspiles = (opts: AddModuleTranspilesOptions = {}) => { const modules = [ ...opts.additionalModules || [], - ...nuxt.options.buildModules, ...nuxt.options.modules, ...nuxt.options._modules ] diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts index a0145231736..67462b743cf 100644 --- a/packages/nuxt/src/core/nuxt.ts +++ b/packages/nuxt/src/core/nuxt.ts @@ -1,6 +1,6 @@ import { join, normalize, resolve } from 'pathe' import { createHooks, createDebugger } from 'hookable' -import type { Nuxt, NuxtOptions, NuxtConfig, NuxtHooks } from '@nuxt/schema' +import type { Nuxt, NuxtOptions, NuxtHooks } from '@nuxt/schema' import { loadNuxtConfig, LoadNuxtOptions, nuxtCtx, installModule, addComponent, addVitePlugin, addWebpackPlugin, tryResolveModule, addPlugin } from '@nuxt/kit' // Temporary until finding better placement /* eslint-disable import/no-restricted-paths */ @@ -116,7 +116,6 @@ async function initNuxt (nuxt: Nuxt) { // Init user modules await nuxt.callHook('modules:before') const modulesToInstall = [ - ...nuxt.options.buildModules, ...nuxt.options.modules, ...nuxt.options._modules ] @@ -168,22 +167,6 @@ async function initNuxt (nuxt: Nuxt) { filePath: resolve(nuxt.options.appDir, 'components/nuxt-loading-indicator') }) - // Deprecate hooks - nuxt.hooks.deprecateHooks({ - 'autoImports:sources': { - to: 'imports:sources', - message: '`autoImports:sources` hook is deprecated. Use `addImportsSources()` from `@nuxt/kit` or `imports:dirs` with `nuxt>=3.0.0-rc.10`.' - }, - 'autoImports:dirs': { - to: 'imports:dirs', - message: '`autoImports:dirs` hook is deprecated. Use `addImportsDir()` from `@nuxt/kit` or `imports:dirs` with `nuxt>=3.0.0-rc.9`.' - }, - 'autoImports:extend': { - to: 'imports:extend', - message: '`autoImports:extend` hook is deprecated. Use `addImports()` from `@nuxt/kit` or `imports:extend` with `nuxt>=3.0.0-rc.9`.' - } - }) - // Add prerender payload support if (!nuxt.options.dev && nuxt.options.experimental.payloadExtraction) { addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client')) @@ -260,12 +243,3 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise { return nuxt } - -/** @deprecated `defineNuxtConfig` is auto imported. Remove import or alternatively use `import { defineNuxtConfig } from 'nuxt/config'`. */ -export function defineNuxtConfig (config: NuxtConfig): NuxtConfig { - return config -} - -/** @deprecated Use `import type { NuxtConfig } from 'nuxt/config'`. */ -type _NuxtConfig = NuxtConfig -export type { _NuxtConfig as NuxtConfig } diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts index b6993629be7..e83ab330c72 100644 --- a/packages/nuxt/src/head/module.ts +++ b/packages/nuxt/src/head/module.ts @@ -2,7 +2,7 @@ import { resolve } from 'pathe' import { addComponent, addPlugin, defineNuxtModule } from '@nuxt/kit' import { distDir } from '../dirs' -const components = ['Script', 'NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body'] +const components = ['NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body'] export default defineNuxtModule({ meta: { diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts index 663da5a4326..b4029ed07a4 100644 --- a/packages/nuxt/src/head/runtime/components.ts +++ b/packages/nuxt/src/head/runtime/components.ts @@ -65,57 +65,6 @@ const globalProps = { translate: String } -//