vue-ts-morph

vue-ts-morph

Provides Vue single file component (*.vue) support for ts-morph

Installation / Usage

npm install vue-ts-morph
yarn add vue-ts-morph
pnpm install vue-ts-morph

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

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

Why? And how does it work?

Both ts-morph and Volar implements their own LanguageServiceHost. That fact makes it hard to use them together.

To put it very simply, Volar adds virtual file for each SFC. Vue's older language support Vetur also does it.

While we are not able to pass a custom LanguageServiceHost, we can still implement FileSystemHost interface of ts-morph. This library implements virtual .vue.ts file that translates read/write for source .vue file.

Limitations

Currently does not support <template> section and simultaneous <script setup> and <script> blocks.

<template> support is future work. It could be done by translating to template literal or JSX.