npmpackage.info

@vue/compiler-sfc

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

3.5.13

48,766

MIT

TypeScript

233.08 kB

709,896,133 5.9

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 Score

91.6

Supply Chain

95.3

Quality

87.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

334

Total

5,088

Closed

1,806

Merged

2,948

Issues

Open

647

Total

5,510

Closed

4,863

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

Contributors

546

View All 546 Contributors

Languages

TypeScript

JavaScript

HTML

Vue

CSS

TypeScript (96.31%)

JavaScript (1.89%)

HTML (1.29%)

Vue (0.48%)

CSS (0.03%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

vuejs

Download Statistics

Total Downloads

709,896,133

Last Day

1,592,542

Last Week

8,223,969

Last Month

34,045,846

Last Year

330,978,598

GitHub Statistics

MIT License

48,766 Stars

6,535 Commits

8,490 Forks

756 Watchers

80 Branches

546 Contributors

Updated on Feb 12, 2025

Bundle Size

761.08 kB

Minified

233.08 kB

Minified + Gzipped

Bundlephobia

Maintainers

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

709,896,133

Last Day

3.7%

1,592,542

Compared to previous day

Last Week

5.3%

8,223,969

Compared to previous week

Last Month

51.1%

34,045,846

Compared to previous month

Last Year

49.8%

330,978,598

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

Dangerous-Workflow

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

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

10

Packaging

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

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Code-Review

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

3

Branch-Protection

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

0

Token-Permissions

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

0

CII-Best-Practices

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

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: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
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
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

5.9

/10

Last Scanned on 2025-02-03

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

@vue/component-compiler-utils

3.3.0

Lower level utilities for compiling Vue single file components

@vitejs/plugin-vue

5.2.1

> 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