Add a Nuxt Project
The code for this example is available on GitHub:
Example repository/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.
✅ Run Tasks ✅ Cache Task Results ✅ Remote Caching ✅ Explore the Graph ✅ Distribute Task Execution ✅ Integrate with Editors ✅ Automate Updating Nx ✅ Enforce Project Boundaries 🚫 Use Task Executors 🚫 Use Code Generators 🚫 Automate Updating Framework Dependencies
Create Nuxt App
Using nuxi init
, cd
to the directory above where you want the app folder to live and run
❯
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.
1{
2 "name": "<app-name>",
3 "scripts": {/***/}
4 "nx": {
5 "targets": {
6 "build": {
7 "outputs": ["{projectRoot}/.output", "{projectRoot}/.nuxt"]
8 }
9 }
10 }
11}
12
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.
1# Nuxt dev/build outputs
2.output
3.nuxt
4.nitro
5.cache
6dist
7
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 with these aliases as TS Paths
1import { defineNuxtConfig } from 'nuxt/config';
2import { join } from 'path';
3import { workspaceRoot } from '@nx/devkit';
4
5/**
6 * read the compilerOptions.paths option from a tsconfig and return as aliases for Nuxt
7 **/
8function getMonorepoTsConfigPaths(tsConfigPath: string) {
9 const tsPaths = require(tsConfigPath)?.compilerOptions?.paths as Record<
10 string,
11 string[]
12 >;
13
14 const alias: Record<string, string> = {};
15 if (tsPaths) {
16 for (const p in tsPaths) {
17 // '@org/something/*': ['libs/something/src/*'] => '@org/something': '{pathToWorkspaceRoot}/libs/something/src'
18 alias[p.replace(/\/\*$/, '')] = join(
19 workspaceRoot,
20 tsPaths[p][0].replace(/\/\*$/, '')
21 );
22 }
23 }
24
25 return alias;
26}
27
28export default defineNuxtConfig({
29 /**
30 * aliases set here will be added to the auto generate tsconfig by Nuxt
31 * https://nuxt.com/docs/guide/directory-structure/tsconfig
32 **/
33 alias: getMonorepoTsConfigPaths('../../tsconfig.base.json'),
34 devtools: { enabled: true },
35});
36
Setup Project Graph
Since Nx doesn't understand .vue
files, you can use tags
with 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
.
1{
2 "tags": ["scope:<app-name>"]
3}
4
And in the top level Nuxt application, you can set the implicitdependencies
to the scope:<app-name>
tag.
1
2{
3 "name": "<app-name>",
4 "scripts": {/***/}
5 "nx": {
6 "tags": ["scope:<app-name>"],
7 "implicitDependencies": ["tag:scope:<app-name>"]
8 }
9}
10
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.
1export * from './lib/btn.vue';
2
In those cases you can create a d.ts
file, saying .vue
files are allowed to export in .ts
files.
1declare module '*.vue';
2