docs: persist package manager choice in code blocks (#28514)

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
+::package-managers
-```bash [yarn]
-yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
-```
 ```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
+   ::package-managers
-   ```bash [yarn]
-   yarn add --dev vitest @vue/test-utils happy-dom @vitejs/plugin-vue
-   ```
    ```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
+   ::package-managers
-   ```bash [yarn]
-   yarn test
-   ```
    ```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
+::package-managers
-```bash [yarn]
-yarn add --dev @playwright/test @nuxt/test-utils
-```
 ```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
 ```

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

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 <project-name>
@@ -75,16 +75,16 @@ cd <project-name>
 
 Now you'll be able to start your Nuxt app in development mode:
 
-::code-group
+::package-managers
-
-```bash [yarn]
-yarn dev --open
-```
 
 ```bash [npm]
 npm run dev -- -o
 ```
 
+```bash [yarn]
+yarn dev --open
+```
+
 ```bash [pnpm]
 pnpm dev -o
 ```

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

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

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
+::package-managers
-
-  ```bash [yarn]
-  yarn add --dev vue-tsc typescript
-  ```
 
   ```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
   ```

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
+::package-managers
-```bash [yarn]
-yarn add --dev vue-gtag-next
-```
 ```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
 ```

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

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

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
+::package-managers
-
-```bash [yarn]
-yarn install
-```
 
 ```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
+::package-managers
-
-```bash [Yarn]
-yarn add --dev @nuxt/bridge nuxi
-```
 
 ```bash [npm]
 npm install -D @nuxt/bridge nuxi
 ```
 
+```bash [yarn]
+yarn add --dev @nuxt/bridge nuxi
+```
+
 ::
 
 ### Update `nuxt.config`

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
+::package-managers
-
-```bash [yarn]
-yarn add --dev nuxi
-```
 
 ```bash [npm]
 npm install -D nuxi
 ```
 
+```bash [yarn]
+yarn add --dev nuxi
+```
+
 ::
 
 ### Nuxi