Code Style

Global

Use 4 spaces to indent, instead of tabs.

Vue

The order can be template, script, style or script, template, style.
If the script is relatively long, template, script, style should be preferred.

<script setup> should be highly preferred over <script>s.
<script>s and <script setup>s should use TypeScript (i.e., <script setup lang="ts"> instead of <script setup lang="js">)

<style scoped> should be highly preferred over <style>s. <style>s and <style scoped> should use SCSS (i.e., <style scoped lang="scss"> instead of <style scoped lang="css">)

Elements that have no children, and has a long attribute list, can be styled like this using with a full indentation:

<element
    attr1="value1"
    attr2="value2"
    class="name"
    id="form-name"
/>

If the element does not support /> (e.g. <div>), it can be styled like this using a full indentation:

<div
    v-if="condition"
    v-for="thing in array"
    :key="thing.id"
    class="square"
    id="square-div"
></div>

If the element has children and a long attribute list, you can use half-tabs (2 spaces instead of 4) to list the attributes, like this:

<div
  v-if="condition"
  v-for="thing in array"
  :key="thing.id"
  class="square"
  id="square-div">
    <img :src="thing.imgSrc" />
</div>

SCSS

SCSS is a superset of CSS, so there's basically no reason not to use SCSS.
SCSS files should be put in ./assets/scss/.
Global selectors should be put in ./assets/scss/global.scss.
Color variables should be put in ./assets/scss/colors.scss.
Non-color constants should be put in ./assets/scss/consts.scss.

Scripts

Scripts should always use TypeScript unless it's really needed to not use it.
General/helper scripts go in ./assets/scripts/.
Type declaration files go in ./assets/types/.