first integration of vuejs

BesLogic · Aug 7, 2024 · 4c36943 · 4c36943
1 parent 5e526de
commit 4c36943
Show file tree

Hide file tree

Showing 18 changed files with 5,108 additions and 4,749 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,7 +4,7 @@
   "plugins": ["@nx"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
       "rules": {
         "@nx/enforce-module-boundaries": [
           "error",

diff --git a/apps/releaf/qr-code/.eslintrc.json b/apps/releaf/qr-code/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting",
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
+      "rules": {
+        "vue/multi-word-component-names": "off"
+      }
+    }
+  ]
+}
diff --git a/apps/releaf/qr-code/index.html b/apps/releaf/qr-code/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>qr-code</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/releaf/qr-code/project.json b/apps/releaf/qr-code/project.json
@@ -0,0 +1,8 @@
+{
+  "name": "qr-code",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/releaf/qr-code/src",
+  "// targets": "to see all targets run: nx show project qr-code --web",
+  "targets": {}
+}
diff --git a/apps/releaf/qr-code/src/app/App.spec.ts b/apps/releaf/qr-code/src/app/App.spec.ts
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import App from './App.vue';
+
+describe('App', () => {
+  it('renders properly', () => {
+    const wrapper = mount(App, {});
+    expect(wrapper.text()).toContain('Welcome qr-code 👋');
+  });
+});
diff --git a/apps/releaf/qr-code/src/app/App.vue b/apps/releaf/qr-code/src/app/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import NxWelcome from './NxWelcome.vue';
+</script>
+
+<template>
+  <NxWelcome title="qr-code" />
+</template>
diff --git a/apps/releaf/qr-code/src/app/NxWelcome.vue b/apps/releaf/qr-code/src/app/NxWelcome.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <h1>
+    <span> Hello there, </span> Welcome {{ title }} 👋
+  </h1>
+</template>
+
+<style scoped></style>
diff --git a/apps/releaf/qr-code/src/app/pages/qr-code/qr-code-build.vue b/apps/releaf/qr-code/src/app/pages/qr-code/qr-code-build.vue
diff --git a/apps/releaf/qr-code/src/main.ts b/apps/releaf/qr-code/src/main.ts
@@ -0,0 +1,8 @@
+import './styles.less';
+
+import { createApp } from 'vue';
+import App from './app/App.vue';
+
+const app = createApp(App);
+
+app.mount('#root');
diff --git a/apps/releaf/qr-code/src/styles.less b/apps/releaf/qr-code/src/styles.less
@@ -0,0 +1,41 @@
+html {
+  -webkit-text-size-adjust: 100%;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+h1,
+h2,
+p,
+pre {
+  margin: 0;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+h1,
+h2 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}
diff --git a/apps/releaf/qr-code/tsconfig.app.json b/apps/releaf/qr-code/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["vite/client"]
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.vue",
+    "src/**/*.test.vue"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/apps/releaf/qr-code/tsconfig.json b/apps/releaf/qr-code/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/apps/releaf/qr-code/tsconfig.spec.json b/apps/releaf/qr-code/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "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"
+  ]
+}
diff --git a/apps/releaf/qr-code/vite.config.ts b/apps/releaf/qr-code/vite.config.ts
@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/apps/releaf/qr-code',
+
+  server: {
+    port: 4200,
+    host: 'localhost',
+  },
+
+  preview: {
+    port: 4300,
+    host: 'localhost',
+  },
+
+  plugins: [vue(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  build: {
+    outDir: '../../../dist/apps/releaf/qr-code',
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/apps/releaf/qr-code',
+      provider: 'v8',
+    },
+  },
+});
diff --git a/nx.json b/nx.json
@@ -75,5 +75,23 @@
   "nxCloudAccessToken": "ZTIwYmQ2NDktNWZlMS00M2NmLThjZjYtMzNiYTE0Y2QxZDJifHJlYWQtd3JpdGU=",
   "useInferencePlugins": false,
   "defaultBase": "main",
-  "plugins": ["@nx-dotnet/core"]
+  "plugins": [
+    "@nx-dotnet/core",
+    {
+      "plugin": "@nx/eslint/plugin",
+      "options": {
+        "targetName": "lint"
+      }
+    },
+    {
+      "plugin": "@nx/vite/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "previewTargetName": "preview",
+        "testTargetName": "test",
+        "serveTargetName": "serve",
+        "serveStaticTargetName": "serve-static"
+      }
+    }
+  ]
 }