Vue Interview Questions and Answers

What is Vue.js? What are its key features?

• Vue.js is a progressive JavaScript framework for building user interfaces. Key features include:
  • Progressive: Can be adopted incrementally.
  • Component-Based: Building UIs with reusable components.
  • Reactive: Automatic updates of the UI when data changes.
  • Virtual DOM: Efficient rendering using a virtual representation of the UI.
  • Declarative Templates: Easy-to-understand HTML-based templates.
  • Lightweight: Relatively small library size.

Explain the concept of a Vue Instance. What is the purpose of the `el` and `data` options?

• A Vue Instance (`new Vue()`) is the root of a Vue application. It controls a specific part of the DOM.
  • `el`: Specifies the DOM element that the Vue instance will mount to and control.
  • `data`: An object or function that returns an object, containing the reactive data properties for the instance.

What is Data Binding in Vue.js? How is it achieved?

• Data binding is the synchronization of data between the model (JavaScript data) and the view (DOM). It's achieved primarily through directives like:
  • Interpolation (`{{ }}`) for text content.
  • `v-bind` for dynamic attributes.
  • `v-model` for two-way binding on form inputs.

Explain the difference between `v-if` and `v-show`. When would you use each?

• `v-if`: Conditionally renders or destroys an element based on a truthy/falsy expression. The element is removed from the DOM when the condition is false. Use when the element's presence in the DOM frequently changes or if initial rendering cost is high.
• `v-show`: Conditionally displays an element based on a truthy/falsy expression. The element is always in the DOM but its display is toggled using CSS (`display: none;`). Use when the element is toggled frequently or if the initial rendering cost is low.

What is `v-for` used for? How do you iterate over an array and an object?

• `v-for` is used for list rendering, iterating over an array or an object to render a list of elements.
  • Array: `
  • {{ item }}
  ` (item is the element, index can be accessed as `(item, index) in items`).
• Object: `
• {{ key }}: {{ value }}
` (value, key, and optional index).

What is the purpose of the `key` attribute when using `v-for`?

• The `key` attribute provides a unique identifier for each item in a list rendered by `v-for`. Vue uses the `key` to track each node's identity and efficiently update the list when data changes. It helps Vue reuse and reorder elements rather than re-rendering them, improving performance and preventing potential issues with component state.

Explain the concept of Computed Properties. When would you use them?

• Computed properties are properties whose values are derived from other reactive data. They are cached based on their dependencies and only re-evaluate when a dependency changes. Use computed properties for complex logic that derives a value from existing data, especially when that logic is used in the template. They are more efficient than methods for this purpose because of caching.

Explain the concept of Watchers. When would you use them?

• Watchers are used to perform side effects in response to changes in a specific data property. They are more general-purpose than computed properties. Use watchers when you need to perform asynchronous operations, make API calls, or perform other side effects when a specific piece of data changes.

What is the difference between Computed Properties and Watchers?

• Computed Properties: Used for deriving new data based on existing reactive data. Cached based on dependencies. Used in templates.
• Watchers: Used for performing side effects in response to specific data changes. Not cached. More flexible for complex logic or asynchronous operations.

Describe the Vue Instance Lifecycle Hooks. Name a few important ones.

• Vue instances go through a series of initialization steps. Lifecycle hooks are functions that are called at specific stages. Important hooks:
  • `beforeCreate`: Instance initialization, but data/events not set up.
  • `created`: Instance created, data and events set up, but DOM not mounted.
  • `beforeMount`: Template compiled, but not yet mounted to the DOM.
  • `mounted`: Instance mounted to the DOM, `$el` is available. Good for DOM manipulation or fetching data.
  • `beforeUpdate`: Data changes, before the DOM is re-rendered.
  • `updated`: DOM re-rendered after data changes.
  • `beforeDestroy` / `beforeUnmount` (Vue 3): Instance is about to be destroyed. Good for cleanup.
  • `destroyed` / `unmounted` (Vue 3): Instance destroyed, event listeners and directives unbound.

What are Vue Components? What are the benefits of using them?

• Vue Components are reusable Vue instances with a name. They allow you to split your UI into smaller, self-contained, and reusable pieces. Benefits include:
  • Reusability: Use the same component multiple times.
  • Maintainability: Easier to manage and update smaller code units.
  • Readability: Makes your template more organized.
  • Testability: Components can be tested in isolation.

