Tree-sitter Vue Grammar

0.2.1 · maintenance · verified Sun Apr 19

`tree-sitter-vue` provides a specialized grammar for parsing Vue.js template syntax, specifically targeting Vue v2.6.0. It leverages the `tree-sitter` parsing library to generate concrete syntax trees for the template sections within `.vue` files. As of version 0.2.1, its primary focus is on the Vue 2 template syntax itself, explicitly not handling embedded languages like JavaScript within `<script>` tags or CSS within `<style>` tags. Users needing multi-language parsing must integrate other `tree-sitter` grammars for those respective sections. The project appears to be in maintenance mode, with its last commit dating to September 2021, suggesting infrequent releases unless major changes occur in Vue 2 syntax or the `tree-sitter` core. It differentiates itself by offering a robust, structural parse of Vue 2 templates, which is crucial for advanced tooling like linters, formatters, and IDE features that rely on accurate syntax analysis.

Common errors

```
Syntax error in template: Unexpected token '<'
```
cause Attempting to parse Vue 3+ template syntax or specific Vue 2 features not covered by the 2.6.0 grammar.

fix Ensure your Vue project uses Vue 2.6.0 syntax or find a different grammar compatible with your specific Vue version. Inspect the template for unsupported syntax elements.
```
Error: Cannot find module 'tree-sitter-vue' or 'tree-sitter'
```
cause The package (or its dependency) is not correctly installed, or the Node.js runtime/bundler cannot resolve the CommonJS module.

fix Run `npm install tree-sitter-vue tree-sitter`. If using an ESM environment, ensure your bundler (e.g., Webpack, Rollup, Vite) is configured to correctly handle and transpile CommonJS modules.

Warnings

gotcha This grammar is specifically designed for Vue v2.6.0 template syntax. It will misparse or fail on syntax features introduced in Vue 3 and later versions (e.g., `<script setup>`, new directives, fragments).
Fix: For Vue 3 projects, seek out a dedicated `tree-sitter-vue3` grammar (e.g., `tree-sitter-vue3` for Rust) or use a custom parser compatible with the target Vue version. This package is not suitable for Vue 3.
gotcha The `tree-sitter-vue` grammar is explicitly not responsible for parsing embedded languages such as JavaScript/TypeScript within `<script>` blocks or CSS within `<style>` blocks. It focuses solely on the Vue template syntax.
Fix: To achieve full multi-language parsing of Vue SFCs, you must manually combine this grammar with other `tree-sitter` grammars (e.g., `tree-sitter-javascript`, `tree-sitter-css`) for the embedded sections, following Tree-sitter's 'Multi-language Documents' guidelines.
deprecated The project appears to be in maintenance mode, with the last notable commit to the `master` branch in September 2021. It may not receive updates for new Vue features (even within Vue 2) or significant changes in the underlying `tree-sitter` library.
Fix: Evaluate alternatives for actively developed projects or consider forking if extensive updates or new feature support are critical for your use case.

Install

npm install tree-sitter-vue npm
yarn add tree-sitter-vue yarn
pnpm add tree-sitter-vue pnpm

Imports

Parser
wrong:
```
import { Parser } from 'tree-sitter';
```
correct:
```
const Parser = require('tree-sitter');
```
The core `tree-sitter` library and `tree-sitter-vue` are CommonJS modules. Direct ESM imports are not supported without a bundler or compatibility layer.
Vue grammar object
wrong:
```
import Vue from 'tree-sitter-vue';
```
correct:
```
const Vue = require('tree-sitter-vue');
```
The `tree-sitter-vue` package exports its grammar object as a CommonJS module. It does not provide a default or named ESM export.
setLanguage
wrong:
```
parser.setLanguage('vue');
```
correct:
```
parser.setLanguage(Vue);
```
The `setLanguage` method expects the loaded grammar object, not a string identifier.

Quickstart

This quickstart demonstrates how to initialize the Tree-sitter parser with the Vue grammar and parse a basic Vue 2 template string, then print its root node's S-expression representation.

const Parser = require("tree-sitter");
const Vue = require("tree-sitter-vue");

const parser = new Parser();
parser.setLanguage(Vue);

const sourceCode = `
<template>
  Hello, <a :[key]="url">{{ name }}</a>!
</template>
`;

const tree = parser.parse(sourceCode);
console.log(tree.rootNode.toString());
/* Expected output:
(component
  (template_element
    (start_tag
      (tag_name))
      (text)
      (element
        (start_tag
          (tag_name)
          (directive_attribute
            (directive_name)
            (directive_dynamic_argument
              (directive_dynamic_argument_value))
            (quoted_attribute_value
              (attribute_value))))
        (interpolation
          (raw_text))
        (end_tag
          (tag_name)))
      (text)
    (end_tag
      (tag_name))))
*/

view raw JSON →