volar-docs/docs/cross-language-recipes.md

Cross-Language Recipes (Astro, Svelte, Marko & more)

Docs Index • Repo README • Plugin Authoring • Source Map & Code Gen

Volar’s architecture is not limited to Vue. This guide outlines how teams have adapted Volar’s language-service stack to other component dialects such as Astro, Svelte, and Marko, plus concrete examples of the required plugins and configuration.

Astro

Astro combines multiple frameworks in .astro files. The Astro team built astro-language-tools, which reuses Volar concepts.

Key Ideas

• Implement a language plugin that parses .astro files and produces virtual TypeScript modules for frontmatter, component scripts, and template expressions.
• Expose Astro-specific transforms through @volar/language-core.
• Register custom Volar services for diagnostics (e.g., checking Astro.props usage).

Resources

• astro-language-tools repo (look at pkg/language-server for Volar integration).
• astro VS Code extension uses the Volar-style LSP plus additional analyzers.

Svelte

Svelte has its own LSP, but you can reuse Volar patterns to extend it or embed Svelte files in hybrid projects.

Hybrid Example (Vue + Svelte)

• Use nvim-lspconfig or VS Code multi-root settings to run both the Svelte LSP and Volar simultaneously.
• For shared tooling (e.g., CLI diagnostics), build a language plugin that treats .svelte similarly to .vue, generating TS code via Svelte’s compiler.
• Reference: sveltejs/language-tools. Their svelte2tsx pipeline mirrors Volar’s code-gen approach.

Marko

Marko (eBay) uses .marko files that compile to HTML + JS.

• Implement a language plugin that compiles Marko templates to TypeScript using Marko’s compiler.
• Use @volar/typescript to expose the generated TS to Volar’s language service.
• Provide custom diagnostics for Marko-specific syntax; reuse volar-service-html for HTML-level completions.

Tailwind / CSS frameworks

• Install volar-service-css and community Tailwind plugins (@volar-plugins/tailwind). Configure globs for tailwind.config.js.
• For multi-language files (e.g., .astro + Tailwind), ensure your custom language plugin marks embedded <style> blocks so the CSS service can attach.

Markdown + Vue (MDX-style)

• Use custom language plugins to parse .md/.mdx and extract fenced Vue blocks.
• Register extensions: ["vue", "md"] in vueCompilerOptions.
• Example: VitePress and VuePress use Volar internally to provide IntelliSense inside markdown code fences.

Practical Steps for Any Language

1. Parse Source – Use the language’s compiler/AST to split out scripts/templates/styles.
2. Emit Virtual TS/HTML – Leverage @volar/code-gen to map source segments to generated code.
3. Hook TypeScript – Configure @volar/typescript so TypeScript sees the generated files.
4. Add Services – Register diagnostic/completion services specific to the language (macros, components).
5. Integrate Editors – Use @volar/kit for LSP, @volar/monaco for playgrounds, @volar/editor for custom IDEs.

Example Repositories

• astro-language-tools – Astro + Volar integration.
• windicss/windicss-intellisense – Tailwind-style completions built as Volar services.
• sxzz/vue-macros – Macros across templates; good reference for cross-cutting features.

By following these patterns, you can bring Volar’s robust TypeScript-driven tooling to any component format—just adapt the language plugin/code-gen layer, then reuse the existing language-service infrastructure.***