Vue

Vue is a progressive framework for building user interfaces. It is designed to be incrementally adoptable and scalable.

Basically, it does the same thing as React but better.

Vue SFC Basics

Most Vue apps use Single File Components.

#sfc.vue
+ `setup` is the new recommended syntax for composition API.
+ It provides better TS support and less boilerplate.

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

+ template can access reactive state directly without `.value`
<template>
	<button @click="count++">Count: {{ count }}</button>
</template>

+ scoped styles only apply to this component
<style scoped>
button {
	font-weight: 600;
}
</style>

Reactivity Essentials

For reactivity, Vue provides ref, reactive, computed, and watch.

ref creates a reactive primitive value.
reactive creates a reactive object.

[!WARNING] reactive vs ref Unlike ref, which requires you to append .value, reactive properties are accessed directly, making the code cleaner.

import { reactive } from 'vue';

// @log: reactive can not hold primitives like numbers or strings
const framework = reactive({
  name: 'Vue',
  version: '3.0'
})

framework.name = 'Vue.js';

// @errors: 2345
const count = reactive(0)

import { ref } from 'vue';

const framework = ref({
  name: 'Vue',
  version: '3.0'
})

framework.value.name = 'Vue.js';

const count = ref(0);

computed creates a derived reactive value.

import { computed, ref } from 'vue';

const count = ref(0);

// @log: double will be automatically updated when count changes
const double = computed(() => {
  return count.value * 2;
});

// @errors: 2540
double.value = 4;

watch runs a side-effect function when a reactive source changes.
- Learn more about Watchers.

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

import { reactive, watch } from 'vue';

const user = reactive({
  id: 1,
  name: 'Mahraib Fatima',
  score: 100,
});

// @log: fine grained watching with a getter function
watch(() => user.score, (value) => {
  // Do something when the score changes
});

shallowRef is typically used for performance optimizations of large data structures that don’t require deep reactivity.

import { shallowRef } from 'vue';

const state = shallowRef({ count: 1 })

// @log: does NOT trigger change
state.value.count = 2

// @log: does trigger change
state.value = { count: 2 }

Check Reactivity API: Core and Reactivity API: Advanced.

Template Syntax

Vue directives are special attributes with v- prefix that apply reactive behavior to the DOM.

v-bind can spread multiple props from one object. : is shorthand for v-bind: btw.

<script setup lang="ts">
import User from './components/user.vue';

const user = {
  name: 'Mahraib Fatima',
  score: 100,
}
</script>

<template>
- <User :name="user.name" :score="user.score" />
+ <User v-bind="user" />
</template>

Similarly, v-on can attach multiple listeners from one object, and @ is shorthand for v-on:.

Dynamic components

Use this pattern for tabs, widget renderers, or configurable UI blocks.

<script setup lang="ts">
import { shallowRef } from 'vue';
import User from './components/user.vue';

const component = shallowRef(User)

const user = {
  msg: 'Mahraib Fatima',
  score: 99,
}
</script>

<template>
  <component :is="component" v-bind="user" />
</template>

More about Built-in Special Elements.

Async Components

Async components are loaded on demand, which can improve performance for large apps and reduce initial bundle size.

#async-components.vue
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const user = {
  msg: 'Novid Azhar',
  score: 12,
}

const LazyUser = defineAsyncComponent(() => import('./components/user.vue'));

</script>

<template>
  <LazyUser v-bind="user" />
</template>

Props

defineProps is the recommended way to declare props.

#props.vue 
<script setup lang="ts">
const props = defineProps<{
	title: string;
	done?: boolean;
}>();
</script>

<template>
  <!-- no need for props. prefix in template -->
  <h2>{{ title }}</h2>
</template>

Check Props and Typing Component Props.

Emits

defineEmits is the recommended way to declare emitted events.

[!WARNING] Emits are used to for child-to-parent communication. They allow a child component to send a custom event with optional data payload up to its parent component

<script setup lang="ts">
const emit = defineEmits<{
	save: [id: string];
}>();

function onSave() {
	emit("save", "task-1");
}
</script>

<template>
	<button @click="onSave">Save</button>
</template>

Models

defineModel is used for building two-way component bindings.

#component.vue
<script setup lang="ts">
import { watch } from 'vue';

const title = defineModel<string>("title", { required: true });
const done = defineModel<boolean>("done", { default: false });

watch(title, (newTitle) => {
  console.log("Title changed to:", newTitle);
});
</script>

<template>
  <input v-model="title" />
  <input type="checkbox" v-model="done" />
</template>

[!WARNING] Parent usage

<script setup lang="ts">
import { ref } from 'vue';
import User from './components/user.vue';

const title = ref("")
const done = ref(false)
</script>

<template>
 <User :title :done />
</template>

Expose

defineExpose controls what methods $/$ properties are accessible by the parent when using template refs.

#component.vue
<script setup lang="ts">
import { ref } from 'vue';

const title = ref("")

defineExpose({
  title,
})
</script>

