diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index dc80661327..c1426bed4c 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1936,6 +1936,23 @@ ], "disableCollapsible": false }, + { + "name": "Nuxt", + "path": "/recipes/nuxt", + "id": "nuxt", + "isExternal": false, + "children": [ + { + "name": "Deploying Nuxt applications to Vercel", + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "id": "deploy-nuxt-to-vercel", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "disableCollapsible": false + }, { "name": "Vite", "path": "/recipes/vite", @@ -3375,6 +3392,31 @@ "children": [], "disableCollapsible": false }, + { + "name": "Nuxt", + "path": "/recipes/nuxt", + "id": "nuxt", + "isExternal": false, + "children": [ + { + "name": "Deploying Nuxt applications to Vercel", + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "id": "deploy-nuxt-to-vercel", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "disableCollapsible": false + }, + { + "name": "Deploying Nuxt applications to Vercel", + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "id": "deploy-nuxt-to-vercel", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Vite", "path": "/recipes/vite", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index c9f8d0486e..732203b589 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2653,6 +2653,29 @@ "path": "/recipes/next", "tags": [] }, + { + "id": "nuxt", + "name": "Nuxt", + "description": "Nuxt related recipes", + "mediaImage": "", + "file": "", + "itemList": [ + { + "id": "deploy-nuxt-to-vercel", + "name": "Deploying Nuxt applications to Vercel", + "description": "A detailed guide on how to deploy Nuxt applications from Nx workspaces to Vercel.", + "mediaImage": "", + "file": "shared/recipes/deployment/deploy-nuxt-to-vercel", + "itemList": [], + "isExternal": false, + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "tags": [] + } + ], + "isExternal": false, + "path": "/recipes/nuxt", + "tags": [] + }, { "id": "vite", "name": "Vite", @@ -4625,6 +4648,40 @@ "path": "/recipes/next/next-config-setup", "tags": [] }, + "/recipes/nuxt": { + "id": "nuxt", + "name": "Nuxt", + "description": "Nuxt related recipes", + "mediaImage": "", + "file": "", + "itemList": [ + { + "id": "deploy-nuxt-to-vercel", + "name": "Deploying Nuxt applications to Vercel", + "description": "A detailed guide on how to deploy Nuxt applications from Nx workspaces to Vercel.", + "mediaImage": "", + "file": "shared/recipes/deployment/deploy-nuxt-to-vercel", + "itemList": [], + "isExternal": false, + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "tags": [] + } + ], + "isExternal": false, + "path": "/recipes/nuxt", + "tags": [] + }, + "/recipes/nuxt/deploy-nuxt-to-vercel": { + "id": "deploy-nuxt-to-vercel", + "name": "Deploying Nuxt applications to Vercel", + "description": "A detailed guide on how to deploy Nuxt applications from Nx workspaces to Vercel.", + "mediaImage": "", + "file": "shared/recipes/deployment/deploy-nuxt-to-vercel", + "itemList": [], + "isExternal": false, + "path": "/recipes/nuxt/deploy-nuxt-to-vercel", + "tags": [] + }, "/recipes/vite": { "id": "vite", "name": "Vite", diff --git a/docs/generated/packages/nuxt/documents/overview.md b/docs/generated/packages/nuxt/documents/overview.md index 0284b6abdc..c097353f30 100644 --- a/docs/generated/packages/nuxt/documents/overview.md +++ b/docs/generated/packages/nuxt/documents/overview.md @@ -50,3 +50,9 @@ pnpm install -D @nx/nuxt ```shell nx g @nx/nuxt:app my-app ``` + +### Deploy a Nuxt app + +Once you are ready to deploy your Nuxt application, you have absolute freedom to choose any hosting provider that fits your needs. + +We have detailed [how to deploy your Nuxt application to Vercel in a separate guide](/recipes/nuxt/deploy-nuxt-to-vercel). diff --git a/docs/map.json b/docs/map.json index 3171e93b7a..388752c559 100644 --- a/docs/map.json +++ b/docs/map.json @@ -842,6 +842,19 @@ } ] }, + { + "name": "Nuxt", + "id": "nuxt", + "description": "Nuxt related recipes", + "itemList": [ + { + "id": "deploy-nuxt-to-vercel", + "name": "Deploying Nuxt applications to Vercel", + "description": "A detailed guide on how to deploy Nuxt applications from Nx workspaces to Vercel.", + "file": "shared/recipes/deployment/deploy-nuxt-to-vercel" + } + ] + }, { "name": "Vite", "id": "vite", diff --git a/docs/shared/guides/nuxt-deploy-vercel-1.png b/docs/shared/guides/nuxt-deploy-vercel-1.png new file mode 100644 index 0000000000..2c9e1084b6 Binary files /dev/null and b/docs/shared/guides/nuxt-deploy-vercel-1.png differ diff --git a/docs/shared/guides/nuxt-deploy-vercel-2.png b/docs/shared/guides/nuxt-deploy-vercel-2.png new file mode 100644 index 0000000000..9cdd0b8128 Binary files /dev/null and b/docs/shared/guides/nuxt-deploy-vercel-2.png differ diff --git a/docs/shared/guides/nuxt-deploy-vercel-3.png b/docs/shared/guides/nuxt-deploy-vercel-3.png new file mode 100644 index 0000000000..98699559b8 Binary files /dev/null and b/docs/shared/guides/nuxt-deploy-vercel-3.png differ diff --git a/docs/shared/packages/nuxt/nuxt-plugin.md b/docs/shared/packages/nuxt/nuxt-plugin.md index 0284b6abdc..c097353f30 100644 --- a/docs/shared/packages/nuxt/nuxt-plugin.md +++ b/docs/shared/packages/nuxt/nuxt-plugin.md @@ -50,3 +50,9 @@ pnpm install -D @nx/nuxt ```shell nx g @nx/nuxt:app my-app ``` + +### Deploy a Nuxt app + +Once you are ready to deploy your Nuxt application, you have absolute freedom to choose any hosting provider that fits your needs. + +We have detailed [how to deploy your Nuxt application to Vercel in a separate guide](/recipes/nuxt/deploy-nuxt-to-vercel). diff --git a/docs/shared/recipes/deployment/deploy-nuxt-to-vercel.md b/docs/shared/recipes/deployment/deploy-nuxt-to-vercel.md new file mode 100644 index 0000000000..a6966654e7 --- /dev/null +++ b/docs/shared/recipes/deployment/deploy-nuxt-to-vercel.md @@ -0,0 +1,112 @@ +--- +title: Deploying Nuxt applications to Vercel +description: A detailed guide on how to deploy Nuxt applications from Nx workspaces to Vercel. +--- + +# Deploying Nuxt applications to Vercel + +## Configure your Nuxt application appropriately for Vercel deployment + +In your application's `nuxt.config.ts` file, ensure that the `nitro` property is configured to use the `vercel` preset, and that the `output.dir` property is set to the appropriate directory. The directory that Vercel expects to find the application's build output (as explained in the [Vercel documentation](https://vercel.com/docs/build-output-api/v3)) in is `.vercel/output` at the root of the repository/workspace. So, if your application is located at `apps/my-app` then the `output.dir` property should be set to `../../.vercel/output`. + +For example, if your Nx workspace is structured like this: + +```treeview +├── apps +│   └── my-app +│   ├── nuxt.config.ts +│   ├── src +│   ├── tsconfig.app.json +│   ├── tsconfig.json +│   ├── tsconfig.spec.json +├── nx.json +├── package-lock.json +├── package.json +└── tsconfig.base.json +``` + +Then your `nitro` configuration should look like this: + +```ts {% fileName="apps/my-app/nuxt.config.ts" %} + nitro: { + preset: 'vercel', + output:{ + dir: '../../.vercel/output' + } + }, +``` + +For Vercel deployment, it does not really matter what the `buildDir` property in your `nuxt.config.ts` is set to. + +So, your entire `nuxt.config.ts` file may look something like this: + +```ts {% fileName="apps/my-app/nuxt.config.ts" %} +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { defineNuxtConfig } from 'nuxt/config'; + +export default defineNuxtConfig({ + workspaceDir: '../../', + srcDir: 'src', + devtools: { enabled: true }, + buildDir: '../../dist/apps/my-app/.nuxt', + devServer: { + host: 'localhost', + port: 4200, + }, + typescript: { + typeCheck: true, + tsConfig: { + extends: './tsconfig.app.json', + }, + }, + imports: { + autoImport: false, + }, + css: ['~/assets/css/styles.css'], + vite: { + plugins: [nxViteTsPaths()], + }, + nitro: { + preset: 'vercel', + output: { + dir: '../../.vercel/output', + }, + }, +}); +``` + +## Configure your Vercel project's settings appropriately + +### New Vercel project + +1. If you are "importing" your Nx workspace's repository for the first time, make sure you do _not_ choose a root directory as part of the repo selection process (therefore leaving it to be the root of the full repo/workspace) +2. Ensure the Nuxt.js "Framework Preset" is selected +3. Expand the "Build & Development Settings" and toggle the override switch for the build command. For example, for an application named `my-app` the value will look like this: + +```shell +npx nx build my-app --prod +``` + +![New Vercel Project](/shared/guides/nuxt-deploy-vercel-1.png) + +### Existing Vercel project + +If you have an existing project on Vercel then the exact same guidance applies as for the section above, it's just that you will need to update the project's existing settings. + +When everything is updated appropriately, for our `my-app` example we would see the following in our "General" settings UI: + +![Existing Vercel Project](/shared/guides/nuxt-deploy-vercel-2.png) + +## Skipping build if the application is not affected + +One of the core features of Nx is to run code quality checks and builds only for projects that are affected by recent code changes. We can use [Vercel's ignored build step feature](https://vercel.com/docs/platform/projects#ignored-build-step) to only build our application if it is affected. + +To build only what's affected, use the `npx nx-ignore ` command under `Project Settings > Git` on Vercel. + +![Ignore build step](/shared/guides/nuxt-deploy-vercel-3.png) + +The `nx-ignore` command uses Nx to detect whether the current commit affects the specified app, and will skip the build if it is not affected. + +## Next steps + +Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Nuxt.js projects from Nx workspaces on Vercel! diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index bc6d38560a..0e7a8d15bf 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -138,6 +138,8 @@ - [Add and Deploy Netlify Edge Functions with Deno](/recipes/deno/deno-netlify-functions) - [Next](/recipes/next) - [How to configure Next.js plugins](/recipes/next/next-config-setup) + - [Nuxt](/recipes/nuxt) + - [Deploying Nuxt applications to Vercel](/recipes/nuxt/deploy-nuxt-to-vercel) - [Vite](/recipes/vite) - [Configure Vite on your Nx workspace](/recipes/vite/configure-vite) - [Webpack](/recipes/webpack)