Merge branch 'main' into pr/516310460/6507

.gitignore

@@ -23,7 +23,6 @@ dist
 .nuxt-*
 .output
 .gen
-nuxt.d.ts
 
 # Junit reports
 reports

docs/content/1.getting-started/1.quick-start.md

@@ -2,7 +2,7 @@
 
 Starting fresh? Getting started with Nuxt 3 is straightforward!
 
-## Play online
+## Play Online
 
 You can start playing with Nuxt 3 in your browser using our online sandboxes:
 
@@ -23,7 +23,7 @@ Before getting started, please make sure you have installed the recommended setu
 
 ::alert{type=info}
 
-If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files:
+If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your `nuxt.config` file:
 
 ```js
 export default defineNuxtConfig({
@@ -35,7 +35,7 @@ export default defineNuxtConfig({
 
 ::
 
-## New project
+## New Project
 
 Open a terminal, or from [Visual Studio Code](https://code.visualstudio.com/), open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) and use the following command to create a new starter project:
 
@@ -75,7 +75,7 @@ pnpm install --shamefully-hoist
 
 ::
 
-## Development server
+## Development Server
 
 Now you'll be able to start your Nuxt app in development mode:
 
@@ -99,7 +99,7 @@ pnpm run dev -o
 Well done! A browser window should automatically open for <http://localhost:3000>.
 ::
 
-## Next steps
+## Next Steps
 
 Now that you've created your Nuxt 3 project, you are ready to start building your application.
 

docs/content/2.guide/1.concepts/1.introduction.md

@@ -20,7 +20,7 @@ Nuxt takes care of this so you can focus on what matters: **creating your web ap
 
 On top of this setup, Nuxt provides a [directory structure](/guide/directory-structure) to follow, focused on specific features to keep your focus on creating, not configuring.
 
-## How does it work?
+## How Does It Work?
 
 Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages):
 ::list{type=info}
@@ -35,7 +35,7 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/framework/
 
 We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
 
-## Are you Nuxt?
+## Are You Nuxt?
 
 Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
 
@@ -45,6 +45,6 @@ Extendable with a strong module ecosystem and hooks engine, it makes it easy to
 Ready to try? Head over to the [Installation section](/getting-started/quick-start).
 ::
 
-### Are you *courageously* Nuxt?
+### Are You *Courageously* Nuxt?
 
 Take a stab at an open [issue](https://github.com/nuxt/framework/issues). This is the best way to learn Nuxt, by actually diving into the code. You may even bring an approach or alternative solution that makes Nuxt even better! So, what are you waiting for? Let's go!

docs/content/2.guide/1.concepts/2.vuejs-development.md

@@ -15,11 +15,11 @@ Nuxt has always used Vue as a frontend framework. We chose to build Nuxt on top
 
 ## Vue with Nuxt
 
-### Single file components
+### Single File Components
 
 [Vue’s single-file components](https://v3.vuejs.org/guide/single-file-component.html) (SFC, or `*.vue` files) encapsulate the markup (`<template>`), logic (`<script>`) and styling (`<style>`) of a Vue component. Nuxt provides a zero-config experience for SFCs with [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) that offers a seamless developer experience.
 
-### Components auto-imports
+### Components Auto-imports
 
 Every Vue component created in the [`components/` directory](/guide/directory-structure/components) of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
 
@@ -54,13 +54,13 @@ Nuxt 3 is based on Vue 3. The new major Vue version introduces several changes t
 - Composition API
 - TypeScript support
 
-### Faster rendering
+### Faster Rendering
 
 The Vue Virtual DOM (VDOM) has been rewritten from the ground up and allows for better rendering performance. On top of that, when working with compiled Single-File Components, the Vue compiler can further optimize them at build time by separating static and dynamic markup.
 
 This results in faster first rendering (component creation) and updates, and less memory usage. In Nuxt 3, it enables faster server-side rendering as well.
 
-### Smaller bundle
+### Smaller Bundle
 
 With Vue 3 and Nuxt 3, a focus has been put on bundle size reduction. With version 3, most of Vue’s functionality, including template directives and built-in components, is tree-shakable. Your production bundle will not include them if you don’t use them.
 
@@ -103,7 +103,7 @@ The goal of Nuxt 3 is to provide a great developer experience around the Composi
 - Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/api/composables/use-async-data).
 - Write your own auto-imported reusable functions in the `composables/` directory.
 
-### TypeScript support
+### TypeScript Support
 
 Both Vue 3 and Nuxt 3 are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script lang="ts">` in a component.
 