Explain Single File Components (`.vue` files). What are the three main sections?

• Single File Components (SFCs) encapsulate a component's template, script, and style into a single `.vue` file. The three main sections are:
  • `<template>`: Contains the component's HTML structure.
  • `<script> `: Contains the component's JavaScript logic (data, methods, computed, etc.).
  • `<style>`: Contains the component's CSS, which can be scoped to the component.

How do you pass data from a parent component to a child component?

• Using Props. The parent component passes data to the child component as attributes on the child component's tag in the template. The child component declares the props it expects to receive using the `props` option.

How do you communicate from a child component to a parent component?

• Using Custom Events. The child component emits an event using `$emit('event-name', payload)`. The parent component listens for this event using `v-on:` or `@` on the child component's tag in its template.

What are Slots? When would you use them?

• Slots are a mechanism for component composition, allowing you to inject content into a child component from its parent. You would use them when you want to create reusable container components or components where the inner content is determined by the parent (e.g., a modal component with a customizable header, body, and footer).

Explain the difference between Named Slots and Scoped Slots. (Vue 2)

• Named Slots: Slots with a specific name, allowing the parent to target where content should be placed within the child's template.
• Scoped Slots: Slots that allow the parent component to access data from the *child* component when rendering the slot content. This is useful for rendering list items where the child component provides the data for each item.

How do you handle styling in Single File Components? What is `scoped` CSS?

• Styling is done within the `<style>` section of an SFC. Adding the `scoped` attribute to the `<style>` tag limits the CSS rules to the current component only, preventing styles from leaking to other components. Vue achieves this by adding unique data attributes to the component's elements and modifying the CSS selectors.

What is `v-model` used for? How does it work internally on input elements?

• `v-model` is used for creating two-way data bindings on form input elements. It simplifies syncing the input value with a data property. Internally, for text inputs, `v-model` is syntactic sugar for binding the `value` attribute with `v-bind:value` and listening for the `input` event with `v-on:input`.

What is Vue Router? What is its main purpose?

• Vue Router is the official routing library for Vue.js. Its main purpose is to manage navigation between different "pages" or "views" in a Single Page Application (SPA) built with Vue. It maps URL paths to Vue components and handles transitions.

How do you define routes in Vue Router?

• Routes are defined in a JavaScript array, where each object represents a route. Each route object typically has a `path` (the URL path) and a `component` (the Vue component to render when the path matches).

What are Navigation Guards in Vue Router? Name a few types.

• Navigation Guards are functions that are executed before, during, or after navigation. They are used to control access to routes, perform asynchronous operations before loading a view, or modify the navigation flow. Types include:
  • Global Guards (`beforeEach`, `afterEach`).
  • Per-Route Guards (`beforeEnter`).
  • In-Component Guards (`beforeRouteEnter`, `beforeRouteUpdate`, `beforeRouteLeave`).

What is Vuex? What problem does it solve?

• Vuex is the official state management library for Vue.js. It provides a centralized store for all components in an application, managing the application's state in a predictable way. It solves the problem of managing shared data between components, especially in large applications, where passing data with props and events becomes complex and hard to track.

Explain the core concepts of Vuex: State, Getters, Mutations, Actions.

• State: The single source of truth, containing the application's data.
• Getters: Computed properties for the store's state. Used to derive data from the state.
• Mutations: Synchronous functions that are the *only* way to change the state. They are committed using `store.commit()`.
• Actions: Functions that can contain asynchronous operations. They commit mutations to change the state. They are dispatched using `store.dispatch()`.

Why are Mutations synchronous and Actions asynchronous?

• Mutations must be synchronous to ensure that the state changes are predictable and trackable. If mutations were asynchronous, it would be difficult to debug state changes. Actions are where asynchronous logic (like API calls) is performed before committing a synchronous mutation to update the state.

How do you access state and getters from components in Vuex?

• Using the `mapState` and `mapGetters` helper functions (or accessing directly with `$store.state` and `$store.getters`).

How do you trigger mutations and actions from components in Vuex?

• Using the `mapMutations` and `mapActions` helper functions (or accessing directly with `$store.commit()` and `$store.dispatch()`).

What is the difference between `v-bind:class` and `v-bind:style`?

