diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 1a9f1e1970..2c97c5e1c0 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -4262,14 +4262,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Nuxt Project", - "path": "/showcase/example-repos/add-nuxt", - "id": "add-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add an Astro Project", "path": "/showcase/example-repos/add-astro", @@ -4278,14 +4270,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Vue Project", - "path": "/showcase/example-repos/add-vue", - "id": "add-vue", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add a Svelte Project", "path": "/showcase/example-repos/add-svelte", @@ -4451,14 +4435,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Nuxt Project", - "path": "/showcase/example-repos/add-nuxt", - "id": "add-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add an Astro Project", "path": "/showcase/example-repos/add-astro", @@ -4467,14 +4443,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Vue Project", - "path": "/showcase/example-repos/add-vue", - "id": "add-vue", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add a Svelte Project", "path": "/showcase/example-repos/add-svelte", @@ -4598,14 +4566,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Nuxt Project", - "path": "/showcase/example-repos/add-nuxt", - "id": "add-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add an Astro Project", "path": "/showcase/example-repos/add-astro", @@ -4614,14 +4574,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Add a Vue Project", - "path": "/showcase/example-repos/add-vue", - "id": "add-vue", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Add a Svelte Project", "path": "/showcase/example-repos/add-svelte", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index a31fcdab77..f6dce4ba6a 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -5838,17 +5838,6 @@ "path": "/showcase/example-repos/add-dotnet", "tags": [] }, - { - "id": "add-nuxt", - "name": "Add a Nuxt Project", - "description": "Add a nuxt project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-nuxt", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-nuxt", - "tags": [] - }, { "id": "add-astro", "name": "Add an Astro Project", @@ -5860,17 +5849,6 @@ "path": "/showcase/example-repos/add-astro", "tags": [] }, - { - "id": "add-vue", - "name": "Add a Vue Project", - "description": "Add a Vue project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-vue", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-vue", - "tags": [] - }, { "id": "add-svelte", "name": "Add a Svelte Project", @@ -6098,17 +6076,6 @@ "path": "/showcase/example-repos/add-dotnet", "tags": [] }, - { - "id": "add-nuxt", - "name": "Add a Nuxt Project", - "description": "Add a nuxt project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-nuxt", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-nuxt", - "tags": [] - }, { "id": "add-astro", "name": "Add an Astro Project", @@ -6120,17 +6087,6 @@ "path": "/showcase/example-repos/add-astro", "tags": [] }, - { - "id": "add-vue", - "name": "Add a Vue Project", - "description": "Add a Vue project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-vue", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-vue", - "tags": [] - }, { "id": "add-svelte", "name": "Add a Svelte Project", @@ -6301,17 +6257,6 @@ "path": "/showcase/example-repos/add-dotnet", "tags": [] }, - "/showcase/example-repos/add-nuxt": { - "id": "add-nuxt", - "name": "Add a Nuxt Project", - "description": "Add a nuxt project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-nuxt", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-nuxt", - "tags": [] - }, "/showcase/example-repos/add-astro": { "id": "add-astro", "name": "Add an Astro Project", @@ -6323,17 +6268,6 @@ "path": "/showcase/example-repos/add-astro", "tags": [] }, - "/showcase/example-repos/add-vue": { - "id": "add-vue", - "name": "Add a Vue Project", - "description": "Add a Vue project to your repo", - "mediaImage": "", - "file": "shared/recipes/add-stack/add-vue", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/add-vue", - "tags": [] - }, "/showcase/example-repos/add-svelte": { "id": "add-svelte", "name": "Add a Svelte Project", diff --git a/docs/map.json b/docs/map.json index 4824c9a96c..0c9f3cff2d 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1224,24 +1224,12 @@ "description": "Add a .NET project to your repo", "file": "shared/recipes/add-stack/add-dotnet" }, - { - "name": "Add a Nuxt Project", - "id": "add-nuxt", - "description": "Add a nuxt project to your repo", - "file": "shared/recipes/add-stack/add-nuxt" - }, { "name": "Add an Astro Project", "id": "add-astro", "description": "Add Nx to an Astro project", "file": "shared/recipes/add-stack/add-astro" }, - { - "name": "Add a Vue Project", - "id": "add-vue", - "description": "Add a Vue project to your repo", - "file": "shared/recipes/add-stack/add-vue" - }, { "name": "Add a Svelte Project", "id": "add-svelte", diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index 46e2670227..d9d6defa2c 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -60,7 +60,7 @@ npx create-nx-workspace@latest {% link-card title="Express" appearance="small" url="/nx-api/express" icon="express" /%} {% link-card title="Vue" appearance="small" url="/nx-api/vue" icon="vue" /%} {% link-card title="Next" appearance="small" url="/nx-api/next" icon="nextjs" /%} -{% link-card title="Nuxt" appearance="small" url="/showcase/example-repos/add-nuxt" icon="nuxt" /%} +{% link-card title="Nuxt" appearance="small" url="/nx-api/nuxt" icon="nuxt" /%} {% link-card title="Nest" appearance="small" url="/nx-api/nest" icon="nestjs" /%} {% link-card title="Remix" appearance="small" url="/nx-api/remix" icon="remix" /%} {% link-card title="Expo" appearance="small" url="/nx-api/expo" icon="expo" /%} diff --git a/docs/shared/recipes/add-stack/add-nuxt.md b/docs/shared/recipes/add-stack/add-nuxt.md deleted file mode 100644 index 52daa2a676..0000000000 --- a/docs/shared/recipes/add-stack/add-nuxt.md +++ /dev/null @@ -1,143 +0,0 @@ -# Add a Nuxt Project - -The code for this example is available on GitHub: - -{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/nuxt-integrated" /%} - -**Supported Features** - -Because we are not using an Nx plugin for Nuxt, there are few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Nuxt-specific code generators. And we'll have to take care of updating any framework dependencies as needed. - -{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %} -{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %} -{% pill url="/ci/features/remote-cache" %}✅ Remote Caching{% /pill %} -{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %} -{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} -{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %} -{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} -{% pill url="/recipes/enforce-module-boundaries" %}✅ Enforce Project Boundaries{% /pill %} -{% pill url="/core-features/plugin-features/use-task-executors" %}🚫 Use Task Executors{% /pill %} -{% pill url="/core-features/plugin-features/use-code-generators" %}🚫 Use Code Generators{% /pill %} -{% pill url="/core-features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %} - -## Create Nuxt App - -Using `nuxi init`, `cd` to the directory above where you want the app folder to live and run - -```shell -npx nuxi@latest init -``` - -Tell Nx how to cache the build with the `nx` key in the `package.json`. -You'll also want to move the dependencies/devDependencies from the project level `package.json` to the top level `package.json` to help maintain a [single version policy](/concepts/more-concepts/dependency-management#single-version-policy). - -```json {% fileName="apps//package.json" %} -{ - "name": "", - "scripts": {/***/} - "nx": { - "targets": { - "build": { - "outputs": ["{projectRoot}/.output", "{projectRoot}/.nuxt"] - } - } - } -} -``` - -Make sure to ignore the Nuxt specific folders from git in the top level `.gitignore` file. This is so Nx doesn't treat those output folders as inputs into the cache calculations. - -```.gitignore {% fileName=".gitignore"} -# Nuxt dev/build outputs -.output -.nuxt -.nitro -.cache -dist -``` - -### Project Aliases - -Tell Nuxt how to use existing TS Paths defined in the `tsconfig.base.json` via the `alias` field in the `nuxt.config.ts` file. - -> Nuxt [generates a tsconfig](https://nuxt.com/docs/guide/directory-structure/tsconfig) with these aliases as TS Paths - -```ts {% fileName="apps//nuxt.config.ts" %} -import { defineNuxtConfig } from 'nuxt/config'; -import { join } from 'path'; -import { workspaceRoot } from '@nx/devkit'; - -/** - * read the compilerOptions.paths option from a tsconfig and return as aliases for Nuxt - **/ -function getMonorepoTsConfigPaths(tsConfigPath: string) { - const tsPaths = require(tsConfigPath)?.compilerOptions?.paths as Record< - string, - string[] - >; - - const alias: Record = {}; - if (tsPaths) { - for (const p in tsPaths) { - // '@org/something/*': ['libs/something/src/*'] => '@org/something': '{pathToWorkspaceRoot}/libs/something/src' - alias[p.replace(/\/\*$/, '')] = join( - workspaceRoot, - tsPaths[p][0].replace(/\/\*$/, '') - ); - } - } - - return alias; -} - -export default defineNuxtConfig({ - /** - * aliases set here will be added to the auto generate tsconfig by Nuxt - * https://nuxt.com/docs/guide/directory-structure/tsconfig - **/ - alias: getMonorepoTsConfigPaths('../../tsconfig.base.json'), - devtools: { enabled: true }, -}); -``` - -### Setup Project Graph - -Since Nx doesn't understand `.vue` files, you can use [`tags`](https://nx.dev/reference/project-configuration#tags) with [`implicitDependencies`](https://nx.dev/reference/project-configuration#implicitdependencies) to define links between projects in the project graph. - -In the projects that are imported via `.vue` files, you can add the `scope:` tag in the `project.json`. - -```json {% fileName="libs/ui/project.json} -{ - "tags": ["scope:"] -} -``` - -And in the top level Nuxt application, you can set the `implicitdependencies` to the `scope:` tag. - -```json {% fileName="apps//package.json %} - -{ - "name": "", - "scripts": {/***/} - "nx": { - "tags": ["scope:"], - "implicitDependencies": ["tag:scope:"] - } -} -``` - -This will make it so all projects tagged with `scope:`, will be dependents of the Nuxt app. - -### Re-export Vue files - -TypeScript might give errors about not understanding how to export a `.vue` file. - -```ts {% fileName="libs/ui/src/index.ts} -export * from './lib/btn.vue'; -``` - -In those cases you can create a `d.ts` file, saying `.vue` files are allowed to export in `.ts` files. - -```ts {% fileName="libs/ui/src/vue-shim.d.ts" %} -declare module '*.vue'; -``` diff --git a/docs/shared/recipes/add-stack/add-vue.md b/docs/shared/recipes/add-stack/add-vue.md deleted file mode 100644 index 65cb9b6584..0000000000 --- a/docs/shared/recipes/add-stack/add-vue.md +++ /dev/null @@ -1,308 +0,0 @@ -# Add a Vue Project - -The code for this example is available on GitHub: - -{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/vue" /%} - -{% callout title="Official Vue Plugin" %} -This recipe does not use the official Vue plugin, so it doesn't use generators or automate updating framework dependencies. Use [`@nx/vue`](/nx-api/vue) to use those features. -{% /callout %} - -**Supported Features** - -We'll be using an Nx plugin called [@nx/vite](/nx-api/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed. - -{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %} -{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %} -{% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %} -{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %} -{% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} -{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %} -{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} -{% pill url="/core-features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %} -{% pill url="/core-features/plugin-features/use-task-executors" %}✅ Use Task Executors{% /pill %} -{% pill url="/core-features/plugin-features/use-code-generators" %}🚫 Use Code Generators{% /pill %} -{% pill url="/core-features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %} - -## Setup workspace - -**Create a new Nx workspace** - -```shell -create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=true -``` - -**Add @nx/vite, vue, and other dependencies to your workspace** - -{% callout type="note" title="Keep Nx Package Versions In Sync" %} -Make sure to install the `@nx/vite` and `@nx/js` versions that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). -{% /callout %} - -{% tabs %} -{%tab label="npm"%} - -```shell -npm install --save-dev @nx/vite @nx/js vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx -``` - -{% /tab %} -{%tab label="yarn"%} - -```shell -yarn add --dev @nx/vite @nx/js vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx -``` - -{% /tab %} -{%tab label="pnpm"%} - -```shell -pnpm add --dev @nx/vite @nx/js vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx -``` - -{% /tab %} -{% /tabs %} - -## Create the application - -```shell -touch index.html -``` - -And add the following content: - -```html - - - - - Acme - - - - - -
- - - -``` - -Navigate to `src/index.ts` and change it to `src/main.ts` and add the following content: - -```ts -import { createApp } from 'vue'; -import App from './App.vue'; - -createApp(App).mount('#app'); -``` - -Create a new file `src/App.vue` with the following content: - -```ts - - -``` - -## Configure Nx to use build and serve your Vue application - -Navigate to `vite.config.ts` and add the following content: - -```ts -// Add this to your imports -import vue from '@vitejs/plugin-vue'; -import vueJsx from '@vitejs/plugin-vue-jsx'; - -export default defineConfig({ - plugins: [ - //.... other plugins - vue(), - vueJsx(), - ], -}); -``` - -Create a new file `env.d.ts` for example at the root of the project and add the following content: - -```ts -/// -/* eslint-disable */ -declare module '*.vue' { - import type { DefineComponent } from 'vue'; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const component: DefineComponent; - export default component; -} -``` - -We need this file to ensure that Vue types are available to the compiler. - -Update your `tsconfig.lib.json` to be `tsconfig.app.json` an add the following content: - -```json -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "dist/out-tsc", - "types": ["node", "vite/client"], - "jsxImportSource": "vue" - }, - "files": [], - "exclude": [ - "src/**/*.spec.ts", - "src/**/*.test.ts", - "src/**/*.spec.tsx", - "src/**/*.test.tsx", - "src/**/*.spec.js", - "src/**/*.test.js", - "src/**/*.spec.jsx", - "src/**/*.test.jsx" - ], - "include": [ - "src/**/*.ts", - "src/**/*.d.ts", - "src/**/*.tsx", - "**/*.vue", - "vite.config.ts", - "env.d.ts" - ] -} -``` - -We include `vite.config.ts` and `env.d.ts` to ensure that the types are available to the compiler. - -Navigate to `project.json` and update it with the following content: - -```json - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "defaultConfiguration": "production", - "options": { - "outputPath": "dist/acme" - }, - "configurations": { - "development": { - "mode": "development" - }, - "production": { - "mode": "production" - } - } - }, - "serve": { - "executor": "@nx/vite:dev-server", - "defaultConfiguration": "development", - "options": { - "buildTarget": "acme:build" - }, - "configurations": { - "development": { - "buildTarget": "acme:build:development", - "hmr": true - }, - "production": { - "buildTarget": "acme:build:production", - "hmr": false - } - } - }, -``` - -This allows us to use `nx build` and `nx serve` to build and serve our Vue application. - -Test it out - -**Build** - -```shell -nx build acme -``` - -**Serve** - -```shell -nx serve acme -``` - -## Create a library - -Instead of having our Counter directly defined in the app we can instead create a library that exports the Counter component. - -{% callout type="note" title="Directory Flag Behavior Changes" %} -The command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, omit the `--directory` flag. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details. -{% /callout %} - -Create a new library `nx generate @nx/js:library --name=Counter --directory=libs/counter --unitTestRunner=vitest --bundler=vite --importPath=@acme/counter` - -Create your Counter component at `counter/src/lib/Counter.vue` and copy the contents of your `src/App.vue` into it. - -Update your `libs/counter/src/lib/index.ts` to export your Counter component. - -```ts -export { default as Counter } from './Counter.vue'; -``` - -{% callout type="Note" %} -The `default` is very important here as it allows us to import the component using `import { Counter } from '@acme/counter'` instead of `import Counter from '@acme/counter'`. -{% /callout %} - -Update your root `./vite.config.ts` to include the following: - -```ts -export default defineConfig({ - //... other config - resolve: { - alias: { - '@acme/counter': fileURLToPath( - new URL('./counter/src/index.ts', import.meta.url) - ), - }, - }, -}); -``` - -This allows the runtime to resolve the `@acme/counter` import to the correct location. - -Finally update your `src/App.vue` to use the Counter component. - -```ts - - -``` - -Test it out - -**Build** - -```shell -nx build acme -``` - -**Serve** - -```shell -nx serve acme -``` - -## More Documentation - -A larger example including libraries, tests, and more is available at [Nx Vue Example](https://github.com/nrwl/nx-recipes/tree/main/vue) on GitHub. - -- [Nx Vite Plugin](/nx-api/vite) -- [Vite](https://vitejs.dev/) -- [Vue](https://v3.vuejs.org/) diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index d0d64488a6..363a67e955 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -201,9 +201,7 @@ - [Add a Qwik Project](/showcase/example-repos/add-qwik) - [Add a Rust Project](/showcase/example-repos/add-rust) - [Add a .NET Project](/showcase/example-repos/add-dotnet) - - [Add a Nuxt Project](/showcase/example-repos/add-nuxt) - [Add an Astro Project](/showcase/example-repos/add-astro) - - [Add a Vue Project](/showcase/example-repos/add-vue) - [Add a Svelte Project](/showcase/example-repos/add-svelte) - [Add a Fastify Project](/showcase/example-repos/add-fastify) - [Using Apollo GraphQL](/showcase/example-repos/apollo-react) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index c7bd41bdc2..fd87edd976 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -386,6 +386,8 @@ const recipesUrls = { '/recipes/webpack/webpack-plugins', '/packages/webpack/documents/webpack-config-setup': '/recipes/webpack/webpack-config-setup', + '/showcase/example-repos/add-nuxt': '/nx-api/nuxt', + '/showcase/example-repos/add-vue': '/nx-api/vue', }; /**