Converting from vue-property-decorator-style to script-setup-style

convert-syntax.md

Container

Vue 2

<script lang="ts">
import { Component, …, Vue } from "vue-property-decorator";
…

@Component(…)
export default class … extends Vue {
}
</script>

Vue 3

<script setup lang="ts">
</script>

Properties

Vue 2

  @Prop({ type: String, required: true }) elementId!: string;

Vue 3

const props = defineProps({ elementId: String });
const elementId = toRef(props, "elementId");

data

Vue 2

  showLoginDialog = false;

Vue 3

import { ref } from "vue";
const showLoginDialog = ref(false);

Computed Properties

Vue 2

  get loginUri() {
    return (
      window.location.origin +
      process.env.BASE_URL +
      "login"
    );
  }

  get weight() {
    return dataStore.weight;
  }

  set weight(value: number | undefined) {
    dataStore.editWeight(value ?? 0);
  }

Vue 3

import { computed } from "vue";

const loginUri = computed(() => (
  window.location.origin +
  process.env.BASE_URL +
  "login"
));

const weight = computed({
  get: () => dataStore.weight,
  set: (value: number | undefined) => dataStore.editWeight(value ?? 0)
});

Emit

Vue 2

@Emit("input")
onInput(value: string) {
  return value;
}

Vue 3

const emit = defineEmits(["update:modelValue"]);
function onInput(value: string) {
  emit("update:modelValue", value);
}

Watch

Vue 2

@Watch("userEdits", { deep: true })
onUserEdit() {
  dataStore.setModified(true);
}

Vue 3

watch(
  userEdits,
  function onUserEdits() {
    dataStore.setModified(true);
  },
  { deep: true },
);

Ref

Vue 2

  @Ref()
  refName!: HTMLElement;

Vue 3

const refName: Ref<HTMLElement> = ref();

Provide

Vue 2

@Provide() alertStore = alertStore;

Vue 3

provide("alertStore", alertStore);

Inject

Vue 2

@Inject() alertStore!: AlertStore;

Vue 3

const alertStore = inject<AlertStore>("alertStore");

Life-cycle hooks

Vue 2

  mounted() {…}

Vue 3

import { onMounted } from "vue";
onMounted(() => {…});

$router

Vue 2

  this.$router.push(…)

Vue 3

import { useRouter } from "vue-router";
const router = useRouter();
router.push(…);