docs/content/2.guide/1.concepts/3.rendering.md

@@ -2,7 +2,7 @@
 
 Both the browser and server can interpret JavaScript code to render Vue.js components into HTML elements. This step is called **rendering**. Nuxt supports both **client-side** and **universal** rendering. The two approaches have pros and cons that we will cover in this section.
 
-## Client-side only rendering
+## Client-side Only Rendering
 
 Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface.
 
@@ -71,7 +71,7 @@ At the moment, every page (or **route**) of a Nuxt application must use the same
 
 [Read the open RFC discussing implementation and gathering community feedback.](https://github.com/nuxt/framework/discussions/560)
 
-### Rendering on CDN edge workers
+### Rendering on CDN Edge Workers
 
 Traditionally, server-side and universal rendering was only possible using Node.js. Nuxt 3 takes it to another level by directly rendering code in CDN edge workers, reducing latency and costs.
 

docs/content/2.guide/1.concepts/4.auto-imports.md

@@ -13,7 +13,7 @@ You can find a reference for auto-imported [composables](/api/composables/use-as
 Auto imports don't currently work within the [server directory](/guide/directory-structure/server).
 ::
 
-## Nuxt auto-imports
+## Nuxt Auto-imports
 
 Nuxt auto-imports functions and composables to perform [data fetching](/guide/features/data-fetching), get access to the [app context](/api/composables/use-nuxt-app) and [runtime config](/guide/features/runtime-config), manage [state](/guide/features/state-management) or define components and plugins.
 
@@ -24,7 +24,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/guide/fe
 </script>
 ```
 
-## Vue auto-imports
+## Vue Auto-imports
 
 Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.
 
@@ -36,14 +36,14 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
 </script>
 ```
 
-## Directory-based auto-imports
+## Directory-based Auto-imports
 
 Nuxt directly auto-imports files created in defined directories:
 
 - `components/` for [Vue components](/guide/directory-structure/components).
 - `composables/` for [Vue composables](/guide/directory-structure/composables).
 
-## Explicit imports
+## Explicit Imports
 
 Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
 

docs/content/2.guide/1.concepts/4.server-engine.md

@@ -29,7 +29,7 @@ Check out [the h3 docs](https://github.com/unjs/h3) for more information.
 Learn more about the API layer in the [`server/`](/guide/directory-structure/server) directory.
 ::
 
-## Direct API calls
+## Direct API Calls
 
 Nitro allows 'direct' calling of routes via the globally-available `$fetch` helper. This will make an API call to the server if run on the browser, but will directly call the relevant function if run on the server, **saving an additional API call**.
 
@@ -40,7 +40,7 @@ Nitro allows 'direct' calling of routes via the globally-available `$fetch` help
 
 For more information on `$fetch` features, check out [ohmyfetch](https://github.com/unjs/ohmyfetch).
 
-## Typed API routes
+## Typed API Routes
 
 When using API routes (or middleware), Nitro will generate typings for these routes as long as you are returning a value instead of using `res.end()` to send a response.
 

docs/content/2.guide/1.concepts/6.typescript.md

@@ -10,7 +10,7 @@ By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, fo
 yarn nuxi typecheck
 ```
 
-## Auto-generated types
+## Auto-generated Types
 
 When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for IDE type support (and type checking):
 
@@ -37,7 +37,7 @@ Overwriting options such as `"compilerOptions.paths"` with your own configuratio
 In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the `alias` property within your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::
 
-## Stricter checks
+## Stricter Checks
 
 TypeScript comes with certain checks to give you more safety and analysis of your program.
 

docs/content/2.guide/2.features/10.runtime-config.md

@@ -2,7 +2,7 @@
 
 Nuxt provides a runtime config API to expose configuration within your application and server routes, with the ability to update it at runtime by setting environment variables.
 
-## Exposing runtime config
+## Exposing Runtime Config
 
 To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using the [`runtimeConfig` option](/guide/directory-structure/nuxt.config#runtimeconfig).
 
@@ -66,9 +66,9 @@ export default defineNuxtConfig({
 })
 ```
 
-## Accessing runtime config
+## Accessing Runtime Config
 
-### Vue app
+### Vue App
 
 Within the Vue part of your Nuxt app, you will need to call `useRuntimeConfig()` to access the runtime config.
 

docs/content/2.guide/2.features/11.teleports.md

@@ -4,7 +4,7 @@ Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/te
 
 The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to `body` only, with client-side support for other targets using a `<ClientOnly>` wrapper.
 
-## Example: body teleport
+## Example: `body` Teleport
 
 ```vue
 <template>
@@ -22,9 +22,10 @@ The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM n
 </template>
 ```
 
-## Example: client-side teleport
+## Example: Client-side Teleport
 
 ```vue
+<template>
   <ClientOnly>
     <Teleport to="#some-selector">
       <!-- content -->

docs/content/2.guide/2.features/13.modules.md

@@ -6,7 +6,7 @@ Nuxt provides a module system to extend the framework core and simplify integrat
 
 When developing production-grade applications with Nuxt you might find that the framework's core functionality is not enough. Nuxt can be extended with configuration options and plugins, but maintaining these customizations across multiple projects can be tedious, repetitive and time-consuming. On the other hand, supporting every project's needs out of the box would make Nuxt very complex and hard to use.
 
-This is one of the reasons why Nuxt provides a module system that makes it possible to extend the core. Nuxt modules are async functions that sequentially run when starting nuxt in development mode using `nuxi dev` or building a project for production with `nuxi build`. They can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.
+This is one of the reasons why Nuxt provides a module system that makes it possible to extend the core. Nuxt modules are async functions that sequentially run when starting Nuxt in development mode using `nuxi dev` or building a project for production with `nuxi build`. They can override templates, configure webpack loaders, add CSS libraries, and perform many other useful tasks.
 
 Best of all, Nuxt modules can be distributed in npm packages. This makes it possible for them to be reused across projects and shared with the community, helping create an ecosystem of high-quality add-ons.
 
@@ -39,7 +39,7 @@ export default defineNuxtConfig({
 Nuxt modules are now build-time-only, and the `buildModules` property used in Nuxt 2 is deprecated in favor of `modules`.
 ::
 
-## Module development
+## Module Development
 
 Everyone has the opportunity to develop modules. Read more about developing modules in the [Module Author Guide](/guide/going-further/modules).
 

docs/content/2.guide/2.features/3.assets.md

@@ -5,7 +5,7 @@ Nuxt uses two directories to handle assets like stylesheets, fonts or images:
 - The [`public/` directory](/guide/directory-structure/public) content is served at the server root as-is.
 - The [`assets/` directory](/guide/directory-structure/assets) contains by convention every asset that you want the build tool (Vite or Webpack) to process.
 
-## `public/` directory
+## `public/` Directory
 
 The [`public/` directory](/guide/directory-structure/public) is used as a public server for static assets publicly available at a defined URL of your application.
 
@@ -21,7 +21,7 @@ For example, referencing an image file in the `public/img/` directory, available
 </template>
 ```
 
-## `assets/` directory
+## `assets/` Directory
 
 Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) or [Webpack](https://webpack.js.org/guides/asset-management/) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vitejs.dev/plugins/) (for Vite) or [loaders](https://webpack.js.org/loaders/) (for Webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
 
@@ -42,3 +42,63 @@ For example, referencing an image file that will be processed if a build tool is
 ::alert{type=info icon=💡}
 Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory).
 ::
+
+### Global Styles Imports
+
+To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file.
+
+#### Example
+
+In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/guide/directory-structure/pages) and [components](/guide/directory-structure/components)
+
+::code-group
+
+```scss [assets/_colors.scss]
+$primary: #49240F;
+$secondary: #E4A79D;
+```
+
+```sass [assets/_colors.sass]
+$primary: #49240F
+$secondary: #E4A79D
+```
+
+::
+
+In your `nuxt.config`
+
+::code-group
+
+```ts [SCSS]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@use "@/assets/_colors.scss" as *;'
+        }
+      }
+    }
+  }
+})
+```
+
+```ts [SASS]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  vite: {
+    css: {
+      preprocessorOptions: {
+        sass: {
+          additionalData: '@use "@/assets/_colors.sass" as *'
+        }
+      }
+    }
+  }
+})
+```
+
+::

docs/content/2.guide/2.features/4.head-management.md

@@ -98,7 +98,7 @@ const title = ref('Hello World')
 </template>
 ```
 
-## Example: usage with definePageMeta
+## Example: Usage With `definePageMeta`
 
 Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.