• `v-bind:class` (or `:class`) is used to dynamically bind CSS classes to an element. It can accept a string, an object, or an array.
• `v-bind:style` (or `:style`) is used to dynamically bind inline CSS styles to an element. It can accept a string or an object.

Explain the concept of Custom Directives. When would you use them?

• Custom Directives are used to add low-level DOM manipulation or behavior to elements. You would use them when you need to directly interact with the DOM in a reusable way, often for tasks that are not easily achieved with standard Vue features (e.g., focusing an input on load, drag-and-drop functionality).

What are Mixins? What are their potential drawbacks?

• Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options (data, methods, lifecycle hooks, etc.), and when a component uses a mixin, all of the mixin's options are "mixed into" the component's own options. Potential drawbacks include:
  • Name Collisions: Options with the same name from different mixins or the component itself can override each other, making it hard to track the source of behavior.
  • Implicit Dependencies: Mixins can implicitly depend on properties or methods from the component, making them harder to understand and maintain in isolation.
  • Difficult to Reason About: Tracing where a specific property or method comes from can be difficult in components that use multiple mixins.

What is the Composition API (Vue 3)? Why was it introduced?

• The Composition API is a set of APIs in Vue 3 that allows you to author Vue components using imported functions instead of declaring options. It was introduced to address the limitations of the Options API, particularly in large components, by providing a more flexible way to organize and reuse logic. It improves code organization, reusability, and TypeScript support.

Explain `ref` and `reactive` in the Composition API.

• `ref`: Creates a reactive reference to a primitive value (or an object). You access/modify its value using the `.value` property.
• `reactive`: Creates a reactive proxy of a JavaScript object. You access/modify its properties directly.

What is the purpose of `setup()` function in the Composition API?

• The `setup()` function is the entry point for using the Composition API within a component. It is executed before the component is created. Inside `setup()`, you declare reactive state, computed properties, watchers, and methods, and return them as an object to be exposed to the template.

How do you define computed properties and watchers using the Composition API?

• `computed`: Use the `computed()` function, passing a getter function (and optionally a setter function).
• `watch`: Use the `watch()` function, passing the source (a ref, reactive object, or getter function) and a callback function.
• `watchEffect`: A simpler watcher that automatically tracks its dependencies and re-runs when any of them change.

What are Composables in the Composition API?

• Composables are functions that leverage the Composition API to encapsulate and reuse stateful logic. They are typically named starting with `use` (e.g., `useMousePosition`). They are a key pattern for organizing and sharing logic across components using the Composition API.

What is the difference between `v-once` and `v-memo` (Vue 3)?

• `v-once`: Renders the element and its contents only once on the initial render. Subsequent data changes will not update this element. Useful for static content.
• `v-memo`: Caches a sub-tree of the template. If the values provided to `v-memo` are the same as the last render, Vue skips rendering that sub-tree entirely. More granular caching than `v-once`.

What is the purpose of the `nextTick()` method?

• `nextTick()` is a utility function that queues a callback function to be executed after the next DOM update cycle. Use it when you need to perform actions that depend on the DOM being fully updated after a state change.

How do you handle asynchronous operations in Vue (e.g., fetching data)?

• Using `async`/`await` with `fetch` or Axios in component methods, created/mounted hooks, or within Vuex actions.

What is the difference between component registration globally and locally?

• Global Registration: The component is registered with `Vue.component()` (Vue 2) or `app.component()` (Vue 3) before the root instance is created. The component can then be used anywhere in the application without explicit import.
• Local Registration: The component is imported and registered within the `components` option of the parent component. It can only be used within that specific parent component's template.

When would you choose local registration over global registration?

• Local registration is generally preferred because it makes component dependencies explicit, improves code maintainability, and allows build tools to effectively tree-shake unused components, resulting in smaller bundle sizes. Global registration is convenient for small, frequently used components but can lead to larger bundle sizes.

How do you handle errors in Vue applications?

• Using the `errorHandler` configuration option to define a global error handler for unhandled errors within components.
• Using `try...catch` blocks for handling errors in asynchronous operations (API calls, etc.).
• Using error boundaries (though less built-in than in React, you can implement similar patterns).

What is the purpose of the `v-slot` directive (Vue 3)?

• `v-slot` is the unified syntax for slots in Vue 3, replacing `slot` and `slot-scope` from Vue 2. It's used to define both named slots and scoped slots.

How do you create a Custom Input Component that works with `v-model`?

