diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index f76b0b4161..85feefc08f 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,4 +1,4 @@ -FROM node:lts@sha256:5c76d05034644fa8ecc9c2aa84e0a83cd981d0ef13af5455b87b9adf5b216561 +FROM node:lts@sha256:35a5dd72bcac4bce43266408b58a02be6ff0b6098ffa6f5435aeea980a8951d7 RUN apt-get update && \ apt-get install -fy libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdbus-1-3 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2 && \ diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 4f65e10c0d..dc7fbd51e5 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -23,6 +23,9 @@ jobs: - name: Install dependencies run: pnpm install + - name: Check engine ranges, peer dependency ranges and installed versions + run: pnpm installed-check --fix + - name: Build (stub) run: pnpm dev:prepare diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5d211a26b1..1fa952b958 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -56,6 +56,9 @@ jobs: - name: Build run: pnpm build + - name: Check types + run: pnpm test:attw + - name: Cache dist uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3 with: diff --git a/.github/workflows/lint-sherif.yml b/.github/workflows/lint-monorepo.yml similarity index 80% rename from .github/workflows/lint-sherif.yml rename to .github/workflows/lint-monorepo.yml index 1477d94c3b..aa5bc53109 100644 --- a/.github/workflows/lint-sherif.yml +++ b/.github/workflows/lint-monorepo.yml @@ -4,12 +4,14 @@ on: push: paths: - "**/package.json" + - "pnpm-lock.yaml" branches: - main - 3.x pull_request: paths: - "**/package.json" + - "pnpm-lock.yaml" branches: - main - 3.x @@ -32,5 +34,9 @@ jobs: - name: Install dependencies run: pnpm install + - name: Lint monorepo run: pnpm sherif -r multiple-dependency-versions + + - name: Check engine ranges, peer dependency ranges and installed versions + run: pnpm installed-check diff --git a/docs/1.getting-started/1.introduction.md b/docs/1.getting-started/1.introduction.md index 90f7e84da0..28e8a38178 100644 --- a/docs/1.getting-started/1.introduction.md +++ b/docs/1.getting-started/1.introduction.md @@ -25,7 +25,7 @@ Nuxt uses conventions and an opinionated directory structure to automate repetit - **Auto-imports:** write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles. - **Data-fetching utilities:** Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies. - **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json` -- **Configured build tools:** we use [Vite](https://vitejs.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in. +- **Configured build tools:** we use [Vite](https://vite.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in. Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**. diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md index 642592192b..717f49c265 100644 --- a/docs/1.getting-started/12.upgrade.md +++ b/docs/1.getting-started/12.upgrade.md @@ -73,7 +73,8 @@ export default defineNuxtConfig({ // resetAsyncDataToUndefined: true, // templateUtils: true, // relativeWatchPaths: true, - // normalizeComponentNames: false + // normalizeComponentNames: false, + // spaLoadingTemplateLocation: 'within', // defaults: { // useAsyncData: { // deep: true @@ -237,6 +238,45 @@ export default defineNuxtConfig({ }) ``` +#### New DOM Location for SPA Loading Screen + +🚦 **Impact Level**: Minimal + +##### What Changed + +When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `app/spa-loading-template.html`), within the Nuxt app root: + +```html +
+ +
+``` + +Now, we default to rendering the template alongside the Nuxt app root: + +```html +
+ +``` + +##### Reasons for Change + +This allows the spa loading template to remain in the DOM until the Vue app suspense resolves, preventing a flash of white. + +##### Migration Steps + +If you were targeting the spa loading template with CSS or `document.queryElement` you will need to update your selectors. For this purpose you can use the new `app.spaLoaderTag` and `app.spaLoaderAttrs` configuration options. + +Alternatively, you can revert to the previous behaviour with: + +```ts twoslash [nuxt.config.ts] +export default defineNuxtConfig({ + experimental: { + spaLoadingTemplateLocation: 'within', + } +}) +``` + #### Scan Page Meta After Resolution 🚦 **Impact Level**: Minimal diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md index 4abe89a93b..715e0b8f1f 100644 --- a/docs/1.getting-started/2.installation.md +++ b/docs/1.getting-started/2.installation.md @@ -91,6 +91,9 @@ pnpm dev -o ```bash [bun] bun run dev -o + +# To use the Bun runtime during development +# bun --bun run dev -o ``` :: diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md index 80b379e3d8..17c8cb5ca7 100644 --- a/docs/1.getting-started/3.configuration.md +++ b/docs/1.getting-started/3.configuration.md @@ -153,7 +153,7 @@ Name | Config File | How ---------------------------------------------|---------------------------|------------------------- [Nitro](https://nitro.unjs.io) | ~~`nitro.config.ts`~~ | Use [`nitro`](/docs/api/nuxt-config#nitro) key in `nuxt.config` [PostCSS](https://postcss.org) | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/api/nuxt-config#postcss) key in `nuxt.config` -[Vite](https://vitejs.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config` +[Vite](https://vite.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config` [webpack](https://webpack.js.org) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config` Here is a list of other common config files: @@ -162,9 +162,9 @@ Name | Config File | How To ---------------------------------------------|-------------------------|-------------------------- [TypeScript](https://www.typescriptlang.org) | `tsconfig.json` | [More Info](/docs/guide/concepts/typescript#nuxttsconfigjson) [ESLint](https://eslint.org) | `eslint.config.js` | [More Info](https://eslint.org/docs/latest/use/configure/configuration-files) -[Prettier](https://prettier.io) | `.prettierrc.json` | [More Info](https://prettier.io/docs/en/configuration.html) -[Stylelint](https://stylelint.io) | `.stylelintrc.json` | [More Info](https://stylelint.io/user-guide/configure) -[TailwindCSS](https://tailwindcss.com) | `tailwind.config.js` | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config) +[Prettier](https://prettier.io) | `prettier.config.js` | [More Info](https://prettier.io/docs/en/configuration.html) +[Stylelint](https://stylelint.io) | `stylelint.config.js` | [More Info](https://stylelint.io/user-guide/configure) +[TailwindCSS](https://tailwindcss.com) | `tailwind.config.js` | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config) [Vitest](https://vitest.dev) | `vitest.config.ts` | [More Info](https://vitest.dev/config) ## Vue Configuration diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md index bfa94cd0f1..e008ea551a 100644 --- a/docs/1.getting-started/4.assets.md +++ b/docs/1.getting-started/4.assets.md @@ -27,7 +27,7 @@ For example, referencing an image file in the `public/img/` directory, available ## Assets Directory -Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) (default) 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). +Nuxt uses [Vite](https://vite.dev/guide/assets.html) (default) 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://vite.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). By convention, Nuxt uses the [`assets/`](/docs/guide/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it. diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md index d780ad3449..58d28344f8 100644 --- a/docs/1.getting-started/4.styling.md +++ b/docs/1.getting-started/4.styling.md @@ -204,7 +204,7 @@ export default defineNuxtConfig({ In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt. :: -If you need to inject code in pre-processed files, like a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the vite [preprocessors options](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions). +If you need to inject code in pre-processed files, like a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the vite [preprocessors options](https://vite.dev/config/shared-options.html#css-preprocessoroptions). Create some partials in your `assets` directory: @@ -416,7 +416,7 @@ SFC style blocks support preprocessors syntax. Vite come with built-in support f :: -You can refer to the [Vite CSS docs](https://vitejs.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue). +You can refer to the [Vite CSS docs](https://vite.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue). For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org). ## Using PostCSS diff --git a/docs/2.guide/1.concepts/2.vuejs-development.md b/docs/2.guide/1.concepts/2.vuejs-development.md index ffabdc6a49..c70d2f5cfe 100644 --- a/docs/2.guide/1.concepts/2.vuejs-development.md +++ b/docs/2.guide/1.concepts/2.vuejs-development.md @@ -21,7 +21,7 @@ We chose to build Nuxt on top of Vue for these reasons: ### Single File Components -[Vue’s single-file components](https://v3.vuejs.org/guide/single-file-component.html) (SFC or `*.vue` files) encapsulate the markup (`