language-plugin-pug

@vue/language-plugin-pug

A Pug template language plugin for Vue Language Tools, enabling the use of <template lang="pug"> in Vue SFCs.

Installation

npm install @vue/language-plugin-pug --save-dev

Configuration

Add this plugin in tsconfig.json:

{
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
}

Usage

After configuration, you can use Pug syntax in Vue components:

<template lang="pug">
div.container
  h1 {{ title }}
  p {{ description }}
  button(@click="handleClick") Click me
</template>

<script setup lang="ts">
const title = 'Hello'
const description = 'World'
const handleClick = () => console.log('clicked')
</script>

Features

This plugin implements the VueLanguagePlugin interface, providing:

• getEmbeddedCodes - Identifies <template lang="pug"> blocks
• resolveEmbeddedCode - Extracts Pug content as embedded code
• compileSFCTemplate - Compiles Pug to HTML, then parses it into an AST using @vue/compiler-dom

How it Works

1. Uses pug-lexer to convert Pug syntax into tokens
2. Uses pug-parser to parse tokens into an AST
3. Traverses the AST to generate HTML while building a source map
4. Uses @vue/compiler-dom.parse to parse the HTML
5. Uses @vue/compiler-dom.transform to transform the AST
6. Maps error and warning positions back to the original Pug code via the source map

Related Packages

• @vue/language-core - Core module

License

MIT License