• The custom component needs to accept a `value` prop (by default, configurable with `model` option in Vue 2 or `modelValue` prop in Vue 3).
• It needs to emit an `input` event (by default, configurable with `model` option in Vue 2 or `update:modelValue` event in Vue 3) with the new value whenever the input value changes.

What is the purpose of the `keep-alive` component?

• `keep-alive` is a built-in wrapper component that caches inactive component instances when they are dynamically switched. This preserves their state and avoids re-rendering, improving performance for frequently switched components.

What are Functional Components? When would you use them? (Vue 2)

• Functional components are stateless and instance-less components. They don't have data, computed properties, methods, or lifecycle hooks. They are simply functions that take `props` and `context` (containing listeners, children, slots) and return a VNode. They are slightly more performant than regular components and are suitable for purely presentational components. (Less relevant in Vue 3 with Composition API).

What is the difference between `v-bind` and `v-model`? (Revisited)

• `v-bind`: One-way binding of data to an attribute.
• `v-model`: Two-way binding, synchronizing data with form input values.

What is the purpose of the `provide` and `inject` options?

• `provide` and `inject` are used for dependency injection, allowing a parent component to "provide" data or dependencies that can be "injected" by any descendant component in the hierarchy, regardless of how deeply nested they are. This is useful for passing data that is needed by many components without having to pass it down through every level of the component tree with props.

What are Transitions in Vue.js? How do you use them?

• Transitions allow you to add animations and transitions when elements are inserted, updated, or removed from the DOM. You use the `` component to wrap the element(s) you want to transition. Vue automatically applies CSS classes during the transition process, which you can then style with CSS animations or transitions.

How do you handle list transitions?

• Using the `` component. It renders a real DOM element (by default a `<span>`) and applies transition classes to its children. It also handles "moving" transitions when the order of items changes.

What is the purpose of the `is` attribute on a component?

• The `is` attribute is used for dynamic components, allowing you to render different components based on a data property. You use ``, where `currentComponent` is a string or component definition.

What is the Virtual DOM? How does Vue use it?

• The Virtual DOM is a lightweight JavaScript object representation of the actual DOM. Vue uses the Virtual DOM to efficiently update the real DOM. When data changes, Vue creates a new Virtual DOM tree, compares it to the previous one (diffing), and then applies only the necessary changes to the real DOM (patching). This minimizes direct manipulation of the real DOM, which is often expensive.

What is the difference between Vue 2 and Vue 3? (Key differences)

• Composition API: Introduced in Vue 3 for better logic organization and reusability.
• Performance: Vue 3 is generally faster due to a rewritten Virtual DOM and other optimizations.
• Smaller Bundle Size: Vue 3 is more tree-shakable.
• Improved TypeScript Support: Vue 3 has better type inference.
• Fragments: Components can have multiple root nodes in Vue 3.
• Teleports: Rendering content in a different part of the DOM tree.
• Suspense (Experimental): Handling asynchronous components.
• Global API Changes: `Vue.component`, `Vue.use`, etc., are moved to the application instance (`app.component`, `app.use`).

What is the Vue CLI? What are its main features?

• The Vue CLI is a standard tooling baseline for Vue.js development. Main features include:
  • Interactive project scaffolding.
  • Instant prototyping.
  • Plugin system for adding features (Babel, TypeScript, PWA, etc.).
  • GUI for project management.
  • Optimized production builds (Webpack configured).

How do you integrate a third-party library into a Vue project?

• Install the library using npm or yarn.
• Import the necessary parts of the library into your component, main application file, or a plugin.
• Use the library's functionality as needed.
• For UI libraries, you might need to register components or use specific directives.

What is Server-Side Rendering (SSR) in Vue.js? What are its benefits?

• SSR is rendering Vue components into HTML strings on the server, and then sending that HTML to the browser. The browser then "hydrates" the static markup into a fully interactive SPA. Benefits include:
  • Improved SEO: Search engine crawlers can easily index the content.
  • Faster Time-to-Content: Users see the content sooner as the HTML is delivered directly.
  • Better Performance on Low-End Devices: Less JavaScript processing on the client.

What is Nuxt.js? How is it related to Vue.js?

• Nuxt.js is a higher-level framework built on top of Vue.js. It provides conventions and features for building Universal (SSR), Static Generated (SSG), and Single Page Applications with Vue, abstracting away much of the complex configuration required for SSR or SSG.