<template>
  <input v-model="title" />
</template>

#app.vue
<script setup lang="ts">
import { ref, watch } from 'vue';
import User from './components/user.vue';

const userRef = ref<InstanceType<typeof User> | null>(null)

watch(() => userRef.value?.title, (newValue) => {
  console.log("Title changed to:", newValue);
})
</script>

<template>
  <User ref="userRef" />
</template>

Transparent Components

Transparent components are wrapper components that forward all parent-provided attributes and listeners to an inner element, bypassing the root element’s automatic attribute inheritance.

#component.vue
<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ inheritAttrs: false })

const title = ref("")
</script>

<template>
  <div>{{ title }}</div>
  <input v-model="title" v-bind="$attrs" />
</template>

[!WARNING] Parent usage All of these attributes will become attributes of input.
<User aria-label="User input" id="user" />
props will not be forwarded to the inner element.

Slots

<slot> is used inside a child component to declare insertion points.
v-slot is used in the parent when providing content to named $/$ scoped slots. # is shorthand for v-slot:.

#user.vue
<!-- Child -->
<template>
  <slot name="header" title="Mahraib" description="a simple blog" />
  <slot name="default" />
</template>

#app.vue
<!-- Parent -->
<template>
  <User>
    <template #header="props"> <!-- or v-slot:header -->
      <h1>{{ props.title }}</h1>
      <p>{{ props.description }}</p>
    </template>

    <!--  slot name is optional, defaults to default  -->
    <template v-slot> <!-- or just # -->
      <p>Here goes the content of the blog</p>
    </template>
  </User>
</template>

You can destructure slot props as well.

<template #header="{ title, description }">
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
</template>

Use the $slots property with a v-if to achieve Conditional Slots.

<template>
  <!-- header will render if parent provides content for #header -->
  <header v-if="$slots.header">
    <slot name="header" title="Mahraib" description="a blog" />
  </header>
  <slot name="default" />
</template>

Check Slots.

Template Refs

Template Refs: There may be cases where we need direct access to the underlying DOM elements. To achieve this, we can use the special ref attribute.
To obtain the reference with Composition API, we can use the useTemplateRef() helper.

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// the first argument must match the ref value in the template
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

Composables

Composables are Vue-aware functions that use reactive APIs $/$ lifecycle hooks.
Utils are plain framework-agnostic functions (formatters, parsers, helpers, etc.)

[!WARNING] Flexible Composable Inputs Try to keep composable arguments flexible by accepting static values, refs, or getters.

Use toValue() or toRef() to normalize them. Reactivity API: Utilities

#useFetch.ts
import { ref, toValue, type MaybeRefOrGetter } from 'vue'

export function useFetch(url: MaybeRefOrGetter<string>) {
  const finalUrl = toValue(url)

  const data = ref<unknown>(null)
  const error = ref<unknown>(null)

  fetch(finalUrl)
    .then((res) => res.json())
    .then((json) => (data.value = json))
    .catch((err) => (error.value = err))

  return { data, error }
}

// @noErrors
// @log: reusable fetch composable with flexible input
import { useFetch } from './fetch.js'
import { ref } from 'vue';

const url = ref('')

const { data, error } = useFetch('https://api.example.com/data')

// @log: works with refs and getters as well
const { data, error } = useFetch(url)
const { data, error } = useFetch(() => url.value)

Check Utility Types.

[!TIP] A simple alternative to a full state management library for small features. Singleton shared state can be implemented with a composable that holds reactive state.

#useTask.ts
import { readonly, ref } from "vue";

const tasks = ref<string[]>([]);

function addTask(task: string) {
	tasks.value.push(task);
}

export function useTask() {
	return {
		tasks: readonly(tasks),
		addTask,
	};
}

Routing

Vue Router is the official router for Vue.js.

File-based routing

File-based routing maps file paths to routes automatically, common in Nuxt. You can use it in Vue with unplugin-vue-router.

It generates typed routes from your file structure and gives type-safe navigation.

VueUse

VueUse is a collection of high-quality composables.

State Management

You can use composables for simple shared state, but for larger apps, a state management library like Pinia is recommended.

Avoid a single giant global store. Instead, create multiple small stores focused on specific domains or features.

Getting Started

Frontend

Vue SFC Basics

Reactivity Essentials

Template Syntax

Dynamic components

Async Components

Props

Emits

Models

Expose

Transparent Components

Slots

Template Refs

Composables

Routing

File-based routing

VueUse

State Management

​Vue SFC Basics

​Reactivity Essentials

​Template Syntax

​Dynamic components

​Async Components

​Props

​Emits

​Models

​Expose

​Transparent Components

​Slots

​Template Refs

​Composables

​Routing

​File-based routing

​VueUse

​State Management

Vue SFC Basics

Reactivity Essentials

Template Syntax

Dynamic components

Async Components

Props

Emits

Models

Expose

Transparent Components

Slots

Template Refs

Composables

Routing

File-based routing

VueUse

State Management