Vue.js Coding Questions

Create a reactive counter with ref.

import { ref } from "vue";
const count = ref(0);
count.value++;

Compute a full name from refs.

import { computed, ref } from "vue";
const first = ref("Ada");
const last = ref("Lovelace");
const fullName = computed(() => `${first.value} ${last.value}`);

Watch a query and fetch results.

watch(query, async (value) => {
  results.value = await search(value);
});

Bind an input with v-model.

<input v-model="email" type="email" />

Emit a custom event from a child.

const emit = defineEmits(["save"]);
function onSave() {
  emit("save", form.value);
}

Define typed props with defineProps.

const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
});

Provide a theme and inject it.

provide("theme", theme);
const theme = inject("theme");

Render a keyed list.

<li v-for="item in items" :key="item.id">{{ item.label }}</li>

Write a useFetch composable.

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  onMounted(async () => {
    try {
      data.value = await (await fetch(url)).json();
    } catch (e) {
      error.value = e;
    }
  });
  return { data, error };
}

Define a simple Pinia store.

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

Navigate programmatically.

const router = useRouter();
router.push({ name: "user", params: { id } });

Teleport a modal to body.

<Teleport to="body">
  <div class="modal">Content</div>
</Teleport>

Provide a default slot fallback.

<slot>
  <p>Default content</p>
</slot>

Run code on mount.

onMounted(() => {
  console.log("mounted");
});

Memoize expensive list rows.

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  {{ item.label }}
</div>