Socket
Socket
Sign inDemoInstall

@vue/compiler-sfc

Package Overview
Dependencies
Maintainers
2
Versions
276
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vue/compiler-sfc

@vue/compiler-sfc


Version published
Weekly downloads
6.8M
decreased by-0.04%
Maintainers
2
Weekly downloads
 
Created

What is @vue/compiler-sfc?

The @vue/compiler-sfc package is designed for pre-compiling Vue Single File Components (SFCs). It provides parsing and compiling functionalities for Vue components, allowing developers to compile template syntax to render functions, extract custom blocks, and handle scoped CSS, among other things.

What are @vue/compiler-sfc's main functionalities?

Parsing Single File Components

This feature allows you to parse Vue SFCs into an object descriptor that contains the structure of the component, including its template, script, and styles.

const { parse } = require('@vue/compiler-sfc');
const { descriptor } = parse('<template><div>Hello World</div></template>');

Compiling Template to Render Function

This feature compiles the template part of a Vue SFC into a JavaScript render function, which can be used by Vue to render the component.

const { compileTemplate } = require('@vue/compiler-sfc');
const { code } = compileTemplate({ source: '<div>{{ message }}</div>', filename: 'example.vue' });

Handling Scoped CSS

This feature processes the style part of a Vue SFC, adding scoping attributes to the styles to ensure they only apply to the current component.

const { compileStyle } = require('@vue/compiler-sfc');
const { code } = compileStyle({ source: '.example { color: red; }', filename: 'example.vue', scoped: true });

Extracting Custom Blocks

This feature allows you to extract custom blocks from a Vue SFC, which can be used for documentation, testing, or other purposes.

const { parse } = require('@vue/compiler-sfc');
const { descriptor } = parse('<custom-block>Some content</custom-block>');
const customBlockContent = descriptor.customBlocks[0].content;

Other packages similar to @vue/compiler-sfc

Keywords

FAQs

Package last updated on 11 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc