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.

References #

• Vue Single File Components (aka SFC)
• SFC Syntax Specs

Quick example #

index.vue

<script>
  export default {
    data() {
      return {
        greeting: 'Hello World!',
      };
    },
  };
</script>

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

<style>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>