Vue 3

Source file extensions: .vue

Vue Single File Components (aka SFC) is a special file format that allows encapsulation of the template, logic, and styling of a Vue component in a single file.

Supported features

Most SFC features are supported out of the box.

  • <template lang="pug"> to use pug
  • <script lang="ts"> to use Typescript
  • <script setup> to auto setup
  • <style scoped> for scoped styles
  • <style lang="sass"> or <style lang="scss"> to use Saas
  • <style lang="less"> to use Less And more

Check SFC Syntax Specs for more.

When developing components in Typescript, their typings [will be published](./ along with your design system if typings generation was enabled.


Quick example


  export default {
    data() {
      return {
        greeting: 'Hello World!',

  <p class="greeting">{{ greeting }}</p>

  .greeting {
    color: red;
    font-weight: bold;