Vue TS Morph

0.1.0 verified Sat Apr 25 auth: no javascript

A thin library that enables ts-morph (TypeScript compiler API wrapper) to understand Vue single-file components (.vue files). Current version 0.1.0 wraps ts-morph ^24.0.0. Unlike Volar or Vetur, which implement custom LanguageServiceHosts, vue-ts-morph works at the FileSystemHost level—creating virtual .vue.ts files that shadow real .vue files. This makes it the only option for using ts-morph's AST manipulation API (e.g., refactoring, code generation) directly on Vue SFCs without a full language server. Released as experimental (no stable release cadence). Not recommended for production; major limitations: no <template> support, no simultaneous <script setup> + <script> blocks.

Common errors

error TypeError: fileSystem.readFileSync is not a function ↓

cause Missing or incorrect file system host implementation.

fix

Use the provided createVueFileSystemHost() factory function instead of custom implementations.

error Error: Cannot find module 'ts-morph' ↓

cause Missing peer dependency ts-morph.

fix

Run: npm install ts-morph@^24.0.0

error TypeError: sourceFile.getClasses is not a function ↓

cause Accessing AST methods on the .vue source file instead of the virtual .vue.ts source file.

fix

Retrieve the virtual file: const vueFile = project.getSourceFileOrThrow('src/App.vue.ts');

Warnings

breaking Cannot read <template> section; only <script> (and <script setup>) content is available. ↓

fix Do not rely on template AST. Use a Vue compiler (e.g., @vue/compiler-sfc) separately if template analysis is needed.

gotcha Simultaneous <script setup> and <script> blocks are not supported – only one script block per .vue file. ↓

fix Use only <script setup> or a single <script> block. Merge or split into separate files if both are needed.

gotcha Virtual .vue.ts files are created on the fly; direct file system writes to .vue files may not be reflected without recreating the host. ↓

fix Always re-create the file system host (or project) after external modifications to .vue files.

deprecated Package is experimental with no stable release or active maintenance guarantee. ↓

fix Consider using Volar's language service API if you need production-grade Vue TypeScript support.

Install

npm install vue-ts-morph

yarn add vue-ts-morph

pnpm add vue-ts-morph

Imports

createVueFileSystemHost

wrong

const createVueFileSystemHost = require('vue-ts-morph')

correct

import { createVueFileSystemHost } from 'vue-ts-morph'

ESM-only; package ships TypeScript types. Default export not provided.

Project

wrong

import { Project } from 'vue-ts-morph'

correct

import { Project } from 'ts-morph'

Project comes from ts-morph, not vue-ts-morph.

type VueFileSystemHost
wrong
```
import { VueFileSystemHost } from 'vue-ts-morph'
```
correct
```
import type { VueFileSystemHost } from 'vue-ts-morph'
```
Type import for TypeScript users; VueFileSystemHost is not a runtime export.

Quickstart

Shows how to create a ts-morph Project that can read .vue files, add source files from tsconfig, then access the virtual .vue.ts file to query TypeScript AST.

import { createVueFileSystemHost } from 'vue-ts-morph';
import { Project } from 'ts-morph';

const project = new Project({
  fileSystem: createVueFileSystemHost(),
});
project.addSourceFilesFromTsConfig('tsconfig.json');

const sourceFile = project.getSourceFileOrThrow('src/App.vue');
// Access TypeScript AST through the virtual .vue.ts file
const vueTsSourceFile = sourceFile.getExtension() === '.vue' ? project.getSourceFileOrThrow('src/App.vue.ts') : sourceFile;
if (vueTsSourceFile) {
  console.log('Classes:', vueTsSourceFile.getClasses().length);
}