From 38a33dba1993b95b3e2f9579ff8b9f58e3413be5 Mon Sep 17 00:00:00 2001 From: Gustav Odinger <65498475+gustavwilliam@users.noreply.github.com> Date: Fri, 16 Aug 2024 12:19:08 +0200 Subject: [PATCH] docs: persist package manager choice in code blocks (#28514) --- docs/1.getting-started/11.testing.md | 32 +++++++++---------- docs/1.getting-started/12.upgrade.md | 2 +- docs/1.getting-started/2.installation.md | 12 +++---- docs/1.getting-started/4.styling.md | 2 +- docs/1.getting-started/9.prerendering.md | 2 +- docs/2.guide/1.concepts/8.typescript.md | 10 +++--- .../2.directory-structure/1.plugins.md | 8 ++--- docs/2.guide/3.going-further/3.modules.md | 2 +- docs/2.guide/4.recipes/2.vite-plugin.md | 2 +- docs/6.bridge/1.overview.md | 19 ++++++----- docs/6.bridge/8.nitro.md | 10 +++--- 11 files changed, 50 insertions(+), 51 deletions(-) diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md index cfa5ba9103..aa5df5c718 100644 --- a/docs/1.getting-started/11.testing.md +++ b/docs/1.getting-started/11.testing.md @@ -22,13 +22,13 @@ In order to allow you to manage your other testing dependencies, `@nuxt/test-uti - you can choose between `vitest`, `cucumber`, `jest` and `playwright` for end-to-end test runners - `playwright-core` is only required if you wish to use the built-in browser testing utilities (and are not using `@playwright/test` as your test runner) -::code-group -```bash [yarn] -yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core -``` +::package-managers ```bash [npm] npm i --save-dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core ``` +```bash [yarn] +yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core +``` ```bash [pnpm] pnpm add -D @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core ``` @@ -421,13 +421,13 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and 1. Install the needed dependencies - ::code-group - ```bash [yarn] - yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue - ``` + ::package-managers ```bash [npm] npm i --save-dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue ``` + ```bash [yarn] + yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue + ``` ```bash [pnpm] pnpm add -D vitest @vue/test-utils happy-dom @vitejs/plugin-vue ``` @@ -487,13 +487,13 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and 6. Run vitest command - ::code-group - ```bash [yarn] - yarn test - ``` + ::package-managers ```bash [npm] npm run test ``` + ```bash [yarn] + yarn test + ``` ```bash [pnpm] pnpm run test ``` @@ -658,13 +658,13 @@ const page = await createPage('/page') We also provide first-class support for testing Nuxt within [the Playwright test runner](https://playwright.dev/docs/intro). -::code-group -```bash [yarn] -yarn add --dev @playwright/test @nuxt/test-utils -``` +::package-managers ```bash [npm] npm i --save-dev @playwright/test @nuxt/test-utils ``` +```bash [yarn] +yarn add --dev @playwright/test @nuxt/test-utils +``` ```bash [pnpm] pnpm add -D @playwright/test @nuxt/test-utils ``` diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md index 7c34d17eec..096aa164a6 100644 --- a/docs/1.getting-started/12.upgrade.md +++ b/docs/1.getting-started/12.upgrade.md @@ -11,7 +11,7 @@ navigation.icon: i-ph-arrow-circle-up-duotone To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxi upgrade` command. -::code-group +::package-managers ```bash [npm] npx nuxi upgrade diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md index aa5c451415..42bba1705b 100644 --- a/docs/1.getting-started/2.installation.md +++ b/docs/1.getting-started/2.installation.md @@ -35,7 +35,7 @@ Or follow the steps below to set up a new Nuxt project on your computer. Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and use the following command to create a new starter project: -::code-group +::package-managers ```bash [npm] npx nuxi@latest init @@ -75,16 +75,16 @@ cd Now you'll be able to start your Nuxt app in development mode: -::code-group - -```bash [yarn] -yarn dev --open -``` +::package-managers ```bash [npm] npm run dev -- -o ``` +```bash [yarn] +yarn dev --open +``` + ```bash [pnpm] pnpm dev -o ``` diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md index 4df9322486..11244f3fdb 100644 --- a/docs/1.getting-started/4.styling.md +++ b/docs/1.getting-started/4.styling.md @@ -77,7 +77,7 @@ h1 { You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example. -::code-group +::package-managers ```bash [npm] npm install animate.css diff --git a/docs/1.getting-started/9.prerendering.md b/docs/1.getting-started/9.prerendering.md index 31f1f7311f..18e82efdf5 100644 --- a/docs/1.getting-started/9.prerendering.md +++ b/docs/1.getting-started/9.prerendering.md @@ -14,7 +14,7 @@ Use the [`nuxi generate` command](/docs/api/commands/generate) to build and pre- This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on. -::code-group +::package-managers ```bash [npm] npx nuxi generate diff --git a/docs/2.guide/1.concepts/8.typescript.md b/docs/2.guide/1.concepts/8.typescript.md index d00c9d1ce6..31d247b7e8 100644 --- a/docs/2.guide/1.concepts/8.typescript.md +++ b/docs/2.guide/1.concepts/8.typescript.md @@ -9,16 +9,16 @@ By default, Nuxt doesn't check types when you run [`nuxi dev`](/docs/api/command To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency: -::code-group - - ```bash [yarn] - yarn add --dev vue-tsc typescript - ``` +::package-managers ```bash [npm] npm install --save-dev vue-tsc typescript ``` + ```bash [yarn] + yarn add --dev vue-tsc typescript + ``` + ```bash [pnpm] pnpm add -D vue-tsc typescript ``` diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md index a30be3eac6..d76acdade7 100644 --- a/docs/2.guide/2.directory-structure/1.plugins.md +++ b/docs/2.guide/2.directory-structure/1.plugins.md @@ -246,13 +246,13 @@ If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriel First, install the Vue plugin dependency: -::code-group -```bash [yarn] -yarn add --dev vue-gtag-next -``` +::package-managers ```bash [npm] npm install --save-dev vue-gtag-next ``` +```bash [yarn] +yarn add --dev vue-gtag-next +``` ```bash [pnpm] pnpm add -D vue-gtag-next ``` diff --git a/docs/2.guide/3.going-further/3.modules.md b/docs/2.guide/3.going-further/3.modules.md index 2094748e1c..a78401f01a 100644 --- a/docs/2.guide/3.going-further/3.modules.md +++ b/docs/2.guide/3.going-further/3.modules.md @@ -13,7 +13,7 @@ With modules, you can encapsulate, properly test, and share custom solutions as We recommend you get started with Nuxt Modules using our [starter template](https://github.com/nuxt/starter/tree/module): -::code-group +::package-managers ```bash [npm] npx nuxi init -t module my-module diff --git a/docs/2.guide/4.recipes/2.vite-plugin.md b/docs/2.guide/4.recipes/2.vite-plugin.md index 6a9b1e8a28..c74efc7610 100644 --- a/docs/2.guide/4.recipes/2.vite-plugin.md +++ b/docs/2.guide/4.recipes/2.vite-plugin.md @@ -8,7 +8,7 @@ While Nuxt modules offer extensive functionality, sometimes a specific Vite plug First, we need to install the Vite plugin, for our example, we'll use `@rollup/plugin-yaml`: -::code-group +::package-managers ```bash [npm] npm install @rollup/plugin-yaml diff --git a/docs/6.bridge/1.overview.md b/docs/6.bridge/1.overview.md index 8f3a018b24..e37a64a8af 100644 --- a/docs/6.bridge/1.overview.md +++ b/docs/6.bridge/1.overview.md @@ -28,16 +28,15 @@ Make sure your dev server (`nuxt dev`) isn't running, remove any package lock fi Then, reinstall your dependencies: -::code-group - -```bash [yarn] -yarn install -``` +::package-managers ```bash [npm] npm install ``` +```bash [yarn] +yarn install +``` :: ::note @@ -48,16 +47,16 @@ Once the installation is complete, make sure both development and production bui Install `@nuxt/bridge` and `nuxi` as development dependencies: -::code-group - -```bash [Yarn] -yarn add --dev @nuxt/bridge nuxi -``` +::package-managers ```bash [npm] npm install -D @nuxt/bridge nuxi ``` +```bash [yarn] +yarn add --dev @nuxt/bridge nuxi +``` + :: ### Update `nuxt.config` diff --git a/docs/6.bridge/8.nitro.md b/docs/6.bridge/8.nitro.md index 920b37374a..664ab52427 100644 --- a/docs/6.bridge/8.nitro.md +++ b/docs/6.bridge/8.nitro.md @@ -27,16 +27,16 @@ You will also need to update your scripts within your `package.json` to reflect Install `nuxi` as a development dependency: -::code-group - -```bash [yarn] -yarn add --dev nuxi -``` +::package-managers ```bash [npm] npm install -D nuxi ``` +```bash [yarn] +yarn add --dev nuxi +``` + :: ### Nuxi