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