{"id":12162,"library":"tree-sitter-vue","title":"Tree-sitter Vue Grammar","description":"`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.","status":"maintenance","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ikatyang/tree-sitter-vue","tags":["javascript","parser","lexer"],"install":[{"cmd":"npm install tree-sitter-vue","lang":"bash","label":"npm"},{"cmd":"yarn add tree-sitter-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add tree-sitter-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the core parsing engine.","package":"tree-sitter","optional":false}],"imports":[{"note":"The core `tree-sitter` library and `tree-sitter-vue` are CommonJS modules. Direct ESM imports are not supported without a bundler or compatibility layer.","wrong":"import { Parser } from 'tree-sitter';","symbol":"Parser","correct":"const Parser = require('tree-sitter');"},{"note":"The `tree-sitter-vue` package exports its grammar object as a CommonJS module. It does not provide a default or named ESM export.","wrong":"import Vue from 'tree-sitter-vue';","symbol":"Vue grammar object","correct":"const Vue = require('tree-sitter-vue');"},{"note":"The `setLanguage` method expects the loaded grammar object, not a string identifier.","wrong":"parser.setLanguage('vue');","symbol":"setLanguage","correct":"parser.setLanguage(Vue);"}],"quickstart":{"code":"const Parser = require(\"tree-sitter\");\nconst Vue = require(\"tree-sitter-vue\");\n\nconst parser = new Parser();\nparser.setLanguage(Vue);\n\nconst sourceCode = `\n<template>\n  Hello, <a :[key]=\"url\">{{ name }}</a>!\n</template>\n`;\n\nconst tree = parser.parse(sourceCode);\nconsole.log(tree.rootNode.toString());\n/* Expected output:\n(component\n  (template_element\n    (start_tag\n      (tag_name))\n      (text)\n      (element\n        (start_tag\n          (tag_name)\n          (directive_attribute\n            (directive_name)\n            (directive_dynamic_argument\n              (directive_dynamic_argument_value))\n            (quoted_attribute_value\n              (attribute_value))))\n        (interpolation\n          (raw_text))\n        (end_tag\n          (tag_name)))\n      (text)\n    (end_tag\n      (tag_name))))\n*/","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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).","severity":"gotcha","affected_versions":"<=0.2.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<=0.2.1"},{"fix":"Evaluate alternatives for actively developed projects or consider forking if extensive updates or new feature support are critical for your use case.","message":"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.","severity":"deprecated","affected_versions":"<=0.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to parse Vue 3+ template syntax or specific Vue 2 features not covered by the 2.6.0 grammar.","error":"Syntax error in template: Unexpected token '<'"},{"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.","cause":"The package (or its dependency) is not correctly installed, or the Node.js runtime/bundler cannot resolve the CommonJS module.","error":"Error: Cannot find module 'tree-sitter-vue' or 'tree-sitter'"}],"ecosystem":"npm"}