diff --git a/components/content/PackageManagers.vue b/components/content/PackageManagers.vue new file mode 100644 index 000000000..3b445bf3b --- /dev/null +++ b/components/content/PackageManagers.vue @@ -0,0 +1,48 @@ + + + diff --git a/content/3.deploy/cloudflare.md b/content/3.deploy/cloudflare.md index dce889b3c..6d1aebe5e 100644 --- a/content/3.deploy/cloudflare.md +++ b/content/3.deploy/cloudflare.md @@ -15,6 +15,10 @@ website: 'https://pages.cloudflare.com/' Интеграция с Cloudflare Pages возможна с нулевой настройкой, [узнать больше](https://nitro.unjs.io/deploy#zero-config-providers). :: +::important +Checkout the [@nuxthub/core](/modules/hub) module to build full-stack Nuxt applications with Cloudflare, learn more on [hub.nuxt.com](https://hub.nuxt.com). +:: + ### Интеграция с Git Если вы используете интеграцию GitHub/GitLab с Cloudflare Pages, **настройка не требуется**. При отправке в ваш репозиторий проект будет автоматически собран и развернут. @@ -83,8 +87,8 @@ export default defineNuxtConfig({ ::card --- icon: i-simple-icons-github - title: Nuxt Todos Edge - to: https://github.com/atinux/nuxt-todos-edge + title: Atidone + to: https://github.com/atinux/atidone target: _blank ui.icon.base: text-black dark:text-white --- @@ -103,6 +107,26 @@ export default defineNuxtConfig({ Редактируемый сайт с универсальным рендерингом на базе Cloudflare KV. :: + ::card + --- + icon: i-simple-icons-github + title: Atidraw + to: https://github.com/atinux/atidraw + target: _blank + ui.icon.base: text-black dark:text-white + --- + Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI. + :: + ::card + --- + icon: i-simple-icons-github + title: Nuxt Image Gallery + to: https://github.com/flosciante/nuxt-image-gallery + target: _blank + ui.icon.base: text-black dark:text-white + --- + An image gallery to upload, edit and share your images to the world, with Cloudflare R2. + :: :: ## Узнать больше diff --git a/content/3.deploy/github-pages.md b/content/3.deploy/github-pages.md index 4ac72bffb..c58f7d611 100644 --- a/content/3.deploy/github-pages.md +++ b/content/3.deploy/github-pages.md @@ -48,7 +48,7 @@ jobs: - run: npm install - run: npx nuxt build --preset github_pages - name: Upload artifact - uses: actions/upload-pages-artifact@v1 + uses: actions/upload-pages-artifact@v3 with: path: ./.output/public # Задание по развертыванию @@ -68,7 +68,7 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v1 + uses: actions/deploy-pages@v4 ``` ::read-more{to="https://nitro.unjs.io/deploy/providers/github-pages" target="_blank"} diff --git a/content/3.deploy/nuxthub.md b/content/3.deploy/nuxthub.md index 9f344fd89..2c82309b5 100644 --- a/content/3.deploy/nuxthub.md +++ b/content/3.deploy/nuxthub.md @@ -1,6 +1,6 @@ --- title: NuxtHub -description: 'Разверните свое full-stack приложение Nuxt на глобальных серверах вашего аккаунта Cloudflare.' +description: 'Разверните свое Nuxt приложение на глобальных серверах вашего аккаунта Cloudflare c нулевой конфигурацией.' componentImg: NuxtHub logoSrc: '/assets/integrations/nuxthub.svg' category: Хостинг @@ -15,31 +15,17 @@ website: 'https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page' Интеграция с NuxtHub возможна с нулевой конфигурацией, [узнать больше](https://nitro.unjs.io/deploy#zero-config-providers). :: -::note -NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. :br The main difference with the [Cloudflare](/deploy/cloudflare) deployment is that NuxtHub provides a zero-configuration deployment experience (provisioning, deployment, and administration). :br It also provides a powerful admin interface to manage your Nuxt projects (database, blob, KV, ...) as well as [remote storage](https://hub.nuxt.com/docs/getting-started/remote-storage?utm_source=nuxt-website&utm_medium=deploy-page). -:: - -## Быстрый старт - -- Войдите на сайт [admin.hub.nuxt.com](https://admin.hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page) -- Подключите свой аккаунт Cloudflare, нажав на `Создать новый токен с необходимыми правами` и следуйте инструкциям -- Теперь вы готовы развернуть ваш проект Nuxt на вашем аккаунте Cloudflare! +## Introduction -## Развертывание с помощью Git +NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. -1. Разместите код в своем git-репозитории (GitHub или GitLab). -2. Нажмите на `Новый проект`, затем `Импортировать Git-репозиторий`. -3. Выберите репозиторий и нажмите на `Импортировать репозиторий`. -4. NuxtHub настроит ваш проект на Cloudflare Pages и развернет его -5. Ваше приложение будет развернуто с доменом `.nuxt.dev`. +The main difference with the [Cloudflare](/deploy/cloudflare) deployment is that NuxtHub provides a zero-configuration deployment experience (provisioning, deployment, and administration). -После импорта и развертывания вашего проекта все последующие изменения в ветках будут генерировать предварительные развертывания, а все изменения, внесенные в продакшен ветку (обычно «main»), приведут к развертыванию на продакшен. +It also provides a powerful admin interface to manage your Nuxt projects (database, blob, KV, ...) as well as [remote storage](https://hub.nuxt.com/docs/getting-started/remote-storage?utm_source=nuxt-website&utm_medium=deploy-page). -### NuxtHub CLI +Read more on [hub.nuxt.com](https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=deploy-page). -::warning -Если вы выполните первое развертывание с помощью NuxtHub CLI, вы не сможете прикрепить свой репозиторий GitHub/GitLab в дальнейшем из-за ограничения Cloudflare. -:: +## NuxtHub CLI Вы можете развернуть свой локальный проект с помощью одной команды: @@ -55,31 +41,61 @@ npx nuxthub deploy 4. Разверните его на вашем аккаунте Cloudflare со всеми необходимыми ресурсами 5. Предоставьте вам URL-адрес для доступа к вашему проекту +See an example in video: + +::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.jpg" controls class="rounded dark:border dark:border-gray-700 md:w-2/3"} + :source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.webm" type="video/webm"} + :source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.mp4" type="video/mp4"} + :source{src="https://res.cloudinary.com/nuxt/video/upload/v1723569534/nuxthub/nuxthub-deploy_xxs5s8.ogg" type="video/ogg"} +:: + ::note Вы также можете установить [NuxtHub CLI](https://github.com/nuxt-hub/cli) глобально с помощью: `npm i -g nuxthub`. :: +::warning +If you do your first deployment with the NuxtHub CLI, you won't be able to attach your GitHub/GitLab repository later on due to a Cloudflare limitation. +:: + +## Deploy using Git + +1. Push your code to your git repository (GitHub or GitLab) +2. Click on `New Project` then `Import a Git repository` +3. Select your repository and click on `Import repository` +4. NuxtHub will configure your project on Cloudflare Pages and deploy it +5. Your application is deployed with a `.nuxt.dev` domain + +After your project has been imported and deployed, all subsequent pushes to branches will generate preview deployments and all changes made to the production branch (commonly “main”) will result in a production deployment. + ## Шаблоны ::card-group ::card --- - + icon: i-simple-icons-github + title: Hello Edge + to: https://github.com/nuxt-hub/hello-edge + target: _blank + ui.icon.base: text-black dark:text-white + --- + A minimal Nuxt starter running on the edge. + :: + ::card + --- icon: i-simple-icons-github title: NuxtHub Starter to: https://github.com/nuxt-hub/starter target: _blank ui.icon.base: text-black dark:text-white --- - - Минимальный стартовый набор для начала работы с хранилищем и функциями NuxtHub. + A starter to get started with NuxtHub features (Database, Blob, KV, ...). :: ::card --- icon: i-simple-icons-github - title: Nuxt Todos - to: https://github.com/atinux/nuxt-todos-edge + title: Atidone + to: https://github.com/atinux/atidone target: _blank ui.icon.base: text-black dark:text-white --- @@ -110,6 +126,16 @@ npx nuxthub deploy Редактируемый сайт на основе компонентов Markdown и Vue с динамической генерацией изображений OG. :: + ::card + --- + icon: i-simple-icons-github + title: Atidraw + to: https://github.com/atinux/atidraw + target: _blank + ui.icon.base: text-black dark:text-white + --- + Web application that lets you to draw and share your drawings with the world, with Cloudflare R2 & AI. + :: :: ::callout diff --git a/content/4.templates.yml b/content/4.templates.yml index ad4ae7827..8593cde5c 100644 --- a/content/4.templates.yml +++ b/content/4.templates.yml @@ -91,11 +91,16 @@ templates: demo: 'https://demos.creative-tim.com/nuxt-argon-dashboard-pro/?partner=120213' purchase: 'https://www.creative-tim.com/product/nuxt-argon-dashboard-pro?partner=120213' badge: 'Премиум' - - name: 'Nuxt Todos Edge' - slug: 'todos-edge' + - name: 'Atidone' + slug: 'atidone' description: 'Полноценное приложение с аутентификацией и базой данных SQLite.' - repo: 'atinux/nuxt-todos-edge' - demo: 'https://nuxt-todos-edge.pages.dev/' + repo: 'atinux/atidone' + demo: 'https://todos.nuxt.dev/' + - name: 'Atidraw' + slug: 'atidraw' + description: 'Web application that lets you to create, enhance, and share your drawings with the world.' + repo: 'atinux/atidraw' + demo: 'https://draw.nuxt.dev/' - name: 'Happy Paws' slug: 'happy-paws' description: 'Полноценное приложение для усыновления домашних животных с Nuxt SEO и Tailwind CSS.' diff --git a/content/7.blog/14.nuxt-on-the-edge.md b/content/7.blog/14.nuxt-on-the-edge.md index ff50bb214..6b5aa9890 100644 --- a/content/7.blog/14.nuxt-on-the-edge.md +++ b/content/7.blog/14.nuxt-on-the-edge.md @@ -89,7 +89,7 @@ In terms of developer experience, you will notice that when creating server file Furthermore, by leveraging Object Relational Mapping (ORM) like [drizzle-orm](https://orm.drizzle.team/), developers can connect Edge & Serverless databases such as [D1](https://developers.cloudflare.com/d1/), [Turso](https://turso.tech/), [Neon](https://neon.tech), [Planetscale](https://planetscale.com/) and more. -I created [Nuxt Todos Edge](https://nuxt-todos-edge.pages.dev/), an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at [atinux/nuxt-todos-edge](https://github.com/atinux/nuxt-todos-edge). +I created [Atidone](https://todos.nuxt.dev/), an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at [atinux/atidone](https://github.com/atinux/atidone). ## Conclusion diff --git a/content/7.blog/8.nuxt-static-improvements.md b/content/7.blog/8.nuxt-static-improvements.md index 7a9588aa0..81652e055 100644 --- a/content/7.blog/8.nuxt-static-improvements.md +++ b/content/7.blog/8.nuxt-static-improvements.md @@ -62,17 +62,14 @@ category: Релиз 1. Обновите `nuxt` до последней дополнительной версии, которой является v2.14. - ::code-group - - ```bash [Yarn] - yarn upgrade nuxt - ``` - - ```bash [NPM] - npm update - ``` - - :: +::package-managers +```bash [npm] +npm update +``` +```bash [yarn] +yarn upgrade nuxt +``` +:: 2. Убедитесь, что `target` имеет значение `static` в вашем `nuxt.config` diff --git a/nuxt.config.ts b/nuxt.config.ts index 2dc361541..da6f7ff07 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -133,7 +133,13 @@ export default defineNuxtConfig({ } } }, - + $production: { + image: { + ipx: { + baseURL: 'https://ipx.nuxt.com' + } + } + }, $development: { runtimeConfig: { public: { diff --git a/package.json b/package.json index f858f8631..fe76ff774 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,9 @@ "@nuxthq/studio": "^2.0.3", "@nuxtjs/html-validator": "^1.8.2", "@nuxtjs/plausible": "^1.0.0", - "@vueuse/components": "^10.11.0", - "@vueuse/core": "^10.11.0", - "@vueuse/nuxt": "^10.11.0", + "@vueuse/core": "^11.0.0", + "@vueuse/components": "^11.0.0", + "@vueuse/nuxt": "^11.0.0", "feed": "^4.2.2", "floating-vue": "^5.2.2", "nuxt": "^3.12.3", diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue index 795d0fc5b..843d8903b 100644 --- a/pages/blog/[slug].vue +++ b/pages/blog/[slug].vue @@ -83,7 +83,7 @@ const links = [