feat: nuxt3 support

[colinscz]

Current Behavior

Currently Nuxt 2 is supported, the major release for Nuxt 3 is around the corner. The future version of @nxplus/nuxt should support Nuxt 3.

Task list

• Update the schematic to generate what a npx nuxi init nuxt-app would give you (current nuxi setup - potential subject to change).
• Remove Nuxt 2, add Nuxt 3 current RC candidate 🏗️
• Update the build/serve executor to get it serving locally with the new nuxt3 API --> potentially blocked by: Unable to execute node ES Modules nrwl/nx#10565 and related outstanding fix: feat(node): allow executing esm compiled scripts nrwl/nx#10414
  • Static Site Generation (Nuxt 3 pending!) ❌
  • Server Side Rendering (Server) 🏗️
  • Client Side Rendering (Browser) 🏗️
• Update the schematic to get Jest unit testing working 🏗️
• Setup tsconfig so it extends properly from nuxt ts config - to be clarified ❌
• Update the schematic to verify eslint is working 🏗️
• Update unit tests ✅
• Update e2e tests 🏗️
• (Update schematics might switch to vitest)
• (Optional): Create a migration script
• Squash commits

Expected Behavior

Nuxt 3 support + potential migration for projects using the current nuxt 2 extension

Related Issue(s)

#236

[colinscz]

@ZachJW34 I face an issue with the nx project setup where it's compiling the ESM to CJS. And this results in the error seen on the e2e tests of the pipeline.
You can reproduce it if you

• run the nuxt lib build and then
• run the e2e nuxt tests against it.

I have mentioned the two potentially related issues of Nx in the issue description.

I'm open to ideas on how to solve this :)

[ZachJW34]

The way I've handled this in the past is to use a little hack utility method:

const dynamicImport = new Function('specifier', 'return import(specifier)');

export default async function* runExecutor(...) {
  const { loadNuxt, build } = await dynamicImport('nuxt') as typeof import('nuxt');
}

That way, the dynamic import won't get converted to a require. Like @Pekes317 pointed out, this can be fixed by changing the "module" target but making this change always leads to more errors in my experience from other dependencies.

[colinscz]

@ZachJW34 thanks for the hint, I will try out this approach with the latest nuxt framework release and give an update on the status. If that approach is not successful I would give @Pekes317 suggestion a try.

[colinscz]

@ZachJW34 unfortunately your approach and the one suggested by @Pekes317 still both result in an error.

With both approaches I currently run into a similar error. The latest committed changes are more towards the approach that @Pekes317 suggested. But the tests fail with the following error message, even though the resolutions were changed accordingly:

> nx run nuxt:test

ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL   nuxt  libs/nuxt/src/generators/application/generator.spec.ts
  ● Test suite failed to run

    libs/nuxt/src/utils.ts:18:17 - error TS1378: Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.

    18 const Module = (await dynamicImport('module')) as typeof import('module');

For now I will revert locally and will add a commit with the suggested approach of @ZachJW34, that way for testing you can switch easily between the different try outs. I will have a go again with your approach @ZachJW34, but if I don't succeed it would be great if you can have a look into it yourself. Thanks in advance :)

[colinscz]

After going a bit further with the NodeNext approach, I could fix the above issue with some changes to async functions and moving that top level definition to the only function it is used in. I now commited that latest status to remote instead of my previous plan.

It looks like I have now issues with the current version of Jest and the support for ES Modules. You need to run with a version of node that supports ES Modules in the VM API. See https://jestjs.io/docs/ecmascript-modules

This brings me to the following question:

• Which minimal node version should still be supported with this new plugin version? What is the overall plan for the repository?
• What about the jest support for ES Modules vs. common-js? Looks like this is still experimental in Node 18.8.0 according to the jest docs: https://jestjs.io/docs/ecmascript-modules --> maybe a switch to vitest right away could mitigate the issue, I haven't checked this yet.

@ZachJW34 You can contact me on Discord if you want to discuss this further and have a quick back and forth on how to tackle this :)
ignotus#3578

[Pekes317]

I think you should try changing the tsconfig.json file to use NodeNext module and module resolution in order to handle the ES Module of Nuxt 3. Then you should be able to use a Dynamic Import inside the Executor function.

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

[appinteractive]

Any news on this? It’s pretty important I think 🫤

[dpietrzyk]

Is there any timeline for this?
I am currently looking for the "right way" of adding nuxt to my vue3 nx app and it seems that this would be the best option 😃

[colinscz]

Update: For the ones watching, review or comment from the library authors is pending. So far no update since my last posted question and results.

I had a conversation with Daniel from the Nuxt core team around this and the official Vite plugin that Nx is currently still developing. But all very speculative and it's still unclear if this official Vite plugin could be used somehow for Nuxt3 too. If so, probably not without additional work or customization.

When @ZachJW34 or @BuckyMaler give an update on how they want to tackle the issues in this plugin here, then the next steps can be further clarified.
Currently there is no timeline for this feature, if you think you have an idea on how to fix it. Feel free to add pointers here.

[colinscz]

I will close this PR since I haven't heard anything from the maintainers in well over a year. Plus there is an exciting development ongoing by Nx. After releasing a Nx Vue plugin support they are currently working on an official Nuxt plugin. So I guess soon this plugin here will become obsolete for Nuxt too.

Thanks to everyone who gave feedback or hints. 👍🏽

For more information please consult Nx's latest blog post: https://blog.nrwl.io/nx-17-0-has-landed-1dad19176ff3#370a