@nx/vue:component

Create a Vue Component for Nx.

Usage

1nx generate component ... 2
1nx g c ... #same 2

By default, Nx will search for component in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/vue:component ... 2
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

1nx g component ... --dry-run 2

Examples

Generate a component in the mylib library:

1nx g component my-component --project=mylib 2

Generate a class component in the mylib library:

1nx g component my-component --project=mylib --classComponent 2

Options

name

Required
string

The name of the component.

directory

dir
string

The directory at which to create the component file. When --nameAndDirectoryFormat=as-provided, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.

export

e
boolean
Default: false

When true, the component is exported from the project index.ts (if it exists).

fileName

string

Create a component with this file name.

inSourceTests

boolean
Default: false

When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html

js

boolean
Default: false

Generate JavaScript files rather than TypeScript files.

nameAndDirectoryFormat

string
Accepted values: as-provided, derived

Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (as-provided) or generate it using the project and directory relative to the workspace root (derived).

routing

boolean

Generate a library with routes.

unitTestRunner

string
Accepted values: vitest, jest, none

Test runner to use for unit tests.

skipTests

Internal
boolean
Default: false

When true, does not create spec.ts test files for the new component.

skipFormat

Internal
boolean
Default: false

Skip formatting files.

flat

Deprecated
boolean
Default: false

Create component at the source root rather than its own directory.

Provide the directory option instead and use the as-provided format. It will be removed in Nx v18.

project

pDeprecated
string

The name of the project.

Provide the directory option instead and use the as-provided format. The project will be determined from the directory provided. It will be removed in Nx v18.

pascalCaseFiles

PDeprecated
boolean
Default: false

Use pascal case component file name (e.g. App.tsx).

Provide the desired name option instead and use the as-provided format. It will be removed in Nx v18.

pascalCaseDirectory

RDeprecated
boolean
Default: false

Use pascal case directory name (e.g. App/App.tsx).

Provide the desired directory option instead and use the as-provided format. It will be removed in Nx v18.