feat(examples): init example projects

README.md

@@ -4,28 +4,34 @@
 
 💬 **#language-tools** on our [Discord Server](https://discord.gg/vue)
 
+## Example Projects
+
+- [Basic Example](./examples/basic/) A basic example project that highlights some aspects of the Vue language tools. This example is a good starting point for new users.
+- [[Todo] nvim](./examples/with-nvim/) If you are using Neovim, feel free to contribute an example project to help others.
+- [[Todo] Vue2](./examples/with-vue2/) If you are using Vue 2, feel free to contribute an example project to help others.
+
 ## Packages
 
 - [Vue Language Features](https://github.com/vuejs/language-tools/tree/master/extensions/vscode) \
-*Vue, Vitepress, petite-vue language support extension for VSCode*
+  _Vue, Vitepress, petite-vue language support extension for VSCode_
 - [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) \
-*Type-check and dts build command line tool*
+  _Type-check and dts build command line tool_
 - [vue-component-meta](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) \
-*Component props, events, slots types information extract tool*
+  _Component props, events, slots types information extract tool_
 - [vite-plugin-vue-component-preview](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview) \
-*Vite plugin for support Vue component preview view with `Vue Language Features`*
+  _Vite plugin for support Vue component preview view with `Vue Language Features`_
 - [`@vue/language-server`](/packages/language-server/) \
-*The language server itself*.
+  _The language server itself_.
 - [`@vue/typescript-plugin`](/packages/typescript-plugin/) \
-*Typescript plugin for the language server*.
+  _Typescript plugin for the language server_.
 
 ## Community Integration
 
 [yaegassy/coc-volar](https://github.com/yaegassy/coc-volar) ⚡ 🤝 🅿️ \
-*Vue language client for coc.nvim*
+_Vue language client for coc.nvim_
 
 [neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) ⚡ 🤝 \
-*Vue language server configuration for Neovim*
+_Vue language server configuration for Neovim_
 
 <details>
   <summary>How to configure vue language server with neovim and lsp?</summary>
@@ -66,13 +72,14 @@ Note: If `hybridMode` is set to `false` `Volar` will run embedded `tsserver` the
 
 For more information see [#4119](https://github.com/vuejs/language-tools/pull/4119)
 
-*Make sure you have typescript installed globally or pass the location to volar*
+_Make sure you have typescript installed globally or pass the location to volar_
 
 Use volar for all `.{vue,js,ts,tsx,jsx}` files.
+
 ```lua
 local lspconfig = require('lspconfig')
 
--- lspconfig.tsserver.setup {} 
+-- lspconfig.tsserver.setup {}
 lspconfig.volar.setup {
   filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
   init_options = {
@@ -84,6 +91,7 @@ lspconfig.volar.setup {
 ```
 
 Use `volar` for only `.vue` files and `tsserver` for `.ts` and `.js` files.
+
 ```lua
 local lspconfig = require('lspconfig')
 
@@ -114,31 +122,31 @@ Check out this [discussion](https://github.com/vuejs/language-tools/discussions/
 </details>
 
 [mattn/vim-lsp-settings](https://github.com/mattn/vim-lsp-settings) ⚡ \
-*Vue language server auto configuration for vim-lsp*
+_Vue language server auto configuration for vim-lsp_
 
 [sublimelsp/LSP-volar](https://github.com/sublimelsp/LSP-volar) 🤝 \
-*Vue language client for Sublime*
+_Vue language client for Sublime_
 
 [kabiaa/atom-ide-volar](https://github.com/kabiaa/atom-ide-volar) \
-*Vue language client for Atom*
+_Vue language client for Atom_
 
 [emacs-lsp/lsp-mode](https://github.com/emacs-lsp/lsp-mode) ([jadestrong/lsp-volar](https://github.com/jadestrong/lsp-volar)) ⚡ 🤝 \
-*Vue language client for Emacs*
+_Vue language client for Emacs_
 
 [tommasongr/nova-vue](https://github.com/tommasongr/nova-vue) \
-*Vue language client for Nova*
+_Vue language client for Nova_
 
 [xiaoxin-sky/lapce-vue](https://github.com/xiaoxin-sky/lapce-vue) \
-*Vue language client for Lapce*
+_Vue language client for Lapce_
 
 [Kingwl/monaco-volar](https://github.com/Kingwl/monaco-volar) \
-*Vue language support for Monaco on Browser*
+_Vue language support for Monaco on Browser_
 
 [WebStorm](https://www.jetbrains.com/webstorm/) \
-*Built-in integration for `@vue/language-server`*
+_Built-in integration for `@vue/language-server`_
 
 [Eclipse WildWebDeveloper](https://github.com/eclipse-wildwebdeveloper/wildwebdeveloper) \
-*Vue language server configuration for Eclipse*
+_Vue language server configuration for Eclipse_
 
 \* ⚡ support [multiple servers](https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736) \
 \* 🤝 support [take over mode](https://github.com/vuejs/language-tools/discussions/471) \

examples/basic/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/basic/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "avoid",
+  "trailingComma": "all"
+}

examples/basic/README.md

@@ -0,0 +1,24 @@
+# Vue language tools - Basic example
+
+This is an official example of using the Vue language tools in a VSCode project.
+
+## What's inside?
+
+### Monorepo setup
+
+In this example, we use a monorepo consisting of a component library and a Vue 3 app. We use `pnpm` to manage the dependencies.
+
+### Library bundling and type declarations
+
+[packages/ui](./packages/ui/src/components/generic-select/) A component library that can be imported in other projects. Note how the `package.json` is configured to expose the bundled components as well as the type declarations.
+
+### Generic components
+
+[packages/ui/components/generic-select](./packages/ui/src/components/generic-select/) A select input component that can handle generic model and option values.
+
+## Getting started
+
+1. [Install the `Vue - Official` VScode extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+2. Download this example project and open it in VSCode.
+3. Run `pnpm install` to install the dependencies.
+4. Start exploring

examples/basic/apps/showcase/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/basic/apps/showcase/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/basic/apps/showcase/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "@examples/app",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vue-tsc -b && vite build",
+		"type-check": "vue-tsc -b --force",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"vue": "^3.4.35",
+		"@examples/ui": "workspace:*"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.1.2",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5",
+		"vue-tsc": "^2.0.29"
+	}
+}

examples/basic/apps/showcase/src/App.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import {GenericSelect} from '@examples/ui'
+import {ref} from 'vue'
+
+const selected = ref<string | null>(null)
+</script>
+
+<template>
+  <div>
+    <h1>Showcase</h1>
+    <GenericSelect v-model="selected" :options="[]"></GenericSelect>
+  </div>
+</template>

examples/basic/apps/showcase/src/main.ts

@@ -0,0 +1,4 @@
+import {createApp} from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app')

examples/basic/apps/showcase/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/basic/apps/showcase/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

examples/basic/apps/showcase/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

examples/basic/apps/showcase/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/basic/apps/showcase/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})

examples/basic/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "vue3-vscode",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "pnpm build:ui && pnpm build:app",
+		"build:ui": "pnpm --filter \"@examples/ui\" build",
+		"build:app": "pnpm --filter \"@examples/app\" build"
+	},
+	"dependencies": { },
+	"devDependencies": { }
+}

examples/basic/packages/ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/basic/packages/ui/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@examples/ui",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"module": "dist/ui.lib.es.js",
+	"main": "dist/ui.lib.cjs.js",
+	"types": "dist/types/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/ui.lib.es.js",
+			"require": "./dist/ui.lib.cjs.js"
+		}
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build && vue-tsc -b --force",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"vue": "3.4.35"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.1.2",
+		"@vue/runtime-core": "^3.4.35",
+		"@vue/shared": "^3.4.35",
+		"typescript": "^5.5.4",
+		"vite": "^5.3.5",
+		"vue-tsc": "^2.0.29"
+	}
+}