Add an 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> Nuxi 3.6.5 ✨ Nuxt project is created with v3 template.
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}
12Make 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
7Project 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});
36Setup 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}
4And 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}
10This 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';
2In those cases you can create a d.ts file, saying .vue files are allowed to export in .ts files.
1declare module '*.vue';
2