What are Vue filters and why were they removed in Vue 3?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Vue.js basics — a prerequisite for any developer role.
Answer
Filters were a Vue 2 feature for applying text formatting in template expressions using the pipe operator: {{ price | currency }} {{ date | formatDate("DD/MM") }}. They could be chained: {{ text | capitalize | truncate(50) }}. Defining filters (Vue 2): global: Vue.filter("currency", (value) => "$" + value.toFixed(2)); local: filters: { currency(value) { return "$" + value.toFixed(2); } }. Why removed in Vue 3: (1) Inconsistent with JavaScript — the pipe operator (|) in Vue templates conflicted with JavaScript's bitwise OR operator, causing confusion; (2) Filters break when templates are used in IDE environments expecting valid JavaScript expressions; (3) The functionality is easily replaced by computed properties and methods which are more flexible; (4) Filters add complexity to the template compilation. Migration to Vue 3: replace filters with: (1) Computed properties: for frequently used transformations on data; (2) Methods: for parameterized transformations: {{ formatCurrency(price) }}; (3) Global helper functions: import and use utility functions; (4) Pipes via composables or global properties: app.config.globalProperties.$filters = { currency, formatDate } — accessible as {{ $filters.currency(price) }}.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.