Registry / serialization / tree-sitter-vue

tree-sitter-vue

library0.2.1jsnpmunverified

`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.

serialization

npm install tree-sitter-vue

github ↗package ↗

INSTALL

IMPORT

SIG · TREE-SITTER-VUE

tree-sitter-vue

serializationjavascriptv0.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Parser

✓ const Parser = require('tree-sitter');

✗ import { Parser } from '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

✓ const Vue = require('tree-sitter-vue');

✗ import Vue from '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

✓ parser.setLanguage(Vue);

✗ parser.setLanguage('vue');

The `setLanguage` method expects the loaded grammar object, not a string identifier.

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)))) */

Debug

Known issues

gotchaThis 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.

affects: <=0.2.1

gotchaThe `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.

affects: <=0.2.1

deprecatedThe 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.

affects: <=0.2.1

Errors

Common errors & fixes

Syntax error in template: Unexpected token '<'

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'

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.

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

tree-sitterrequiredRuntime dependency for the core parsing engine.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ikatyang/tree-sitter-vue ↗

packagehttps://www.npmjs.com/package/tree-sitter-vue ↗