What is Static Site Generation (SSG) in Vue.js? What are its benefits?

• SSG is pre-rendering your application into static HTML files at build time. These static files are then served directly to the browser. Benefits include:
  • Excellent Performance: Pages are served as static files, which are very fast.
  • Improved Security: No server-side processing for dynamic content.
  • Easy Deployment: Can be hosted on any static hosting service.
  • Great SEO: Content is readily available for crawlers.

What is the purpose of the `ref` attribute on a component or element?

• The `ref` attribute is used to obtain a direct reference to a child component instance or a DOM element. You access these references using `$refs` on the component instance. Use `ref` sparingly, as it breaks the data flow principles (props down, events up) and should generally be avoided for component communication.

How do you handle events in Vue? What are event modifiers?

• Events are handled using the `v-on:` or `@` directive. Event modifiers are suffixes that can be added to event listeners to modify their behavior (e.g., prevent default, stop propagation, only trigger once). Examples: `.prevent`, `.stop`, `.once`, `.capture`, `.self`, `.passive`.

What is the purpose of the `sync` modifier? (Vue 2)

• The `.sync` modifier (syntax sugar for updating a prop) was used to allow a child component to "synchronize" a prop value with the parent. The child would emit an update event (e.g., `this.$emit('update:myProp', newValue)`) and the parent would listen with `:myProp.sync`. (Replaced by `.sync` on `v-model` in Vue 3).

What is the difference between `v-once` and `v-memo`? (Revisited)

• `v-once`: Renders once, never updates. `v-memo`: Caches based on provided values, updates if values change.

What is the purpose of the `nextTick()` method? (Revisited)

• Executing code after the next DOM update cycle.

How do you handle asynchronous operations in Vue? (Revisited)

• Using `async`/`await` with Fetch/Axios in methods, hooks, or Vuex actions.

What is the difference between component registration globally and locally? (Revisited)

• Global: Available everywhere. Local: Available only in the parent component. Local is generally preferred.

When would you choose local registration over global registration? (Revisited)

• For better dependency tracking, maintainability, and tree-shaking.

How do you handle errors in Vue applications? (Revisited)

• Using `errorHandler`, `try...catch`, and potentially error boundaries.

What is the purpose of the `v-slot` directive (Vue 3)? (Revisited)

• Unified syntax for named and scoped slots.

How do you create a Custom Input Component that works with `v-model`? (Revisited)

• Accepting `value`/`modelValue` prop and emitting `input`/`update:modelValue` event.

What is the purpose of the `keep-alive` component? (Revisited)

• Caching inactive component instances to preserve state and improve performance.

What are Functional Components? (Revisited)

• Stateless, instance-less components for simple rendering (less relevant in Vue 3).

What is the purpose of the `provide` and `inject` options? (Revisited)

• Dependency injection for passing data down the component hierarchy.

What are Transitions in Vue.js? How do you use them? (Revisited)

• Adding animations/transitions for element insertion/removal using ``.

How do you handle list transitions? (Revisited)

• Using the `` component.

What is the purpose of the `is` attribute on a component? (Revisited)

• Rendering dynamic components based on a data property.

What is the Virtual DOM? How does Vue use it? (Revisited)

• JavaScript representation of the DOM used for efficient updates via diffing and patching.

What is the difference between Vue 2 and Vue 3? (Key differences) (Revisited)

• Composition API, performance, bundle size, TypeScript, Fragments, Teleports, Suspense, Global API changes.

What is the Vue CLI? (Revisited)

• Standard tooling for Vue development (scaffolding, plugins, builds).

How do you integrate a third-party library? (Revisited)

• Install with npm/yarn, import, and use.

What is Server-Side Rendering (SSR)? What are its benefits? (Revisited)

• Rendering on the server for SEO, faster time-to-content, better performance.

What is Nuxt.js? (Revisited)

• A framework built on Vue for SSR, SSG, etc.

What is Static Site Generation (SSG)? What are its benefits? (Revisited)

• Pre-rendering to static HTML at build time for performance, security, easy deployment, SEO.

What is the purpose of the `ref` attribute on a component or element? (Revisited)

• Getting a direct reference to a component instance or DOM element.

How do you handle events? What are event modifiers? (Revisited)

