\n\n## Table of contents\n\n- [Overview](#overview)\n- [Plugin Usage](#plugin-usage)\n - [Install](#install)\n - [Generate App](#generate-app)\n - [Serve](#serve)\n- [Vue3 Generators](#vue3-generators)\n - [Application](#application)\n - [Component](#component)\n - [Library](#library)\n - [Vitepress Docs](#vitepress-docs)\n - [Cypress](#cypress)\n- [Vue3 Executors](#vue3-executors)\n - [Dev Server](#dev-server)\n - [Docs Dev Server](#docs-dev-server)\n - [Preview Server](#preview-server)\n - [Build](#build)\n - [Docs Build](#docs-build)\n - [Lint](#lint)\n - [Unit Testing](#unit-testing)\n - [Cypress E2E](#cypress-e2e)\n- [Workarounds](#workarounds)\n - [dep-graph hack](#dep-graph-hack)\n - [vue3-jest](#vue3-jest)\n - [vite-jest](#vite-jest)\n\n## Features\n\n- Vue3+Vite+Postcss project generation\n- Vue3+Vite+Postcss library generation\n- Component generation for projects/libraries\n- [Vitepress](https://github.com/vuejs/vitepress) docs project generation\n\n## Overview\n\nThe intent of this plugin is to help generate a Vue3 related projects and components for Nx. The recommended configuration and folder structures are used where possible in order to integrate smoothly. Some path aliases are provided for convenience:\n\n- `@app` => `/src/app`\n- `@assets` => `/src/assets`\n- `@public` => `/src/public`\n\n> :warning: These project-local path aliases may be removed once this issue is resolved: https://github.com/samatechtw/nx-vue3-vite/issues/35\n\nOne compromise made is keeping `index.html` in the root folder. Vite strongly suggests this, since it treats `index.html` as the entry point and requires some configuration to change it.\n\n## Plugin Usage\n\nThe following steps assume you are working within an existing Nx workspace. To create one, run `npx create-nx-workspace@latest` ([docs](https://nx.dev/getting-started/nx-setup))\n\n### Install\n\n**npm**\n\n```bash\nnpm install nx-vue3-vite --save-dev\n```\n\n### Generate App\n\n```bash\nnx g nx-vue3-vite:app \n```\n\n### Serve\n\n```bash\nnx serve \n```\n\n### Recommended VSCode extensions\n\nThis plugin adds a few recommended extensions to VSCode. To install them, open VSCode and:\n\n- Open the command palette `[CMD] + [Shift] + [p]` and type \"Show Recommended Extensions\"\n\n- Review and install extensions under \"WORKSPACE RECOMMENDATIONS\"\n\n## Vue3 Generators\n\n([NX Docs](https://nx.dev/latest/angular/executors/using-builders))\n\n### Application\n\n```\nnx g nx-vue3-vite:app [options]\n```\n\n| Arguments | Description |\n| --------- | ----------------------------- |\n| app-name | The name of the generated app |\n\n| Options | Default | Description |\n| ----------- | ------- | ---------------------------------------------------------------------------------------- |\n| --title | - | Project title, defaults to |\n| --tags | - | Comma delimited tags for linting |\n| --directory | apps | Workspace directory to place the Vue project |\n| --alias | global | Whether to use local (project tsconfig) or global (root tsconfig.base.json) path aliases |\n| --test | vitest | The testing framework of the project |\n\n### Component\n\n```\nnx g nx-vue3-vite:component [options]\n\n# Alias\nnx g nx-vue3-vite:c [options]\n```\n\n| Arguments | Description |\n| --------- | -------------------------- |\n| name | The name of the component. |\n\n| Options | Default | Description |\n| ----------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| --project | - | The name of the project. |\n| --directory | `app/components` for applications, and `lib` for libraries | Directory relative to `src` where the component will be generated |\n| --lang | ts | Script language: ['ts', 'js'] |\n| --setup | true | [Script setup](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) syntax sugar |\n| --style | postcss | CSS Preprocessor: ['css', 'scss', 'less', 'stylus', 'postcss'] |\n| --scoped | false | Whether the component's style block is scoped |\n\n### Library\n\n```\nnx g nx-vue3-vite:library [options]\n```\n\n| Arguments | Description |\n| --------- | --------------------------------- |\n| lib-name | The name of the generated library |\n\n| Options | Default | Description |\n| ----------- | ------- | -------------------------------------------- |\n| --tags | - | Comma delimited tags for linting |\n| --directory | - | Workspace directory to place the Vue library |\n| --test | vitest | The testing framework of the project |\n\n### Vitepress Docs\n\n```\nnx g nx-vue3-vite:docs [options]\n```\n\n| Arguments | Description |\n| --------- | ---------------------------------- |\n| app-name | The name of the generated docs app |\n\n| Options | Default | Description |\n| ----------- | ------- | ----------------------------------------------- |\n| --title | - | Docs title, defaults to |\n| --tags | - | Comma delimited tags for linting |\n| --directory | apps | Workspace directory to place the Vitepress docs |\n\n### Cypress\n\nGenerate a Cypress e2e app targeting an application generated with `nx-vue3-vite:app`\n\n```\nnx g nx-vue3-vite:cypress --project [options]\n```\n\n| Arguments | Description |\n| --------- | -------------------------------------------------------------------------------------------------------------------------- |\n| app-name | Optional name for the e2e app. You can provide the `project` option instead, which results in an app named `-e2e` |\n\nMany Cypress options are available, which you can check [here](src/generators/cypress/schema.json)\n\n| Options | Default | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------- |\n| --project | - | Existing project name to generate e2e testing for |\n| --tags | - | Comma delimited tags for linting |\n| --directory | apps | Workspace directory to place the app |\n| headlessWatch | false | Only valid in headless mode. If true, Cypress will watch for code changes instead of exiting |\n| headlessCI | true | If env var CI=true, set `headless=true` and `headlessWatch=false` |\n\n## Vue3 Executors\n\n([NX Docs](https://nx.dev/latest/angular/generators/using-schematics))\n\n### Dev Server\n\nDevelopment server executor for generated Vue3 projects.\n\n```\nnx serve [options]\n```\n\n| Arguments | Description |\n| --------- | -------------------- |\n| app-name | The name of your app |\n\n| Options | Default | Description |\n| ------- | --------- | ---------------------------------------------------------------- |\n| --host | localhost | [Server host location](https://vitejs.dev/config/#server-host) |\n| --port | 3000 | [Server port](https://vitejs.dev/config/#server-port) |\n| --https | false | [Run in HTTPS/SSL mode](https://vitejs.dev/config/#server-https) |\n\n### Docs Dev Server\n\nDevelopment server executor for generated Vitepress docs projects.\n\n```\nnx serve [options]\n```\n\n| Arguments | Description |\n| --------- | ----------------------------- |\n| app-name | The name of the Vitepress app |\n\n| Options | Default | Description |\n| ------- | --------- | ---------------------------------------------------------------- |\n| --root | docs | Vitepress docs root, relative to the app root |\n| --host | localhost | [Server host location](https://vitejs.dev/config/#server-host) |\n| --port | 3000 | [Server port](https://vitejs.dev/config/#server-port) |\n| --https | false | [Run in HTTPS/SSL mode](https://vitejs.dev/config/#server-https) |\n\n### Preview Server\n\nPreview server executor for generated Vue3 projects.\n\n```\nnx preview [options]\n```\n\n| Arguments | Description |\n| --------- | -------------------- |\n| app-name | The name of your app |\n\n| Options | Default | Description |\n| ------- | --------- | -------------------------------------------------------------------------------- |\n| --dist | | [The build output directory to preview](https://vitejs.dev/config/#build-outdir) |\n| --host | localhost | [Preview Server host location](https://vitejs.dev/config/#preview-host) |\n| --port | 3000 | [Preview Server port](https://vitejs.dev/config/#preview-port) |\n| --https | false | [Run in HTTPS/SSL mode](https://vitejs.dev/config/#preview-https) |\n\n### Build\n\nBuild executor for generated Vue3 projects and libraries\n\n```\nnx build [options]\n```\n\n| Arguments | Description |\n| --------- | -------------------- |\n| app-name | The name of your app |\n\n| Options | Default | Description |\n| ------- | --------- | ----------------------------------------------------------- |\n| --dist | localhost | [Output directory](https://vitejs.dev/config/#build-outdir) |\n\n### Docs Build\n\nBuild executor for generated Vitepress docs.\n\n```\nnx build [options]\n```\n\n| Arguments | Description |\n| --------- | ----------------------------- |\n| app-name | The name of the Vitepress app |\n\n| Options | Default | Description |\n| ------- | --------- | ----------------------------------------------------------- |\n| --root | docs | Vitepress docs root, relative to the app root |\n| --dist | localhost | [Output directory](https://vitejs.dev/config/#build-outdir) |\n\n### Lint\n\n```\nnx lint [options]\n```\n\nSee [options](https://nx.dev/latest/angular/linter/eslint) for `@nx/eslint`\n\n### Unit Testing\n\nNote: see [vite-jest](#vite-jest) section for progress on testing code that relies on Vite transforms.\n\n```\nnx test [options]\n```\n\nSee [options](https://nx.dev/latest/angular/jest/jest) for `@nx/jest`\n\n### E2E Testing\n\nGenerator TBD\n\n```\nnx e2e [options]\n```\n\nSee [options](https://nx.dev/latest/angular/cypress/overview) for `@nx/cypress`\n\n## Workarounds\n\nDocumentation for non-ideal setup that should be removed or replaced when possible.\n\n### dep-graph hack\n\nIn order to get `nx dep-graph` to work in a generated Vue app, the NX code responsible for parsing file extension must be patched.\n\nThe `build` and `serve` executors in this plugin automatically check your workspace `node_modules` to see if the patch is already installed, and installs if not. See [`packages/vue3-vite/patch-nx-dep-graph.js`](packages/vue3-vite/patch-nx-dep-graph.js).\n\nPatch details: https://github.com/ZachJW34/nx-plus/tree/master/libs/vue#nx-dependency-graph-support\n\nRelated NX issue: https://github.com/nx/nx/issues/2960\n\n### vite-jest\n\nCurrently, unit tests will throw warnings when mounting Vue components that rely on code transforms from Vite plugins. This is because Jest does not know about Vite, and relies directly on SFC compilation from `vue3-jest`. The [vite-jest] project will eventually solve this problem, or we may implement our own transformer. The main issue now is Vite requires async for dependency resolution and transforming code, but Jest support is rudimentary/alpha.\n","readmeFilename":"README.md"}
\n\n