feat: nuxt3 support

apps/nuxt-e2e/tests/nuxt.test.ts

@@ -32,7 +32,21 @@ describe('nuxt e2e', () => {
     await runNxCommandAsyncStripped(`build ${appName}`);
     expect(() =>
       checkFilesExist(
-        `dist/apps/${appName}/.nuxt/utils.js`,
+        `dist/apps/${appName}/.nuxt/client/manifest.json`,
+        `dist/apps/${appName}/.nuxt/server/client.manifest.json`,
+        `dist/apps/${appName}/.nuxt/server/client.manifest.mjs`,
+        `dist/apps/${appName}/.nuxt/server/server.mjs`,
+        `dist/apps/${appName}/.nuxt/components.d.ts`,
+        `dist/apps/${appName}/.nuxt/imports.d.ts`,
+        `dist/apps/${appName}/.nuxt/nuxt.d.ts`,
+        `dist/apps/${appName}/.nuxt/tsconfig.json`,
+        `dist/apps/${appName}/.nuxt/.output`,
+        `dist/apps/${appName}/.nuxt/.output/server`,
+        `dist/apps/${appName}/.nuxt/.output/nitro.json`,
+        `dist/apps/${appName}/.nuxt/.output/server/index.mjs`,
+        `dist/apps/${appName}/.nuxt/views`,
+        `dist/apps/${appName}/.nuxt/types`
+        /*         `dist/apps/${appName}/.nuxt/utils.js`,
         `dist/apps/${appName}/.nuxt/server.js`,
         `dist/apps/${appName}/.nuxt/routes.json`,
         `dist/apps/${appName}/.nuxt/router.scrollBehavior.js`,
@@ -48,7 +62,7 @@ describe('nuxt e2e', () => {
         `dist/apps/${appName}/.nuxt/vetur`,
         `dist/apps/${appName}/.nuxt/mixins`,
         `dist/apps/${appName}/.nuxt/dist`,
-        `dist/apps/${appName}/.nuxt/components`
+        `dist/apps/${appName}/.nuxt/components` */
       )
     ).not.toThrow();
 
@@ -62,10 +76,7 @@ describe('nuxt e2e', () => {
     const appName = uniq('app');
     await runNxCommandAsyncStripped(`generate @nx-plus/nuxt:app ${appName}`);
 
-    updateFile(
-      `apps/${appName}/pages/index.vue`,
-      '<script lang="ts">{}</script>'
-    );
+    updateFile(`apps/${appName}/app.vue`, '<script lang="ts">{}</script>');
 
     const result = await runNxCommandAsyncStripped(`lint ${appName}`, {
       silenceError: true,

apps/nuxt-e2e/tsconfig.spec.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "NodeNext",
+    "target": "ES2017",
     "types": ["jest", "node"]
   },
   "include": ["**/*.spec.ts", "**/*.d.ts"]

libs/nuxt/src/executors/browser/executor.ts

@@ -5,20 +5,23 @@ import { ExecutorContext } from '@nrwl/devkit';
 import * as path from 'path';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { build, loadNuxt } = require('nuxt');
+// import { build, loadNuxt } from 'nuxt';
+const dynamicImport = new Function('specifier', 'return import(specifier)');
 
 export default async function* runExecutor(
   options: BrowserExecutorSchema,
   context: ExecutorContext
 ) {
   try {
     const projectRoot = await getProjectRoot(context);
+    const { loadNuxt, build } = (await dynamicImport(
+      'nuxt'
+    )) as typeof import('nuxt');
     const nuxt = await loadNuxt({
-      for: 'build',
       rootDir: projectRoot,
-      configOverrides: {
+      config: {
         buildDir: path.join(context.root, options.buildDir, '.nuxt'),
-        build: {
+        /*         build: {
           extend(
             config: Record<string, unknown>,
             ctx: Record<string, unknown>
@@ -28,14 +31,14 @@ export default async function* runExecutor(
             // eslint-disable-next-line @typescript-eslint/no-var-requires
             const { default: nuxtConfig } = require(path.join(
               projectRoot,
-              'nuxt.config.js'
+              'nuxt.config.ts'
             ));
 
             if (nuxtConfig.build && nuxtConfig.build.extend) {
               nuxtConfig.build.extend(config, ctx);
             }
           },
-        },
+        }, */
       },
     });
 

libs/nuxt/src/executors/server/executor.ts

@@ -10,14 +10,18 @@ import { ServerExecutorSchema } from './schema';
 import * as path from 'path';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { build, loadNuxt } = require('nuxt');
+// const { build, loadNuxt } = await import('nuxt');
+const dynamicImport = new Function('specifier', 'return import(specifier)');
 
 const serverBuilderOverriddenKeys: string[] = [];
 
 export default async function* runExecutor(
   options: ServerExecutorSchema,
   context: ExecutorContext
 ) {
+  const { loadNuxt, build } = (await dynamicImport(
+    'nuxt'
+  )) as typeof import('nuxt');
   const browserTarget = parseTargetString(options.browserTarget);
   const rawBrowserOptions = readTargetOptions(browserTarget, context);
   const overrides = Object.entries(options)
@@ -31,33 +35,33 @@ export default async function* runExecutor(
   const projectRoot = await getProjectRoot(context);
 
   const nuxt = await loadNuxt({
-    for: options.dev ? 'dev' : 'start',
+    dev: options.dev,
     rootDir: projectRoot,
-    configOverrides: {
+    config: {
       buildDir: path.join(context.root, browserOptions.buildDir, '.nuxt'),
-      build: {
+      /*       build: {
         extend(config: Record<string, unknown>, ctx: Record<string, unknown>) {
           modifyTypescriptAliases(config, projectRoot);
 
           // eslint-disable-next-line @typescript-eslint/no-var-requires
           const { default: nuxtConfig } = require(path.join(
             projectRoot,
-            'nuxt.config.js'
+            'nuxt.config.ts'
           ));
 
           if (nuxtConfig.build && nuxtConfig.build.extend) {
             nuxtConfig.build.extend(config, ctx);
           }
         },
-      },
+      }, */
     },
   });
 
   if (options.dev) {
     await build(nuxt);
   }
 
-  const result = await nuxt.listen(nuxt.options.server.port);
+  const result = await nuxt.server();
   const baseUrl = options.dev ? nuxt.server.listeners[0].url : result.url;
 
   logger.info(`\nListening on: ${baseUrl}\n`);

libs/nuxt/src/executors/static/executor.ts

@@ -10,7 +10,8 @@ import { default as browserExecutor } from '../browser/executor';
 import { StaticExecutorSchema } from './schema';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { Builder, Generator, loadNuxtConfig, Nuxt } = require('nuxt');
+import { loadNuxt } from 'nuxt';
+// import { Builder, Generator, loadNuxt, Nuxt } from 'nuxt';
 
 const serverBuilderOverriddenKeys: string[] = [];
 
@@ -33,15 +34,15 @@ export default async function* runExecutor(
 
     const projectRoot = await getProjectRoot(context);
 
-    const config = await loadNuxtConfig({
+    const config = await loadNuxt({
       rootDir: projectRoot,
-      configOverrides: {
+      config: {
         dev: false,
         buildDir: path.join(context.root, browserOptions.buildDir, '.nuxt'),
         generate: {
           dir: path.join(context.root, browserOptions.buildDir, 'dist'),
         },
-        build: {
+        /*         build: {
           extend(
             config: Record<string, unknown>,
             ctx: Record<string, unknown>
@@ -58,16 +59,16 @@ export default async function* runExecutor(
               nuxtConfig.build.extend(config, ctx);
             }
           },
-        },
+        }, */
       },
     });
 
-    const nuxt = new Nuxt(config);
-    await nuxt.ready();
-    const builder = new Builder(nuxt);
-    const generator = new Generator(nuxt, builder);
+    //const nuxt = new Nuxt(config);
+    // await nuxt.ready();
+    // const builder = new Builder(nuxt);
+    // const generator = new Generator(nuxt, builder);
 
-    await generator.generate({ build: false });
+    // await generator.generate({ build: false });
 
     yield {
       success: true,

libs/nuxt/src/generators/application/files/app.vue.template

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

libs/nuxt/src/generators/application/files/nuxt.config.ts.template

@@ -0,0 +1,36 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+
+  app: {
+    // Global page headers: https://v3.nuxtjs.org/api/configuration/nuxt.config#head
+    head: {
+      title: 'nuxt-app',
+      htmlAttrs: {
+        lang: 'en'
+      },
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { hid: 'description', name: 'description', content: '' },
+        { name: 'format-detection', content: 'telephone=no' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      ]
+    },
+  },
+
+  // Global CSS: https://v3.nuxtjs.org/api/configuration/nuxt.config#css
+  css: [
+  ],
+
+  // Modules for dev and build (recommended): https://v3.nuxtjs.org/api/configuration/nuxt.config#modules
+  modules: [
+  ],
+
+
+  // Build Configuration: https://v3.nuxtjs.org/api/configuration/nuxt.config#build
+  build: {
+  }
+})

libs/nuxt/src/generators/application/files/store/README.md.template

@@ -2,9 +2,14 @@
 
 **This directory is not required, you can delete it if you don't want to use it.**
 
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
+## Pinia (new official Vue recommendation)
+Pinia, which has built-in Nuxt support via a Nuxt module. (https://pinia.vuejs.org/) [Find out more about pinia here].
 
-Creating a file in this directory automatically activates the option in the framework.
+This directory contains your Pinia Store files.
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
+
+## Vuex (deprecated)
+https://v3.nuxtjs.org/migration/configuration#vuex
+
+If you want to keep using Vuex, you can manually migrate to Vuex 4 following these steps
+https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html.

libs/nuxt/src/generators/application/files/test/Example.spec.js.template

@@ -0,0 +1,11 @@
+import { mount } from '@vue/test-utils'
+import App from '../app.vue'
+
+describe('Mounted App', () => {
+  const wrapper = mount(App);
+
+  test('does a wrapper exist', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+