Vue Syntax

This will bu just a bunch of syntax examples

Script setup with composition API

<template>
  <button type="button" @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'; 
const count = ref(0);

const increment = () => count.value++
</script>
<style lang="scss" scoped>
.button {
  span { color: tomato; }
  &.red { color: red; }
}
</style>

.button {
  span { color: tomato; }
  &.red { color: red; }
}

Options API

<template>
 <div>
  <button type="button" @click="increment">{{ count }}</button>
 </div>
</template>
<script>
export default {
  data: () => ({
     count: 0,
  }),
  methods: {
    increment() { this.count++ },
  },
};
</script>

Very simple example

<template><em class="h">{{h}}</em></template>
<script setup>const h;</script>
<style lang="scss" scoped>em { &.h { color: tomato; } }</style>

Sass and Scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color