Vue JS Interview Questions and Answers
Question - 101 : - What are nested routes?
Answer - 101 : -
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 when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's when /user/:id/posts is matched
path: 'posts',
component: UserPosts
},
// UserHome will be rendered inside User's when /user/:id is matched
{ path: '',
component: UserHome },
]
}
]
})
Question - 102 : - What are single file components?
Answer - 102 : -
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
Question - 103 : - What are the problems solved by Single File Components?
Answer - 103 : -
The Single File Components solve the common problems occurred in a javascript driven application with a .vue extension. The list of issues are,
- Global definitions force unique names for every component
- String templates lack syntax highlighting and require ugly slashes for multiline HTML
- No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
- No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel.
Question - 104 : - What are filters?
Answer - 104 : -
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:
mustache interpolations
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,
{{ username | capitalize }}
Question - 105 : - How do you chain filters?
Answer - 105 : -
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 }}
Question - 106 : - Is it possible to pass parameters for filters?
Answer - 106 : -
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) }}
Question - 107 : - What are plugins and their various services?
Answer - 107 : -
Plugins provides global-level functionality to Vue application. The plugins provide various services,
- Add some global methods or properties. For example, vue-custom-element
- Add one or more global assets (directives, filters and transitions). For example, vue-touch
- Add some component options by global mixin. For example, vue-router
- Add some Vue instance methods by attaching them to Vue.prototype.
- A library that provides an API of its own, while at the same time injecting some combination of the above. For example, vue-router
Question - 108 : - How to create a plugin?
Answer - 108 : -
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 ...
}
}
Question - 109 : - How to use a plugin?
Answer - 109 : -
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
})
Question - 110 : - What are mixins?
Answer - 110 : -
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]
})