What can a component in Vue contain?

VueJunior~1 min read

A component in Vue is a self-contained module that brings together everything needed to display and run a specific UI fragment: markup, logic, data, styles, events, computations, and so on.

In modern projects this is most often a SFC (Single File Component) - a .vue file, which can contain the following parts:

1. Template

Describes the markup, that is, what the user sees.

Example:

javascript

<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>

2. Script - component logic

Contains:

reactive data (ref, reactive),
methods,
computed properties,
imports,
props,
emit events,
lifecycle hooks.

Example (<script setup>):

javascript

<script setup>
import { ref } from "vue"

const count = ref(0)
</script>

A component can contain any JS code that describes its behavior.

3. Props - input data

A component can accept parameters from its parent:

javascript

<script setup>
defineProps({
  title: String,
  size: {
    type: Number,
    default: 14
  }
})
</script>

4. Emits - events sent to the parent

Needed to notify the parent component about actions:

javascript

<script setup>
const emit = defineEmits(['submit'])

function handleClick() {
  emit('submit')
}
</script>

5. Slots - passing markup into a component

Let components be flexible and reusable:

javascript

<template>
  <div class="card">
    <slot />
  </div>
</template>

6. Lifecycle hooks

A component can perform actions at a specific moment:

javascript

<script setup>
import { onMounted } from "vue"

onMounted(() => {
  console.log("Component mounted")
})
</script>

7. Style (CSS)

Component styles can be:

regular
scoped
global
CSS modules
SCSS/LESS

Example:

javascript

<style scoped>
button {
  background: #333;
  color: white;
}
</style>

8. Computed properties

javascript

<script setup>
import { ref, computed } from "vue"

const first = ref('Vue')
const second = ref('JS')

const full = computed(() => first.value + second.value)
</script>

9. Prop validation and typing

Vue lets you describe data types:

javascript

defineProps({
  count: {
    type: Number,
    required: true,
  }
})

10. Watchers

Tracking reactive values:

javascript

<script setup>
import { ref, watch } from "vue"

const num = ref(0)

watch(num, (newVal) => {
  console.log(newVal)
})
</script>

11. Composables

A component can plug in external logic:

javascript

<script setup>
import useTodo from '@/composables/useTodo'
const { todos, addTodo } = useTodo()
</script>

12. Child components

Other components can be imported and used:

javascript

<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard />
</template>

SUMMARY (cheat sheet)

A component in Vue can contain:

template - HTML structure
script - logic and state
props - input parameters
emits - events
computed - computed values
watch - watchers
lifecycle hooks - lifecycle hooks
slots - nested template
child components - nested components
styles - component styles
composables - plugged-in logic

Put simply: A component is markup + logic + styles + data, combined into one independent module.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.