feat: add landing page with nuxt

.gitignore

@@ -51,3 +51,10 @@ storybook-static
 .env.prod
 .env.develop
 .env.staging
+
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache

apps/landing/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

apps/landing/eslint.config.mjs

@@ -0,0 +1,30 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import js from '@eslint/js';
+import baseConfig from '../../eslint.config.mjs';
+const compat = new FlatCompat({
+  baseDirectory: dirname(fileURLToPath(import.meta.url)),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+    // Override or add rules here
+    rules: {},
+  },
+  ...compat.extends('@nuxt/eslint-config'),
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: await import('@typescript-eslint/parser'),
+      },
+    },
+  },
+  {
+    ignores: ['.nuxt/**', '.output/**', 'node_modules'],
+  },
+];

apps/landing/nuxt.config.ts

@@ -0,0 +1,25 @@
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { defineNuxtConfig } from 'nuxt/config';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  workspaceDir: '../../',
+  srcDir: 'src',
+  devtools: { enabled: true },
+  devServer: {
+    host: 'localhost',
+    port: 3000,
+  },
+  typescript: {
+    typeCheck: true,
+    tsConfig: {
+      extends: '../tsconfig.app.json', // Nuxt copies this string as-is to the `./.nuxt/tsconfig.json`, therefore it needs to be relative to that directory
+    },
+  },
+  imports: {
+    autoImport: true,
+  },
+  vite: {
+    plugins: [nxViteTsPaths()],
+  },
+});

apps/landing/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "landing",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/landing/src",
+  "// targets": "to see all targets run: nx show project landing --web",
+  "targets": {}
+}

apps/landing/src/app.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main>
+    <header>
+      <nav>
+        <NuxtLink to="/"> Home </NuxtLink>
+        <NuxtLink to="/about"> About </NuxtLink>
+      </nav>
+    </header>
+    <nuxt-page />
+  </main>
+</template>
+
+<style scoped lang="css">
+header {
+  line-height: 1.5;
+  max-width: 100vw;
+}
+
+nav > a {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 768px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+  }
+
+  nav {
+    text-align: left;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>

apps/landing/src/pages/about.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="about">
+    <h1>This is an about page.</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 768px) {
+  .about {
+    max-width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 1rem;
+  }
+}
+</style>

apps/landing/src/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <NxWelcome title="landing" />
+</template>

apps/landing/src/server/api/greet.ts

@@ -0,0 +1,10 @@
+import { defineEventHandler, getQuery } from 'h3';
+
+export default defineEventHandler((event) => {
+  const q = getQuery(event);
+  const projectName = q.name || 'World';
+
+  return {
+    message: `Hello ${projectName}`,
+  };
+});

apps/landing/src/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.nuxt/tsconfig.server.json"
+}

apps/landing/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "include": [".nuxt/nuxt.d.ts", "src/**/*"],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

apps/landing/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [".nuxt/nuxt.d.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

apps/landing/tsconfig.spec.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "composite": true
+  },
+  "include": [
+    ".nuxt/nuxt.d.ts",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

apps/landing/vitest.config.ts

@@ -0,0 +1,26 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/apps/landing',
+  plugins: [vue(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/apps/landing',
+      provider: 'v8' as const,
+    },
+  },
+}));

eslint.config.mjs

@@ -12,7 +12,7 @@ export default [
     ],
   },
   {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
     rules: {
       '@nx/enforce-module-boundaries': [
         'error',

nx.json

@@ -2,7 +2,10 @@
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "defaultBase": "master",
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/.eslintrc.json",
@@ -45,6 +48,15 @@
         "testStorybookTargetName": "test-storybook",
         "staticStorybookTargetName": "static-storybook"
       }
+    },
+    {
+      "plugin": "@nx/nuxt/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "serveTargetName": "serve",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
     }
   ],
   "generators": {

package.json

@@ -12,6 +12,9 @@
     "dimentorin:dev": "nx serve dimentorin",
     "dimentorin:build": "nx build dimentorin",
     "dimentorin:prod": "serve ./dist/apps/dimentorin",
+    "landing:dev": "nx serve landing",
+    "landing:build": "nx build landing",
+    "landing:prod": "node ./apps/landing/.output/server/index.mjs",
     "ui:test": "nx test ui",
     "ui:build": "nx build ui",
     "ui:storybook": "nx storybook ui"
@@ -37,10 +40,16 @@
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
+    "@eslint/eslintrc": "^2.1.1",
     "@eslint/js": "^9.8.0",
+    "@nuxt/devtools": "1.0.0",
+    "@nuxt/eslint-config": "~0.5.6",
+    "@nuxt/kit": "^3.10.0",
+    "@nuxt/ui-templates": "^1.3.1",
     "@nx/eslint": "20.5.0",
     "@nx/eslint-plugin": "20.5.0",
     "@nx/js": "20.6.0",
+    "@nx/nuxt": "^20.5.0",
     "@nx/react": "20.5.0",
     "@nx/storybook": "^20.6.0",
     "@nx/vite": "20.5.0",
@@ -67,8 +76,10 @@
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-vue": "^4.5.0",
     "@vitest/coverage-v8": "^3.0.5",
     "@vitest/ui": "^3.0.0",
+    "@vue/test-utils": "^2.4.1",
     "ajv": "^6.12.6",
     "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.0.0",
@@ -76,8 +87,10 @@
     "eslint-plugin-jsx-a11y": "6.10.1",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "5.0.0",
+    "h3": "^1.8.2",
     "jiti": "2.4.2",
     "jsdom": "~22.1.0",
+    "nuxt": "^3.10.0",
     "nx": "20.5.0",
     "postcss": "^8.5.3",
     "prettier": "^2.6.2",
@@ -91,7 +104,10 @@
     "verdaccio": "^6.0.5",
     "vite": "^6.0.0",
     "vite-plugin-dts": "~4.5.0",
-    "vitest": "^3.0.8"
+    "vitest": "^3.0.8",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^2.0.0"
   },
   "nx": {
     "includedScripts": []