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>