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

This commit is contained in:
Gustav Odinger 2024-08-16 12:19:08 +02:00 committed by GitHub
parent 304c17be7c
commit 38a33dba19
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 50 additions and 51 deletions

View File

@ -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
```

View File

@ -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

View File

@ -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
```bash [yarn]
yarn dev --open
```
::package-managers
```bash [npm]
npm run dev -- -o
```
```bash [yarn]
yarn dev --open
```
```bash [pnpm]
pnpm dev -o
```

View File

@ -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

View File

@ -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

View File

@ -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
```

View File

@ -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
```

View File

@ -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

View File

@ -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

View File

@ -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`

View File

@ -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