• Using `v-on`/`@` and suffixes like `.prevent`, `.stop`.

What is the purpose of the `sync` modifier? (Vue 2) (Revisited)

• Syntax sugar for updating a prop from a child. (Replaced in Vue 3).

What is the purpose of `v-pre` directive?

• `v-pre` skips compilation for the element and its children. This can be used to display raw mustache tags (`{{ }}`) or directives without Vue processing them. Useful for displaying template syntax examples.

What is the purpose of `v-cloak` directive?

• `v-cloak` is used to hide uncompiled mustache tags until the Vue instance is ready. It works by adding a CSS rule like `[v-cloak] { display: none }`. Once the Vue instance mounts, the `v-cloak` attribute is removed, making the element visible. It helps prevent the "flash of uncompiled templates".

How do you handle global state management without Vuex (for smaller applications)?

• Using the `provide`/`inject` API.
• Using a simple global event bus (less recommended for complex state).
• Creating a simple reactive object outside of components and importing it where needed (especially with Composition API and `reactive`).

What are Render Functions? When would you use them? (Revisited)

• Programmatically creating VNodes. Useful for highly dynamic components or when you need more programmatic control over the rendering process than templates provide.

What is the difference between a Component and a Vue Instance?

• A Vue Instance (`new Vue()` or `createApp()` in Vue 3) is the root of a Vue application and controls a specific part of the DOM. A Component is a reusable Vue instance with a name, designed to be used *within* a Vue application. Components are building blocks, while the instance is the application container.

How do you optimize performance in a Vue application?

• Using `key` with `v-for`.
• Lazy loading components and routes.
• Using `v-once` or `v-memo` for static content.
• Optimizing images and assets.
• Using Fast Renderers (if applicable, less relevant in Vue 3).
• Analyzing and reducing bundle size.
• Avoiding unnecessary reactive data or complex watchers.
• Using computed properties effectively.
• Implementing virtual scrolling for long lists.

What is Prop Drilling? How can you avoid it?

• Prop drilling is the process of passing data down through multiple levels of nested components via props, even if intermediate components don't directly use the data. It makes components less reusable and code harder to maintain. You can avoid it using:
  • Vuex for centralized state management.
  • `provide`/`inject` for dependency injection.
  • Composition API and Composables to share stateful logic.

What is the purpose of the `emit` option in Vue 3?

• The `emit` option is used to explicitly declare the custom events that a component might emit. This improves code clarity and allows Vue to provide warnings for undeclared emitted events.

What are Teleports in Vue 3? When would you use them?

• Teleports allow you to render a part of a component's template into a different location in the DOM tree, outside of the component's normal DOM hierarchy. You would use them for things like modals, dropdowns, or notifications that need to be rendered directly under the ` <body> ` tag to avoid z-index issues or being clipped by parent containers.

What is Suspense in Vue 3? (Experimental)

• Suspense is an experimental feature in Vue 3 that allows you to handle asynchronous component loading and display fallback content while the component is being loaded.

How do you use TypeScript with Vue.js?

• Use the Vue CLI with the TypeScript preset.
• Use the Composition API, which has excellent TypeScript support.
• Use the Options API with type inference or explicitly define types for component options (props, data, etc.) using `defineComponent` or class-based components (less common).

What is the difference between `ref` and `reactive` in terms of unwrapping?

• `ref`: Automatically unwrapped in templates. Needs `.value` in `<script>` unless accessed within a `reactive` object (which also unwraps it).
• `reactive`: Properties are accessed directly in both templates and `<script>`.

What is the purpose of the `toRefs` function in the Composition API?

• `toRefs` converts a reactive object into a plain object where each property is a `ref` pointing to the original reactive object's corresponding property. This is useful when destructuring a reactive object from a composable, allowing the destructured variables to retain reactivity.

How do you handle global properties or functions in Vue 3?

• Using `app.config.globalProperties` to add properties that can be accessed on any component instance (`this.$myGlobalProperty`).
• Using `app.provide` and `inject` for more targeted dependency injection.

What is the purpose of the `defineComponent` helper in Vue 3?

• `defineComponent` is a helper function that provides type inference for component options when using TypeScript. It also helps with tooling support.

What is the purpose of the `v-is` directive? (Vue 3)

• `v-is` is used for customizing the element that a built-in component (like `` or `
• `) renders as. It's often used with accessibility features or third-party libraries that expect specific element types.

