Vue.js Interview Questions

Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority.

const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name', component: User } // This route gets higher priority
{ path: '/user/:name', component: Admin }
{ path: '/user/:name', component: Customer }
]
})

Generally, the app is composed of nested components which are nested multiple levels deep. The segments of a URL corresponds to a certain structure of these nested components. To render components into the nested outlet, you need to use the children option in VueRouter constructor config.

Let's take a user app composed of profile and posts nested components with respective routes. You can also define a default route configuration when there is no matching nested route.

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched
path: 'posts',
component: UserPosts
},
// UserHome will be rendered inside User's <router-view> when /user/:id is matched
{  path: '',
component: UserHome },
]
}
]
})

Single File Components are an easy concept to understand. Earlier you might heard about all three parts(HTML, JavaScript and CSS) of your application kept in different components. But Single File Components encapsulate the structure, styling and behaviour into one file. In the beginning, it seems strange to have all three parts in one file, but it actually makes a lot more sense.

Let's take an example of Singile File Components

<template>
<h1>Welcome {{ name }}!</h1>
</template>

<script>
module.exports = {
data: function() {
return {
name: 'John'
}
}
}
</script>

<style scoped>
h1 {
color: #34c779;
padding: 3px;
}
</style>

As for the latest modern UI development, separation of concerns is not equal to separation of file types. So it is preferred to divide codebase layers into loosely-coupled components and compose them instead of dividing the codebase into three huge layers that interweave with one another. This way makes Single File Components more cohesive and maintainable by combining template, logic and styles together inside a component. You can also still maintain javascript and CSS files separately with hot-reloading and pre-compilation features.

For example,

<template>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

The Single File Components solve the common problems occurred in a javascript driven application with a .vue extension. The list of issues are,

1. Global definitions force unique names for every component
2. String templates lack syntax highlighting and require ugly slashes for multiline HTML
3. No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
4. No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel.

Filters can be used to apply common text formatting. These Filters should be appended to the end of the JavaScript expression, denoted by the "pipe" symbol. You can use them in two specific cases:

1. mustache interpolations
2. v-bind expressions

For example, Let's define a local filter named capitalize in a component's options

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

Now you can use the filter in either mustache interpolation or v-bind expression,

<!-- in mustaches -->
{{ username | capitalize }}

<!-- in v-bind -->

You can define filters in two ways,

1. Local filters: You can define local filters in a component's options. In this case, filter is applicable to that specific component.

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

2. Global filters: You can also define a filter globally before creating the Vue instance. In this case, filter is applicable to all the components with in the vue instance,

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})

You can chain filters one after the other to perform multiple manipulations on the expression. The generic structure of filter chain would be as below,

{{ message | filterA | filterB | filterB ... }}

In the above chain stack, you can observe that message expression applied with three filters, each separated by a pipe(|) symbol. The first filter(filterA) takes the expression as a single argument and the result of the expression becomes an argument for second filter(filterB) and the chain continue for remaining filters.

For example, if you want to transform date expression with a full date format and uppercase then you can apply dateFormat and uppercase filters as below,

{{ birthday | dateFormat | uppercase }}

Yes, you can pass arguments for a filter similar to a javascript function. The generic structure of filter parameters would be as follows,

{{ message | filterA('arg1', arg2) }}

In this case, filterA takes message expression as first argument and the explicit parameters mentioned in the filter as second and third arguments.

For example, you can find the exponential strength of a particular value

{{ 2 | exponentialStrength(10) }} <!-- prints 2 power 10 = 1024 -->

Plugins provides global-level functionality to Vue application. The plugins provide various services,

1. Add some global methods or properties. For example, vue-custom-element
2. Add one or more global assets (directives, filters and transitions). For example, vue-touch
3. Add some component options by global mixin. For example, vue-router
4. Add some Vue instance methods by attaching them to Vue.prototype.
5. A library that provides an API of its own, while at the same time injecting some combination of the above. For example, vue-router

The Plugin is created by exposing an install method which takes Vue constructor as a first argument along with options. The structure of VueJS plugin with possible functionality would be as follows,

MyPlugin.install = function (Vue, options) {
// 1. add global method or property
Vue.myGlobalMethod = function () {
// some logic ...
}

// 2. add a global asset
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// some logic ...
}
// ...
})

// 3. inject some component options
Vue.mixin({
created: function () {
// some logic ...
}
// ...
})

// 4. add an instance method
Vue.prototype.$myMethod = function (methodOptions) {
// some logic ...
}
}

You can use plugin by passing your plugin to Vue's use global method. You need to apply this method before start your app by calling new Vue().

// calls `MyPlugin.install(Vue, { someOption: true })`
Vue.use(MyPlugin)

new Vue({
//... options
})

Mixin gives us a way to distribute reusable functionalities in Vue components. These reusable functions are merged with existing functions. A mixin object can contain any component options. Let us take an example of mixin with created lifecycle which can be shared across components,

const myMixin = {
created(){
console.log("Welcome to Mixins!")
}
}
var app = new Vue({
el: '#root',
mixins: [myMixin]
})

Note: Multiple mixins can be specified in the mixin array of the component.

Sometimes there is a need to extend the functionality of Vue or apply an option to all Vue components available in our application. In this case, mixins can be applied globally to affect all components in Vue. These mixins are called as global mixins.

Let's take an example of global mixin,

Vue.mixin({
created(){
console.log("Write global mixins")
}
})

new Vue({
el: '#app'
})

In the above global mixin, the mixin options spread across all components with the console running during the instance creation. These are useful during test, and debugging or third party libraries. At the same time, You need to use these global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

Using Vue CLI, mixins can be specified anywhere in the project folder but preferably within /src/mixins for ease of access. Once these mixins are created in a .js file and exposed with the export keyword, they can be imported in any component with the import keyword and their file paths.