1---
2title: Vue
3description: "Configure Vue language support in Zed, including language servers, formatting, and debugging."
4---
5
6# Vue
7
8Vue support is available through the [Vue extension](https://github.com/zed-extensions/vue).
9
10- Tree-sitter: [tree-sitter-grammars/tree-sitter-vue](https://github.com/tree-sitter-grammars/tree-sitter-vue)
11- Language Server: [vuejs/language-tools](https://github.com/vuejs/language-tools)
12
13## Initialization Options
14
15### Specifying location of TypeScript SDK
16
17By default, this extension assumes that you are working in a project with a `node_modules` directory, and searches for
18the TypeScript SDK inside that directory.
19
20This may not always be true; for example, when working in a project that uses Yarn PnP, there is no `node_modules`. For
21editor support, the [documented](https://yarnpkg.com/getting-started/editor-sdks) approach is to run something like
22`yarn dlx @yarnpkg/sdks`. In that case, you can provide the following initialization options in your Zed settings:
23
24```json
25{
26 "lsp": {
27 "vue": {
28 "initialization_options": {
29 "typescript": {
30 "tsdk": ".yarn/sdks/typescript/lib"
31 }
32 }
33 }
34 }
35}
36```
37
38## Settings Options
39
40`lsp.vue.settings` is passed through to the Vue language server (Volar / [`vuejs/language-tools`](https://github.com/vuejs/language-tools)). The following settings are enabled by default:
41
42```json
43{
44 "lsp": {
45 "vue": {
46 "settings": {
47 // Display inlay hints for the `$event` parameter in inline event handlers.
48 "vue.inlayHints.inlineHandlerLeading": true,
49 // Display hints when required component props are missing in templates.
50 "vue.inlayHints.missingProps": true,
51 // Display inlay hints for patterns that wrap component options.
52 "vue.inlayHints.optionsWrapper": true,
53 // Display inlay hints related to `v-bind` shorthand (`:`).
54 "vue.inlayHints.vBindShorthand": true
55 }
56 }
57 }
58}
59```
60
61You can find the upstream settings configuration schema [`here`](https://github.com/vuejs/language-tools/blob/ee5041d27940cf6f9a5150635d3b13140a9dff54/extensions/vscode/package.json#L252).
62
63> Note: Some settings (e.g. `vue.editor.focusMode`) may not take effect.
64
65## Using the Tailwind CSS Language Server with Vue
66
67To get all the features (autocomplete, linting, etc.) from the [Tailwind CSS language server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) in Vue files, you need to configure the language server so that it knows about where to look for CSS classes by adding the following to your `settings.json`:
68
69```json [settings]
70{
71 "lsp": {
72 "tailwindcss-language-server": {
73 "settings": {
74 "includeLanguages": {
75 "vue": "html"
76 },
77 "experimental": {
78 "classRegex": [
79 "class=\"([^\"]*)\"",
80 "class='([^']*)'",
81 ":class=\"([^\"]*)\"",
82 ":class='([^']*)'"
83 ]
84 }
85 }
86 }
87 }
88}
89```
90
91With these settings, you will get completions for Tailwind CSS classes in Vue template files. Examples:
92
93```vue
94<template>
95 <!-- Static class attribute -->
96 <div class="flex items-center <completion here>">
97 <p class="text-lg font-bold <completion here>">Hello World</p>
98 </div>
99
100 <!-- Dynamic class binding -->
101 <div
102 :class="
103 active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
104 "
105 >
106 Content
107 </div>
108
109 <!-- Array syntax -->
110 <div :class="['flex', 'items-center', '<completion here>']">Content</div>
111
112 <!-- Object syntax -->
113 <div
114 :class="{
115 'flex <completion here>': isFlex,
116 'block <completion here>': isBlock,
117 }"
118 >
119 Content
120 </div>
121</template>
122```