Skip to content

translate: docs/1.getting-started/2.installation #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
60 changes: 30 additions & 30 deletions docs/1.getting-started/2.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,39 @@
navigation.icon: uil:play-circle
---

# Installation
# Встановлення {#installation}

Get started with Nuxt quickly with our online starters or start locally with your terminal.
Почніть роботу з Nuxt швидко з нашими онлайн стартерами або почніть локально з вашого терміналу.

## Play Online
## Спробувати Онлайн {#play-online}

You can start playing with Nuxt 3 in your browser using our online sandboxes:
Ви можете спробувати Nuxt 3 у вашому браузері, використовуючи наші онлайн-пісочниці:

:button-link[Play on StackBlitz]{href="https://nuxt.new/s/v3" blank .mr-2}
:button-link[Play on CodeSandbox]{href="https://nuxt.new/c/v3" blank}
:button-link[Спробувати на StackBlitz]{href="https://nuxt.new/s/v3" blank .mr-2}
:button-link[Спробувати на CodeSandbox]{href="https://nuxt.new/c/v3" blank}

Start with one of our starters and themes directly by opening [nuxt.new](https://nuxt.new).
Почніть безпосередньо з одного з наших стартерів і тем, відкривши [nuxt.new](https://nuxt.new).

:button-link[Discover nuxt.new]{href="https://nuxt.new" blank}
:button-link[Ознайомитись з nuxt.new]{href="https://nuxt.new" blank}

## New Project
## Новий Проєкт {#new-project}

<!-- TODO: need to fix upstream in nuxt/nuxt.com -->
<!-- markdownlint-disable-next-line MD001 -->
#### Prerequisites
#### Передумови {#prerequisites}

- **Node.js** - [`v16.10.0`](https://nodejs.org/en/) or newer
- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- **Terminal** - In order to run Nuxt commands
- **Node.js** - [`v16.10.0`](https://nodejs.org/en/) або новіше
- **Текстовий редактор** - Ми рекомендуємо [Visual Studio Code](https://code.visualstudio.com/) з [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- **Термінал** - Для запуску команд Nuxt

::alert
::details
:summary[Additional notes for an optimal setup:]
- **Node.js**: Make sure to use an even numbered version (18, 20, etc)
:summary[Додаткові примітки для оптимального налаштування:]
- **Node.js**: Обов'язково використовуйте парну нумеровану версію (18, 20 і т.д.)

- **Volar**: Either enable [**Take Over Mode**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (recommended) or add the [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
- **Volar**: Або ввімкніть [**Режим Takeover**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (рекомендуємо) або додайте [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your `nuxt.config.ts` file:
Якщо ви ввімкнули **Режим Takeover** або встановили **TypeScript Vue Plugin (Volar)**, ви можете вимкнути генерацію shim для файлів `*.vue` у вашому файлі `nuxt.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand All @@ -47,27 +47,27 @@ export default defineNuxtConfig({
::
::

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:
Відкрийте термінал (якщо ви використовєте [Visual Studio Code](https://code.visualstudio.com/), ви маєте змогу відкрити [вбудований термінал](https://code.visualstudio.com/docs/editor/integrated-terminal)) та використайте наступну команду для створення нового стартового проєкта:

::code-group

```bash [npx]
npx nuxi init <project-name>
npx nuxi init <назва-проєкту>
```

```bash [pnpm]
pnpm dlx nuxi init <project-name>
pnpm dlx nuxi init <назва-проєкту>
```

::

Open your project folder in Visual Studio Code:
Відкрийте каталог вашого проєкту в Visual Studio Code:

```bash
code <project-name>
code <назва-проєкту>
```

Install the dependencies:
Встановлення залежностей:

::code-group

Expand All @@ -80,15 +80,15 @@ npm install
```

```bash [pnpm]
# Make sure you have `shamefully-hoist=true` in `.npmrc` before running pnpm install
#Переконайтеся, що ви маєте `shamefully-hoist=true` у `.npmrc` перед запуском встановлення pnpm
pnpm install
```

::

## Development Server
## Сервер Розробки {#development-server}

Now you'll be able to start your Nuxt app in development mode:
Тепер ви зможете запустити застосунок Nuxt в режимі розробки:

::code-group

Expand All @@ -107,11 +107,11 @@ pnpm dev -o
::

::alert{type=success icon=✨ .font-bold}
Well done! A browser window should automatically open for <http://localhost:3000>.
Чудово! Вікно браузера повинно автоматично відкритися для <http://localhost:3000>.
::

## Next Steps
## Наступні Кроки {#next-steps}

Now that you've created your Nuxt 3 project, you are ready to start building your application.
Тепер, коли ви стоврили свій Nuxt 3 проєкт, ви готови приступити до створення вашого застосунку.

- Learn about the framework [concepts](/docs/guide/concepts/auto-imports)
- Дізнайтеся про [концепції](/docs/guide/concepts/auto-imports) фреймворку