From 49959fd9add7873edd140941e3e3cf05f70c93bf Mon Sep 17 00:00:00 2001
From: Dominic <67210734+rexhent@users.noreply.github.com>
Date: Wed, 26 Jun 2024 06:30:37 +1000
Subject: [PATCH] docs: update some code groups with package manager examples
 (#27791)

---
 docs/1.getting-started/12.upgrade.md     | 18 +++++++++++++++++-
 docs/1.getting-started/2.installation.md |  6 +++++-
 docs/1.getting-started/4.styling.md      | 18 +++++++++++++++++-
 docs/1.getting-started/9.prerendering.md | 18 +++++++++++++++++-
 4 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md
index a1720402e8..760b8c306d 100644
--- a/docs/1.getting-started/12.upgrade.md
+++ b/docs/1.getting-started/12.upgrade.md
@@ -11,10 +11,26 @@ 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.
 
-```bash [Terminal]
+::code-group
+
+```bash [npm]
 npx nuxi upgrade
 ```
 
+```bash [yarn]
+yarn dlx nuxi upgrade
+```
+
+```bash [pnpm]
+pnpm dlx nuxi upgrade
+```
+
+```bash [bun]
+bunx nuxi upgrade
+```
+
+::
+
 ### Nightly Release Channel
 
 To use the latest Nuxt build and test features before their release, read about the [nightly release channel](/docs/guide/going-further/nightly-release-channel) guide.
diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md
index 1af58ad887..79c9ca8ed7 100644
--- a/docs/1.getting-started/2.installation.md
+++ b/docs/1.getting-started/2.installation.md
@@ -37,10 +37,14 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
 
 ::code-group
 
-```bash [npx]
+```bash [npm]
 npx nuxi@latest init <project-name>
 ```
 
+```bash [yarn]
+yarn dlx nuxi@latest init <project-name>
+```
+
 ```bash [pnpm]
 pnpm dlx nuxi@latest init <project-name>
 ```
diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index aac7cc8166..4df9322486 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -77,10 +77,26 @@ h1 {
 
 You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example.
 
-```bash [Terminal]
+::code-group
+
+```bash [npm]
 npm install animate.css
 ```
 
+```bash [yarn]
+yarn add animate.css
+```
+
+```bash [pnpm]
+pnpm install animate.css
+```
+
+```bash [bun]
+bun install animate.css
+```
+
+::
+
 Then you can reference it directly in your pages, layouts and components:
 
 ```vue [app.vue]
diff --git a/docs/1.getting-started/9.prerendering.md b/docs/1.getting-started/9.prerendering.md
index ee63d7b285..e4c9cff5d3 100644
--- a/docs/1.getting-started/9.prerendering.md
+++ b/docs/1.getting-started/9.prerendering.md
@@ -14,10 +14,26 @@ 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.
 
-```bash [Terminal]
+::code-group
+
+```bash [npm]
 npx nuxi generate
 ```
 
+```bash [yarn]
+yarn dlx nuxi generate
+```
+
+```bash [pnpm]
+pnpm dlx nuxi generate
+```
+
+```bash [bun]
+bunx nuxi generate
+```
+
+::
+
 You can now deploy the `.output/public` directory to any static hosting service or preview it locally with `npx serve .output/public`.
 
 Working of the Nitro crawler: