website: build a document website using vite.

lerna.json

@@ -1,5 +1,4 @@
 {
   "version": "1.0.0",
-  "packages": ["website", "packages/*"],
-  "useWorkspaces": true
+  "packages": ["website", "packages/*"]
 }

package.json

@@ -3,10 +3,10 @@
   "scripts": {
     "prepare": "husky install",
     "start": "lerna exec \"npm run dev\" --scope website",
-    "build:website": "lerna exec \"npm run build\" --scope website",
-    "build": "lerna exec \"tsbb build src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/*",
-    "watch:simple": "lerna exec \"tsbb watch src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/simple",
-    "watch:base": "lerna exec \"tsbb watch src/*.tsx --use-babel --use-vue\" --scope @vue-monorepo-template/base",
+    "doc": "lerna exec \"npm run build\" --scope website",
+    "build": "lerna exec \"tsbb build \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/*",
+    "watch:simple": "lerna exec \"tsbb watch \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/simple",
+    "watch:base": "lerna exec \"tsbb watch \"src/*.{tsx,ts}\" --use-babel --use-vue\" --scope @vue-monorepo-template/base",
     "prettier": "prettier --write \"**/*.{js,jsx,vue,tsx,ts,less,md,json}\"",
     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
     "clean": "lerna clean --yes"

packages/base/package.json

@@ -17,6 +17,6 @@
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4"
   }
 }

packages/base/src/index.tsx

@@ -1,17 +1,18 @@
 import { defineComponent, h } from 'vue';
 
+const defaultProps = {
+  title: {
+    type: String,
+    default: 'title',
+  },
+};
+
 export default defineComponent({
   name: 'Base',
-  props: {
-    title: {
-      type: String,
-      defalut: 'title',
-    },
-  },
+  props: defaultProps,
   setup(props) {
-    const { title } = props;
     return () => {
-      return <div>Package: {title}</div>;
+      return <div>Package Base: {props.title}</div>;
     };
   },
 });

packages/simple/package.json

@@ -17,6 +17,6 @@
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4"
   }
 }

packages/simple/src/index.tsx

@@ -5,13 +5,12 @@ export default defineComponent({
   props: {
     title: {
       type: String,
-      defalut: 'title',
+      default: 'title',
     },
   },
   setup(props) {
-    const { title } = props;
     return () => {
-      return <div>Package: {title}</div>;
+      return <div>Package Simple: {props.title}</div>;
     };
   },
 });

website/.gitignore

@@ -8,19 +8,15 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-.DS_Store
 dist
 dist-ssr
-coverage
 *.local
 
-/cypress/videos/
-/cypress/screenshots/
-
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

website/README.md

@@ -1 +1,18 @@
-Documentation site for [vue-monorepo-template](https://tsbbjs.github.io/vue-monorepo-template).
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

website/index.html

@@ -1,10 +1,18 @@
-<!DOCTYPE html>
+<!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>Vite App</title>
+    <title>Vue Monorepo Template</title>
+    <link rel="icon" type="image/svg+xml" href="/src/assets/vue.svg" />
+    <meta
+      name="keywords"
+      content="uivjs,vue,monorepo,template,react.js,react,component,components,ui,framework,toolkit"
+    />
+    <meta
+      name="description"
+      content="Simple Vue 3 package development project example template."
+    />
   </head>
   <body>
     <div id="app"></div>

website/package.json

@@ -2,44 +2,26 @@
   "name": "website",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview",
-    "test:unit": "vitest",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@vue-monorepo-template/simple": "1.0.0",
     "@vue-monorepo-template/base": "1.0.0",
-    "@uivjs/vue-github-corners": "1.0.1",
-    "@uivjs/vue-markdown-preview": "1.0.3",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "@uivjs/vue-github-corners": "^0.0.2",
+    "@uivjs/vue-markdown-preview": "^1.0.4",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@types/jsdom": "^21.1.0",
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.3.0",
-    "@vue/tsconfig": "^0.1.3",
-    "vite-plugin-markdown": "^2.2.0-2",
-    "style-to-object": "^0.4.1",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^21.1.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "typescript": "~4.8.4",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.1",
-    "vue-tsc": "^1.2.0"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-md": "^0.22.5",
+    "vite-raw-plugin": "^1.0.2",
+    "vue-tsc": "^1.8.5"
   }
 }