npmpackage.info

Gathering detailed insights and metrics for @vue/compiler-sfc

Other packages similar to @vue/compiler-sfc

@vue/component-compiler-utils

3.3.0

Lower level utilities for compiling Vue single file components

@vitejs/plugin-vue

5.2.3

> Note: as of `vue` 3.2.13+ and `@vitejs/plugin-vue` 1.9.0+, `@vue/compiler-sfc` is no longer required as a peer dependency.

@vuedx/compiler-sfc

0.7.2

This package extracts `parse()` function [@vue/compiler-sfc] as ES module.

vue-template-babel-compiler

2.0.0

Post compiler for Vue template render functions to support ES features with Babel

Gathering detailed insights and metrics for @vue/compiler-sfc

@vue/compiler-sfc - 3.5.13 | npmpackage.info

@vue/compiler-sfc

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

3.5.13

49,961

MIT

TypeScript

233.08 kB

812,518,794 6

Installations

npm install @vue/compiler-sfc

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.18.0

NPM Version

10.8.2 Pull Requests

Open

408

Total

5,300

Closed

1,844

Merged

3,048

Issues

Open

670

Total

5,643

Closed

4,973

Releases

238

v3.5.13

Updated on Nov 15, 2024

v3.5.12

Updated on Oct 11, 2024

v3.5.11

Updated on Oct 03, 2024

v3.5.10

Updated on Sep 27, 2024

v3.5.9

Updated on Sep 26, 2024

v3.5.8

Updated on Sep 22, 2024

View All 238 releases

Languages

TypeScript

JavaScript

HTML

Vue

CSS

TypeScript (96.32%)

JavaScript (1.89%)

HTML (1.28%)

Vue (0.48%)

CSS (0.03%)

Developer

vuejs

Download Statistics

Total Downloads

812,518,794

Last Day

1,486,808

Last Week

7,928,072

Last Month

34,749,824

Last Year

363,080,440

GitHub Statistics

MIT License

49,961 Stars

6,609 Commits

8,635 Forks

752 Watchers

105 Branches

555 Contributors

Updated on May 09, 2025

Bundle Size

761.08 kB

Minified

233.08 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 555 Contributors

Package Meta Information

Latest Version

3.5.13

Package Id

@vue/compiler-sfc@3.5.13

Unpacked Size

2.49 MB

Size

568.89 kB

File Count

NPM Version

10.8.2

Node Version

20.18.0

Published on

Nov 15, 2024

Total Downloads

Cumulative downloads

Total Downloads

812,518,794

Dependencies

@babel/parser estree-walker magic-string postcss source-map-js @vue/compiler-core @vue/shared @vue/compiler-dom @vue/compiler-ssr

Dev Dependencies

@babel/types @vue/consolidate hash-sum lru-cache merge-source-map minimatch postcss-modules postcss-selector-parser pug sass

@vue/compiler-sfc

Lower level utilities for compiling Vue Single File Components

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/compiler-sfc. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the main vue/compiler-sfc deep import instead.

This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in vue-loader and @vitejs/plugin-vue.

API

The API is intentionally low-level due to the various considerations when integrating Vue SFCs in a build system:

Separate hot-module replacement (HMR) for script, template and styles
- template updates should not reset component state
- style updates should be performed without component re-render
Leveraging the tool's plugin system for pre-processor handling. e.g. <style lang="scss"> should be processed by the corresponding webpack loader.
In some cases, transformers of each block in an SFC do not share the same execution context. For example, when used with thread-loader or other parallelized configurations, the template sub-loader in vue-loader may not have access to the full SFC and its descriptor.

The general idea is to generate a facade module that imports the individual blocks of the component. The trick is the module imports itself with different query strings so that the build system can handle each request as "virtual" modules:

                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+

Where the facade module looks like this:

1// main script
2import script from '/project/foo.vue?vue&type=script'
3// template compiled to render function
4import { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'
5// css
6import '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'
7
8// attach render function to script
9script.render = render
10
11// attach additional metadata
12// some of these should be dev only
13script.__file = 'example.vue'
14script.__scopeId = 'xxxxxx'
15
16// additional tooling-specific HMR handling code
17// using __VUE_HMR_API__ global
18
19export default script

High Level Workflow

In facade transform, parse the source into descriptor with the parse API and generate the above facade module code based on the descriptor;
In script transform, use compileScript to process the script. This handles features like <script setup> and CSS variable injection. Alternatively, this can be done directly in the facade module (with the code inlined instead of imported), but it will require rewriting export default to a temp variable (a rewriteDefault convenience API is provided for this purpose) so additional options can be attached to the exported object.
In template transform, use compileTemplate to compile the raw template into render function code.
In style transform, use compileStyle to compile raw CSS to handle <style scoped>, <style module> and CSS variable injection.

Options needed for these APIs can be passed via the query string.

For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out @vitejs/plugin-vue or vue-loader.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Security-Policy

Determines if the project has published a security policy.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

5

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/autofix.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/autofix.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/autofix.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/close-cant-reproduce-issues.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/close-cant-reproduce-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lock-closed-issues.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/lock-closed-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-data.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-report.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-report.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:94: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Info: 0 out of 27 GitHub-owned GitHubAction dependencies pinned
Info: 1 out of 21 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

6

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @vue/compiler-sfc

Other packages similar to @vue/compiler-sfc

@vue/compiler-sfc

Installations

Developer Guide

Yes

CommonJS, ESM

20.18.0

10.8.2

Pull Requests

408

5,300

1,844

3,048

Issues

670

5,643

4,973

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

761.08 kB

233.08 kB

Maintainers

Package Meta Information

Total Downloads

812,518,794

Dependencies

Dev Dependencies

@vue/compiler-sfc

API

High Level Workflow

10

10

10

10

10

10

10

5

3

0

0

0

0

0

6

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads