@vue/language-core

@vue/language-core

The core module for Vue Language Tools, responsible for parsing Vue Single File Components (SFCs) and transforming them into virtual code structures that TypeScript can understand. This package is a low-level dependency for @vue/language-server and vue-tsc.

Installation

npm install @vue/language-core

Core API

createVueLanguagePlugin

Creates a Vue language plugin for integration with Volar language services.

import { createVueLanguagePlugin } from '@vue/language-core';
import type { LanguagePlugin } from '@volar/language-core';
import ts from 'typescript';

const plugin: LanguagePlugin<string> = createVueLanguagePlugin(
  ts,
  compilerOptions,    // ts.CompilerOptions
  vueCompilerOptions, // VueCompilerOptions
  (scriptId) => scriptId  // asFileName: Converts scriptId to a file name
);

createParsedCommandLine

Parses TypeScript and Vue compiler options from tsconfig.json.

import { createParsedCommandLine } from '@vue/language-core';
import ts from 'typescript';

const parsed = createParsedCommandLine(ts, ts.sys, '/path/to/tsconfig.json');
// parsed.options: ts.CompilerOptions
// parsed.vueOptions: VueCompilerOptions

parse

Parses Vue SFC source code and returns an SFCParseResult.

import { parse } from '@vue/language-core';

const result = parse(`
<template>
  <div>{{ msg }}</div>
</template>
<script setup lang="ts">
const msg = 'Hello'
</script>
`);

// result.descriptor.template
// result.descriptor.scriptSetup
// result.descriptor.styles
// result.errors

vueCompilerOptions

Configure Vue compiler behavior through the vueCompilerOptions field in tsconfig.json:

{
  "compilerOptions": { /* ... */ },
  "vueCompilerOptions": {
    "target": 3.5,
    "strictTemplates": true,
    "plugins": ["@vue/language-plugin-pug"]
  }
}

File Handling Options

Option	Type	Default	Description
target	number | 'auto'	'auto'	Vue version. 'auto' reads from node_modules/vue/package.json.
extensions	string[]	['.vue']	File extensions to be treated as Vue SFCs.
vitePressExtensions	string[]	[]	File extensions to be treated as VitePress Markdown.
petiteVueExtensions	string[]	[]	File extensions to be treated as Petite Vue HTML.
plugins	string[]	[]	Custom language plugins, e.g., @vue/language-plugin-pug.

Type Checking Options

Option	Type	Default	Description
strictTemplates	boolean	false	A convenience option that enables the four check* options below and strictVModel.
checkUnknownProps	boolean	false	Check for unknown props.
checkUnknownEvents	boolean	false	Check for unknown events.
checkUnknownComponents	boolean	false	Check for unknown components.
checkUnknownDirectives	boolean	false	Check for unknown directives.
strictVModel	boolean	false	Strictly check v-model bindings.
strictCssModules	boolean	false	Strictly check CSS Modules class names (not affected by strictTemplates).

Advanced Options

Option	Type	Default	Description
lib	string	'vue'	Vue package name, used for generating import statements.
skipTemplateCodegen	boolean	false	Skip virtual code generation for templates.
fallthroughAttributes	boolean	false	Enable type inference for fallthrough attributes.
checkRequiredFallthroughAttributes	boolean	false	Check required fallthrough attributes.
jsxSlots	boolean	false	Use JSX-style slots types.
dataAttributes	string[]	[]	Allowed data-* attribute patterns.
htmlAttributes	string[]	['aria-*']	Allowed HTML attribute patterns.
resolveStyleImports	boolean	false	Resolve import statements in styles.
resolveStyleClassNames	boolean | 'scoped'	'scoped'	Resolve class names in styles.

Built-in Plugins

This package includes the following built-in plugins to handle different file types and blocks:

File Parsing Plugins

Plugin	Function	Controlled By
file-vue	Parses .vue files into an SFC structure.	extensions
file-md	Parses Markdown files into an SFC structure.	vitePressExtensions
file-html	Parses HTML files into an SFC structure.	petiteVueExtensions

Virtual Code Generation Plugins

Plugin	Function
vue-tsx	Generates TypeScript virtual code from an SFC.
vue-template-html	Compiles HTML templates.
vue-template-inline-ts	Handles TypeScript expressions in templates.
vue-template-inline-css	Handles inline styles in templates.
vue-style-css	Compiles CSS styles.
vue-script-js	Handles JavaScript script blocks.

Embedded Code Extraction Plugins

Plugin	Function
vue-sfc-template	Extracts the <template> block.
vue-sfc-styles	Extracts <style> blocks.
vue-sfc-scripts	Extracts <script> blocks (for formatting).
vue-sfc-customblocks	Extracts custom blocks.

Related Packages

• @vue/language-server - Language Server
• @vue/language-service - Language Service
• vue-tsc - Command-line Type Checker

License

MIT License

Similar packages

Other packages similar to @vue/language-core

vue-eslint-parser

A parser that converts Vue component files into an AST format that ESLint can understand, enabling linting of Vue files. While it focuses on linting, @vue/language-core offers a broader range of functionalities for analyzing and transforming Vue components.

vuetify-loader

A webpack loader that automatically imports Vuetify components used in a project. It's more specific to Vuetify and webpack, whereas @vue/language-core provides core functionalities applicable to various development tools and environments.