How do you handle internationalization (i18n) in a Vue application?

• Using a library like `vue-i18n`. It provides components and APIs for managing translations, pluralization, and localization.

What are Vue Devtools? What are their key features?

• Vue Devtools is a browser extension that provides tools for debugging Vue applications. Key features include:
  • Inspecting the component tree.
  • Viewing and editing component data, props, computed properties, and state.
  • Tracking Vuex state changes and mutations.
  • Monitoring events.
  • Performance profiling.

How do you test Vue components? Name some libraries.

• Using Unit Testing frameworks (Jest, Mocha, Vitest).
• Using Vue Test Utils (official utility library for testing Vue components).
• Using End-to-End testing frameworks (Cypress, Nightwatch.js).

What is the difference between shallow mounting and full mounting in Vue Test Utils?

• Shallow Mounting: Renders the component only one level deep, stubbing out its child components. Useful for unit testing a component in isolation without worrying about its children's behavior.
• Full Mounting: Renders the component and all of its children. Useful for integration testing or testing components that heavily interact with their children.

What is the purpose of Linting and Formatting tools (ESLint, Prettier) in Vue development?

• Linting (ESLint): Analyzes code for potential errors, stylistic issues, and adherence to coding standards. Helps catch bugs early.
• Formatting (Prettier): Automatically formats code to a consistent style, improving readability and reducing debates about formatting.

What is the purpose of the `scoped` attribute on the `<style>` tag? (Revisited)

• To limit the CSS rules to the current component only.

What are the benefits of using Single File Components? (Revisited)

• Encapsulation, reusability, organization, readability, tooling support.

How do you handle global CSS in a Vue project?

• Create separate CSS files (e.g., `global.css`) and import them in your main application file (`main.js` or `main.ts`).
• Use a `<style>` block in your App component *without* the `scoped` attribute.

What is the difference between a `method` and a `computed` property? (Revisited)

• Method: A function that is executed every time it is called. Computed: A derived property that is cached based on dependencies.

What is the purpose of the `watch` option? (Revisited)

• Performing side effects in response to specific data changes.

How do you optimize `v-for` performance? (Revisited)

• Using the `key` attribute.

What is Prop Validation? How do you implement it?

• Prop validation allows you to define requirements for the props a component receives (type, required, default value, custom validation). You implement it by providing an object in the `props` option instead of an array, where keys are prop names and values are validation rules.

What is the purpose of the `emits` option in Vue 3? (Revisited)

• Explicitly declaring the custom events a component emits.

What is the difference between `v-if` and `v-show`? (Revisited)

• `v-if`: Renders/destroys element. `v-show`: Toggles display with CSS.

What is the purpose of the `v-html` directive? What are the security implications?

• `v-html` updates an element's `innerHTML`. It renders raw HTML. The security implication is that it can expose your application to Cross-Site Scripting (XSS) attacks if the HTML content comes from an untrusted source, as it can execute arbitrary JavaScript within the user's browser.

What is the difference between `v-bind:key` and `v-bind:ref`?

• `v-bind:key`: Used with `v-for` for list item tracking and optimization.
• `v-bind:ref`: Used to get a direct reference to a DOM element or component instance.

What is the purpose of the `static` modifier on an event listener? (e.g., `@click.stop.static`)

• The `.static` modifier (less common) is used to indicate that the event listener should be attached to the element itself rather than being delegated by Vue's event system.

How do you handle routing with parameters in Vue Router?

• Define a dynamic segment in the route path using a colon (e.g., `/users/:id`). The parameter value is accessible in the component via `this.$route.params.id`.

How do you access the router instance within a component?

• Using `this.$router`.

How do you access the current route object within a component?

• Using `this.$route`.

What is the purpose of the `alias` option in Vue Router?

• `alias` allows you to define alternative paths for a route. When a user visits an alias path, the URL changes to the original path, but the same component is rendered.

What is the purpose of the `redirect` option in Vue Router?

• `redirect` allows you to automatically redirect the user from one path to another.

What is the difference between `push` and `replace` methods in Vue Router?

• `router.push()`: Navigates to a new route and adds it to the browser's history stack, allowing the user to navigate back.
• `router.replace()`: Navigates to a new route but replaces the current entry in the history stack. The user cannot navigate back to the previous page.

How do you handle authentication in a Vue application using Vue Router?

