Skip to content

Commit

Permalink
feat(nuxt): fies
Browse files Browse the repository at this point in the history
  • Loading branch information
mandarini committed Nov 30, 2023
1 parent 69859fb commit 2c1fc81
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 167 deletions.
84 changes: 0 additions & 84 deletions docs/shared/packages/nuxt/nuxt-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,87 +50,3 @@ pnpm install -D @nx/nuxt
```shell
nx g @nx/nuxt:app my-app
```

## Add Nx to existing Nuxt applications

Using the `@nx/nuxt/plugin`, you can adds Nuxt targets to Nx. This allows you to run Nuxt for projects that have a `nuxt.config.ts` file via Nx with caching and everything setup.

### How it works

#### Fist, set up Nx

First, you need to run `npx nx init` in your project. You can read more in our guide about [adopting Nx](/recipes/adopting-nx/adding-to-existing-project).

#### Then, add the plugin

Install the plugin as shown above:

{% tabs %}
{% tab label="npm" %}

```shell
npm install -D @nx/nuxt
```

{% /tab %}
{% tab label="yarn" %}

```shell
yarn add -D @nx/nuxt
```

{% /tab %}
{% tab label="pnpm" %}

```shell
pnpm install -D @nx/nuxt
```

{% /tab %}
{% /tabs %}

#### Finally, run the init command

You can now run `nx g @nx/nuxt:init` and the following will be setup in `nx.json` in the `plugins` array:

```json
...
plugins: [
{
"plugin": "@nx/nuxt/plugin",
"options": {
"buildTargetName": "build",
"serveTargetName": "serve",
"testTargetName": "test",
},
},
...
]
```

This will create targets for `build`, `test` and `serve` in your project graph, so that you can run `nx build my-app`, `nx test my-app` etc. This will work for every single project in your workspace that has a `nuxt.config.ts` file.

### How to configure

Any options you need for your Nuxt app, you can add in your project's `nuxt.config.ts`.

If you want to customize these targets more, read the [guide on configuring projects](/reference/project-configuration).

You can edit the name of your targets if you want to use a different name. For example, you can have this configuration:

```json
...
plugins: [
{
"plugin": "@nx/nuxt/plugin",
"options": {
"buildTargetName": "build-core",
"serveTargetName": "serve",
"testTargetName": "test",
},
},
...
]
```

and this will create `build-core` and `serve` targets in your project graph. You can then call `nx build-core my-app` for all your projects that have a `nuxt.config.ts|js` file.
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,6 @@ exports[`app generated files content - as-provided general application should co
"lint": {
"executor": "@nx/eslint:lint",
"outputs": ["{options.outputFile}"]
},
"test": {
"executor": "@nx/vite:test",
"outputs": ["{options.reportsDirectory}"],
"options": {
"reportsDirectory": "../coverage/my-app"
}
}
}
}
Expand Down Expand Up @@ -125,7 +118,7 @@ export default defineConfig({
cache: {
dir: '../node_modules/.vitest',
},
environment: 'nuxt',
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
coverage: {
Expand Down
30 changes: 13 additions & 17 deletions packages/nuxt/src/generators/application/lib/add-vitest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,31 @@ export async function addVitest(tree: Tree, options: NormalizedSchema) {
? p === '@nx/nuxt/plugin'
: p.plugin === '@nx/nuxt/plugin'
);
const projectConfig = readProjectConfiguration(tree, options.name);
if (!hasPlugin) {
projectConfig.targets['test'] = {
executor: '@nx/vite:test',
outputs: ['{options.reportsDirectory}'],
};
updateProjectConfiguration(tree, options.name, projectConfig);
}

const { createOrEditViteConfig, vitestGenerator } = ensurePackage<
typeof import('@nx/vite')
>('@nx/vite', nxVersion);

const vitestTask = await vitestGenerator(tree, {
project: options.name,
uiFramework: 'none',
coverageProvider: 'v8',
skipFormat: true,
testEnvironment: 'nuxt',
skipViteConfig: true,
});
const vitestTask = await vitestGenerator(
tree,
{
project: options.name,
uiFramework: 'none',
coverageProvider: 'v8',
skipFormat: true,
testEnvironment: 'jsdom',
skipViteConfig: true,
},
hasPlugin
);

createOrEditViteConfig(
tree,
{
project: options.name,
includeLib: false,
includeVitest: true,
testEnvironment: 'nuxt',
testEnvironment: 'jsdom',
imports: [`import vue from '@vitejs/plugin-vue'`],
plugins: ['vue()'],
},
Expand Down
11 changes: 0 additions & 11 deletions packages/nuxt/src/generators/init/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,6 @@ export function addVitestTargetDefaults(tree: Tree) {
nxJson.namedInputs.production = Array.from(new Set(productionFileSet));
}

nxJson.targetDefaults ??= {};
nxJson.targetDefaults['@nx/vite:test'] ??= {};
nxJson.targetDefaults['@nx/vite:test'].cache ??= true;
nxJson.targetDefaults['@nx/vite:test'].inputs ??= [
'default',
productionFileSet ? '^production' : '^default',
];
nxJson.targetDefaults['@nx/vite:test'].options ??= {
passWithNoTests: true,
};

updateNxJson(tree, nxJson);
}

Expand Down
54 changes: 42 additions & 12 deletions packages/nuxt/src/plugins/__snapshots__/plugin.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,40 @@ exports[`@nx/nuxt/plugin not root project should create nodes 1`] = `
"targets": {
"build-something": {
"cache": true,
"command": "pnpm exec nuxi build my-app",
"command": "nuxi build",
"inputs": [
"production",
"default",
"^production",
{
"externalDependencies": [
"nuxi",
],
},
],
"options": {
"cwd": "my-app",
},
"outputs": [
"{options.outputPath}",
],
},
"my-serve": {
"defaultConfiguration": "development",
"executor": "@nx/nuxt:serve",
"command": "nuxi dev",
"options": {
"cwd": "my-app",
},
},
"test": {
"cache": true,
"command": "pnpm exec vitest run",
"command": "vitest run",
"inputs": [
"production",
"default",
"^production",
{
"externalDependencies": [
"vitest",
],
},
],
"options": {
"cwd": "my-app",
Expand All @@ -50,25 +65,40 @@ exports[`@nx/nuxt/plugin root project should create nodes 1`] = `
"targets": {
"build": {
"cache": true,
"command": "pnpm exec nuxi build .",
"command": "nuxi build",
"inputs": [
"production",
"default",
"^production",
{
"externalDependencies": [
"nuxi",
],
},
],
"options": {
"cwd": ".",
},
"outputs": [
"{options.outputPath}",
],
},
"serve": {
"defaultConfiguration": "development",
"executor": "@nx/nuxt:serve",
"command": "nuxi dev",
"options": {
"cwd": ".",
},
},
"test": {
"cache": true,
"command": "pnpm exec vitest run",
"command": "vitest run",
"inputs": [
"production",
"default",
"^production",
{
"externalDependencies": [
"vitest",
],
},
],
"options": {
"cwd": ".",
Expand Down

0 comments on commit 2c1fc81

Please sign in to comment.