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## Using the Tailwind CSS Language Server with Vue
14
15To 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`:
16
17```json [settings]
18{
19  "lsp": {
20    "tailwindcss-language-server": {
21      "settings": {
22        "includeLanguages": {
23          "vue": "html"
24        },
25        "experimental": {
26          "classRegex": [
27            "class=\"([^\"]*)\"",
28            "class='([^']*)'",
29            ":class=\"([^\"]*)\"",
30            ":class='([^']*)'"
31          ]
32        }
33      }
34    }
35  }
36}
37```
38
39With these settings, you will get completions for Tailwind CSS classes in Vue template files. Examples:
40
41```vue
42<template>
43  <!-- Static class attribute -->
44  <div class="flex items-center <completion here>">
45    <p class="text-lg font-bold <completion here>">Hello World</p>
46  </div>
47
48  <!-- Dynamic class binding -->
49  <div
50    :class="
51      active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
52    "
53  >
54    Content
55  </div>
56
57  <!-- Array syntax -->
58  <div :class="['flex', 'items-center', '<completion here>']">Content</div>
59
60  <!-- Object syntax -->
61  <div
62    :class="{
63      'flex <completion here>': isFlex,
64      'block <completion here>': isBlock,
65    }"
66  >
67    Content
68  </div>
69</template>
70```