• Using Navigation Guards (`beforeEach`) to check if the user is authenticated before allowing access to protected routes. If not authenticated, redirect the user to a login page.

What is the purpose of the `mapState`, `mapGetters`, `mapMutations`, `mapActions` helpers in Vuex? (Revisited)

• To map store properties/methods to component computed properties/methods, simplifying access.

What are Vuex Modules? When would you use them?

• Vuex Modules allow you to split your store into smaller, self-contained modules. Each module can have its own state, getters, mutations, and actions. You would use them in large applications to organize your store logic and prevent it from becoming a single, monolithic file.

What is the purpose of the `namespaced` option in a Vuex Module?

• Setting `namespaced: true` makes the module self-contained and prevents naming conflicts with other modules or the root store. When namespaced, you need to access the module's state, getters, mutations, and actions using the module's namespace (e.g., `this.$store.state.moduleName.property`, or using namespaced helpers).

What is the purpose of the `plugins` option in a Vuex store?

• The `plugins` option allows you to apply a set of functions that receive the store as an argument and can subscribe to mutations or perform other logic. Plugins are often used for persistence (saving state to local storage) or logging.

What is the difference between `store.commit()` and `store.dispatch()`? (Revisited)

• `commit`: Triggering synchronous mutations. `dispatch`: Triggering actions (can contain asynchronous logic).

How do you access a Vuex module's state, getters, mutations, and actions from a namespaced module?

• Using the namespace string when accessing with helpers (e.g., `mapState('moduleName', ['property'])`) or directly accessing with the namespace path (e.g., `this.$store.state.moduleName.property`).

What is the purpose of the `strict` mode in Vuex?

• When `strict: true`, Vuex throws an error if the state is mutated outside of a mutation handler. This helps ensure that all state changes are predictable and trackable, making debugging easier. It should only be used in development.

What is the purpose of the `devtools` option in Vuex?

• The `devtools` option controls whether the Vuex store should be exposed to Vue Devtools. It's typically set to `true` in development and `false` in production.

How do you handle forms and validation in Vue? (Revisited)

• Using `v-model`, event listeners, and often third-party validation libraries like Vuelidate or VeeValidate.

What is the purpose of the `lazy` modifier on `v-model`?

• The `.lazy` modifier on `v-model` syncs the input value only after the `change` event (usually when the user focuses out of the input), instead of on every `input` event.

What is the purpose of the `.number` and `.trim` modifiers on `v-model`?

• `.number`: Automatically casts the input value to a number.
• `.trim`: Automatically trims whitespace from the input value.

How do you create a custom event in a child component?

• Using `this.$emit('my-custom-event', payload)`.

How do you listen for native DOM events on a component's root element?

• Using the `.native` modifier on the event listener (Vue 2) or by adding the event listener directly with `v-on` without `.native` if the component root is a single element (Vue 3).

What is the purpose of the `inheritAttrs` option?

• `inheritAttrs: false` prevents attributes that are not declared as props from being automatically inherited and applied to the component's root element. This is useful when you want to apply these attributes to a different element within the component's template.

What are Renderless Components?

• Renderless components are components that don't render any visible UI themselves but provide reusable logic (often using slots or scoped slots to expose data and methods to the parent).

What is the difference between a computed property and a method that returns the same value? (Revisited)

• Computed properties are cached based on dependencies; methods are not.

What is the purpose of the `once` event modifier? (Revisited)

• To ensure the event listener is only triggered once.

What is the purpose of the `passive` event modifier? (Revisited)

• To indicate that the touch event listener will not call `preventDefault()`, improving scrolling performance.

How do you handle global components in Vue 3? (Revisited)

• Using `app.component('ComponentName', ComponentDefinition)`.

How do you use plugins in Vue 3? (Revisited)

• Using `app.use(plugin)`.

What is the purpose of the `config.errorHandler` in Vue 3? (Revisited)

• Defining a global error handler for unhandled errors.

What is the purpose of the `config.warnHandler` in Vue 3?

• Defining a global warning handler for Vue-specific warnings.

What is the purpose of the `config.performance` in Vue 3?

• Setting `config.performance = true` enables performance tracking in Vue Devtools.

What is the purpose of the `app.mount()` method in Vue 3?

• `app.mount()` is used to mount the application instance to a specific DOM element, making the application visible on the page.