miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(core): Add vue documentation for nx-recipe (#18556)

Browse Source
This commit is contained in:
Nicholas Cunningham 2023-08-10 06:20:05 -06:00 committed by GitHub
parent aa9eaa7c0c
commit d0f64cd892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 283 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/generated/manifests/menus.json
View File

@ -3631,6 +3631,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Add a Vue Project",
"path": "/showcase/example-repos/add-vue",
"id": "add-vue",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",
@ -3755,6 +3763,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Add a Vue Project",
"path": "/showcase/example-repos/add-vue",
"id": "add-vue",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",
@ -3870,6 +3886,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Add a Vue Project",
"path": "/showcase/example-repos/add-vue",
"id": "add-vue",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Powering Up React Development With Nx",
"path": "/showcase/example-repos/react-nx",

30
docs/generated/manifests/nx.json
View File

@ -4527,6 +4527,16 @@
"path": "/showcase/example-repos/add-astro",
"tags": []
},
{
"id": "add-vue",
"name": "Add a Vue Project",
"description": "Add a Vue project to your repo",
"file": "shared/recipes/add-stack/add-vue",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-vue",
"tags": []
},
{
"id": "react-nx",
"name": "Powering Up React Development With Nx",
@ -4683,6 +4693,16 @@
"path": "/showcase/example-repos/add-astro",
"tags": []
},
{
"id": "add-vue",
"name": "Add a Vue Project",
"description": "Add a Vue project to your repo",
"file": "shared/recipes/add-stack/add-vue",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-vue",
"tags": []
},
{
"id": "react-nx",
"name": "Powering Up React Development With Nx",
@ -4828,6 +4848,16 @@
"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",
"file": "shared/recipes/add-stack/add-vue",
"itemList": [],
"isExternal": false,
"path": "/showcase/example-repos/add-vue",
"tags": []
},
"/showcase/example-repos/react-nx": {
"id": "react-nx",
"name": "Powering Up React Development With Nx",

6
docs/map.json
View File

@ -1052,6 +1052,12 @@
"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": "Powering Up React Development With Nx",
"id": "react-nx",

222
docs/shared/recipes/add-stack/add-vue.md Normal file
View File

@ -0,0 +1,222 @@
# 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" /%}
**Supported Features**
We'll be using an Nx plugin for Vue called [@nx/vite](https://nx.dev/packages/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="/core-features/remote-cache" %}✅ Share Your Cache{% /pill %}
{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %}
{% pill url="/core-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**
{% tabs %}
{%tab label="npm"%}
```shell
npm install --save-dev @nx/vite 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 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 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:
```vue
<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
1. 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(),
],
});
```
2. 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.
3. 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.
4. 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/test-vue"
},
"configurations": {
"development": {
"mode": "development"
},
"production": {
"mode": "production"
}
}
},
"serve": {
"executor": "@nx/vite:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "test-vue:build"
},
"configurations": {
"development": {
"buildTarget": "test-vue:build:development",
"hmr": true
},
"production": {
"buildTarget": "test-vue:build:production",
"hmr": false
}
}
},
```
This allows us to use `nx build` and `nx serve` to build and serve our Vue application.
## 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](https://nx.dev/latest/vue/vite/overview)
- [Vite](https://vitejs.dev/)
- [Vue](https://v3.vuejs.org/)

1
docs/shared/reference/sitemap.md
View File

@ -180,6 +180,7 @@
- [Add a Solid Project](/showcase/example-repos/add-solid)
- [Add a Qwik Project](/showcase/example-repos/add-qwik)
- [Add an Astro Project](/showcase/example-repos/add-astro)
- [Add a Vue Project](/showcase/example-repos/add-vue)
- [Powering Up React Development With Nx](/showcase/example-repos/react-nx)
- [Using Apollo GraphQL](/showcase/example-repos/apollo-react)
- [Using Prisma with NestJS](/showcase/example-repos/nestjs-prisma)