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](./publish.md) along with your design system if typings generation was enabled.

References

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>