vuejs · davidmatter · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
@@ -4,6 +4,15 @@
 
 💬 **#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) \
@@ -69,10 +78,11 @@ For more information see [#4119](https://github.com/vuejs/language-tools/pull/41
 *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 +94,7 @@ lspconfig.volar.setup {
 ```
 
 Use `volar` for only `.vue` files and `tsserver` for `.ts` and `.js` files.
+
 ```lua
 local lspconfig = require('lspconfig')
 

@@ -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?
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "avoid",
+  "trailingComma": "all"
+}
@@ -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
@@ -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?
@@ -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>
@@ -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"
+	}
+}
@@ -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>
@@ -0,0 +1,4 @@
+import {createApp} from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app')
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -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"]
+}
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./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"]
+}
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
@@ -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": { }
+}
@@ -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?
@@ -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"
+	}
+}
@@ -0,0 +1,25 @@
+<template>
+  <select v-model="model">
+    <option v-for="option in props.options" :key="option.value" :value="option.value">
+      {{ option.label }}
+    </option>
+  </select>
+</template>
+
+<!--
+  Important: To be able to use a generic props interface, we need to
+  move the interface declaration to a seperate script block.
+-->
+<script lang="ts">
+import {SelectOption} from '.'
+
+interface Props<T> {
+  options: SelectOption<T>[]
+}
+</script>
+
+<script lang="ts" setup generic="T extends string|number, TValue extends T | null">
+const props = defineProps<Props<T>>()
+
+const model = defineModel<TValue>({required: true})
+</script>
@@ -0,0 +1,6 @@
+export {default as GenericSelect} from './GenericSelect.vue'
+
+export interface SelectOption<T> {
+  label: string
+  value: T
+}
@@ -0,0 +1,2 @@
+export * from './components/generic-select';
+
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}