mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 00:23:53 +00:00
docs: persist package manager choice in code blocks (#28514)
This commit is contained in:
parent
304c17be7c
commit
38a33dba19
@ -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
|
||||
```
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
```
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
```
|
||||
|
@ -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
|
||||
```
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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`
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user