docs(vue): remove showcase for vue and nuxt (#21145)
This commit is contained in:
Katerina Skroumpelou
GitHub
parent
fb8bd760df
commit
db1dfbd473
@ -4262,14 +4262,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add an Astro Project",
|
||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
@ -4278,14 +4270,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add a Svelte Project",
|
||||||
"path": "/showcase/example-repos/add-svelte",
|
"path": "/showcase/example-repos/add-svelte",
|
||||||
@ -4451,14 +4435,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add an Astro Project",
|
||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
@ -4467,14 +4443,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add a Svelte Project",
|
||||||
"path": "/showcase/example-repos/add-svelte",
|
"path": "/showcase/example-repos/add-svelte",
|
||||||
@ -4598,14 +4566,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add an Astro Project",
|
||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
@ -4614,14 +4574,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"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",
|
"name": "Add a Svelte Project",
|
||||||
"path": "/showcase/example-repos/add-svelte",
|
"path": "/showcase/example-repos/add-svelte",
|
||||||
|
|||||||
@ -5838,17 +5838,6 @@
|
|||||||
"path": "/showcase/example-repos/add-dotnet",
|
"path": "/showcase/example-repos/add-dotnet",
|
||||||
"tags": []
|
"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",
|
"id": "add-astro",
|
||||||
"name": "Add an Astro Project",
|
"name": "Add an Astro Project",
|
||||||
@ -5860,17 +5849,6 @@
|
|||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
"tags": []
|
"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",
|
"id": "add-svelte",
|
||||||
"name": "Add a Svelte Project",
|
"name": "Add a Svelte Project",
|
||||||
@ -6098,17 +6076,6 @@
|
|||||||
"path": "/showcase/example-repos/add-dotnet",
|
"path": "/showcase/example-repos/add-dotnet",
|
||||||
"tags": []
|
"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",
|
"id": "add-astro",
|
||||||
"name": "Add an Astro Project",
|
"name": "Add an Astro Project",
|
||||||
@ -6120,17 +6087,6 @@
|
|||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
"tags": []
|
"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",
|
"id": "add-svelte",
|
||||||
"name": "Add a Svelte Project",
|
"name": "Add a Svelte Project",
|
||||||
@ -6301,17 +6257,6 @@
|
|||||||
"path": "/showcase/example-repos/add-dotnet",
|
"path": "/showcase/example-repos/add-dotnet",
|
||||||
"tags": []
|
"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": {
|
"/showcase/example-repos/add-astro": {
|
||||||
"id": "add-astro",
|
"id": "add-astro",
|
||||||
"name": "Add an Astro Project",
|
"name": "Add an Astro Project",
|
||||||
@ -6323,17 +6268,6 @@
|
|||||||
"path": "/showcase/example-repos/add-astro",
|
"path": "/showcase/example-repos/add-astro",
|
||||||
"tags": []
|
"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": {
|
"/showcase/example-repos/add-svelte": {
|
||||||
"id": "add-svelte",
|
"id": "add-svelte",
|
||||||
"name": "Add a Svelte Project",
|
"name": "Add a Svelte Project",
|
||||||
|
|||||||
@ -1224,24 +1224,12 @@
|
|||||||
"description": "Add a .NET project to your repo",
|
"description": "Add a .NET project to your repo",
|
||||||
"file": "shared/recipes/add-stack/add-dotnet"
|
"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",
|
"name": "Add an Astro Project",
|
||||||
"id": "add-astro",
|
"id": "add-astro",
|
||||||
"description": "Add Nx to an Astro project",
|
"description": "Add Nx to an Astro project",
|
||||||
"file": "shared/recipes/add-stack/add-astro"
|
"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",
|
"name": "Add a Svelte Project",
|
||||||
"id": "add-svelte",
|
"id": "add-svelte",
|
||||||
|
|||||||
@ -60,7 +60,7 @@ npx create-nx-workspace@latest
|
|||||||
{% link-card title="Express" appearance="small" url="/nx-api/express" icon="express" /%}
|
{% 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="Vue" appearance="small" url="/nx-api/vue" icon="vue" /%}
|
||||||
{% link-card title="Next" appearance="small" url="/nx-api/next" icon="nextjs" /%}
|
{% 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="Nest" appearance="small" url="/nx-api/nest" icon="nestjs" /%}
|
||||||
{% link-card title="Remix" appearance="small" url="/nx-api/remix" icon="remix" /%}
|
{% link-card title="Remix" appearance="small" url="/nx-api/remix" icon="remix" /%}
|
||||||
{% link-card title="Expo" appearance="small" url="/nx-api/expo" icon="expo" /%}
|
{% link-card title="Expo" appearance="small" url="/nx-api/expo" icon="expo" /%}
|
||||||
|
|||||||
@ -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 <app-name>
|
|
||||||
```
|
|
||||||
|
|
||||||
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/<app-name>/package.json" %}
|
|
||||||
{
|
|
||||||
"name": "<app-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/<app-name>/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<string, string> = {};
|
|
||||||
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:<app-name>` tag in the `project.json`.
|
|
||||||
|
|
||||||
```json {% fileName="libs/ui/project.json}
|
|
||||||
{
|
|
||||||
"tags": ["scope:<app-name>"]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
And in the top level Nuxt application, you can set the `implicitdependencies` to the `scope:<app-name>` tag.
|
|
||||||
|
|
||||||
```json {% fileName="apps/<app-name>/package.json %}
|
|
||||||
|
|
||||||
{
|
|
||||||
"name": "<app-name>",
|
|
||||||
"scripts": {/***/}
|
|
||||||
"nx": {
|
|
||||||
"tags": ["scope:<app-name>"],
|
|
||||||
"implicitDependencies": ["tag:scope:<app-name>"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
This will make it so all projects tagged with `scope:<app-name>`, 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';
|
|
||||||
```
|
|
||||||
@ -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
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Acme</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="./src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
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
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const count = ref(0);
|
|
||||||
|
|
||||||
function increment() {
|
|
||||||
count.value++;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>count is {{ count }}</div>
|
|
||||||
<button @click="increment">Increment</button>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
|
||||||
/// <reference types="vite/client" />
|
|
||||||
/* eslint-disable */
|
|
||||||
declare module '*.vue' {
|
|
||||||
import type { DefineComponent } from 'vue';
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
const component: DefineComponent<object, object, any>;
|
|
||||||
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
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Counter } from '@acme/counter';
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<Counter />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
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/)
|
|
||||||
@ -201,9 +201,7 @@
|
|||||||
- [Add a Qwik Project](/showcase/example-repos/add-qwik)
|
- [Add a Qwik Project](/showcase/example-repos/add-qwik)
|
||||||
- [Add a Rust Project](/showcase/example-repos/add-rust)
|
- [Add a Rust Project](/showcase/example-repos/add-rust)
|
||||||
- [Add a .NET Project](/showcase/example-repos/add-dotnet)
|
- [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 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 Svelte Project](/showcase/example-repos/add-svelte)
|
||||||
- [Add a Fastify Project](/showcase/example-repos/add-fastify)
|
- [Add a Fastify Project](/showcase/example-repos/add-fastify)
|
||||||
- [Using Apollo GraphQL](/showcase/example-repos/apollo-react)
|
- [Using Apollo GraphQL](/showcase/example-repos/apollo-react)
|
||||||
|
|||||||
@ -386,6 +386,8 @@ const recipesUrls = {
|
|||||||
'/recipes/webpack/webpack-plugins',
|
'/recipes/webpack/webpack-plugins',
|
||||||
'/packages/webpack/documents/webpack-config-setup':
|
'/packages/webpack/documents/webpack-config-setup':
|
||||||
'/recipes/webpack/webpack-config-setup',
|
'/recipes/webpack/webpack-config-setup',
|
||||||
|
'/showcase/example-repos/add-nuxt': '/nx-api/nuxt',
|
||||||
|
'/showcase/example-repos/add-vue': '/nx-api/vue',
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user